UiKit - лучший front-end фреймворк



Хочу представить один из любимых моих CSS фреймворков - UiKit.
Легкий и модульных фреймворк разработки быстрых и мощных веб-интерфейсов от не безызвестной компании Yootheme. Впрочем, он практически не чем не отличается от всем известного BootStrap, но всё же некоторые мелочи делают его лучше. Давайте рассмотрим подробнее.

UiKit - содержит хорошо структурированный код для предпроцессоров - LESS и SASS, все основные компоненты для создания удобного интерфейса. На сайте есть кастомизация (настройка) цветовой схемы, там же вы можете скачать не только CSS, но и LESS, SASS, за что отдельное спасибо разработчикам.

При скачивании с сайта  UiKit мы получаем архив, в котором расположены три основных папки:

- css (хранятся 3 подготовленные темы: базовая, almost-flat, gradient, а также css файлы каждой темы к компонентам )
- fonts (шрифты для правильного отображения иконок FontAwesome)
- js (отвечает за интерактивность)

Начинаем творить

После того переместили папки, в проекте всё это подключается двумя строчками.

 

и не забудьте подключить Jquery.

Для любителей CDN :

 

за место 2.xx.x - нужно проставить версию фреймворка, на момент.

Давайте попробуем сверстать простенький шаблон на базовых элементах. 

1. Создаём каркас :



	
	Blog template


	

2. Прописываем пути до фреймворка в раздел head. Я буду использовать CDN.

 

3. Задаём контейнер. центруем и делаем отступы.

4. Navbar
Теперь нам нужно добавить верхнее меню, оно будет "отзывчивое", т.е меняться в зависимости от устройства.

CSkeBD0[1]
Свёрнутое меню (мобильное)

 

538Zd0Y[1]
Обычное положение

5. Grid.
Основная сетка. Разделим страницу на две части - контент и колонку для виджетов.

контент
сайдбар

6. Article
В комплекте UiKit, есть компонент для вёрстки поста.

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Читать далее 4 комментария

G11PwOJ[1]

7. Panel
Создаём панельки виджетов. Как и для вывода статей, есть компонент для вывода панелей.

Xxpap4D[1]

8. Pagination
Список страниц.

9. Off-canvas
Навигация отображаемое при свёрнутом верхнем меню. В 4 шаге, мы делали ссылку на эту навигацию (), теперь нужно добавить само меню.

01LHN1a[1]
Ну вот и всё, с помощью 6 компонентов можно создать не плохой адаптивный шаблон.
Посмотреть пример.

 




Оставить заявку
Имя
Email
Телефон
Опишите суть
Написать сообщение
Имя
Email
Сообщение