FA-Kit
Фреймворк

FA-Kit 0.5.0

Grid-фреймворк


free

Краткая информация

Дата создания15 Мар 2016
Последнее изменение18 Мар 2018
Версия0.5.0

Техническая информация:

  • Пакет сборки: Gulp
  • Препроцессор: SASS
CSS фреймворк

Flexible Asix Kit — CSS фреймворк

Во времена еще третьего бутстрапа, что было не так давно, мы столкнулись со множеством проблем и недоработок со стороны сообщества фреймворка. Часто использовались свои мини-библиотеки для реализации flex-сетки в качестве аналогов бутстрапа. Однажды из такой сборки и родился FAKit.

Сетка

FAKit — это удобные sass миксины для сетки css. Базово можно создавать сетку на 12 колонок, но если вам необходимо больше — достаточно залезть в файл настроек и указать необходимое кол-во.

// 2.1 Create grid
@mixin touch_grid($cols, $media_quaries)
	*[class*='g-cols__']
		padding : 0 1rem
		position : relative
		width : 100%
		min-height : 1px
	@each $item, $size in $media_quaries_up
		@include media_query_up($item)
			@for $col from 1 through $grid_cols
				.g-cols__#{$item}-#{$col}
					max-width : 100% / $grid_cols * $col
					flex : 0 0 ( 100% / $grid_cols * $col )
				.g-offset__#{$item}-#{$col}
					margin-left : 100% - (100% / $grid_cols * ($grid_cols - $col))	
Peace

Неконфликтность

Мы сами используем эту библиотеку вместе с bootstrap #4, собирая из них удобный и подходящий к проекту пакет. И, чтобы исключить возможные конфликты в наименовании классов, мы взяли за основу методику БЭМ.

Продвинутый уровень

Продвинутый уровень

Необходимо отметить высокий порог вхождения в нашу разработку. Основная его цель — использоваться в качестве модульной системы, которая подключается по мере необходимости. Например базово — мы хотим использовать только сетку, без других стилей — подключаем только сетку.

Планы

В планах у нас дорабатывать и улучшать эту разработку, добавить новых элементов, новых заготовок. К слову, обращаем ваше внимание на то, что в данном фреймворке отсутствует javascript.

Changelog:

  • v-0.5.0
    • Заменен препроцессор с Less на Sass
    • Созданы миксины и утилиты для генерации сетки сайта
    • Переделан фреймворк под стандарты flex
  • v-0.1.0
    • Разработан фреймворк на Less