Данная документация написана для версии 1.0.0
ВНИМАНИЕ! ДОКУМЕНТАЦИЯ В РАЗРАБОТКЕ! In English soon...
Oliwcss был разработан для комфортного старта вёрстки проекта. Он призван упростить жизнь верстальщику и забыть о рутинной работе на протяжении всего проекта, стоит только скопировать начальнкю папку и изменить файл концигураций под свои нужды! Oliwcss включает в себя reset стилей, полезные less миксины, базовые стили основных элементов (формы, таблицы, кнопки, ссылки) и файлы конфигураций для их модификации.
Отличие данного фреймворка от всех остальных это его стиль использования. Oliwcss это не шаблонные стили для элементов, а стиль вёрстки элементов. Он не предлагает вам дефолтный стиль элементов, который сложно изменить и стилизовать под свой дизайн. Oliwcss даёт вам возможность верстать быстрее за счёт проработанной базы миксинов для выравнивания, позиционирования, использовании спрайтов, медиа запросов, адаптиции сайта под ретину.
Фактически Oliwcss включает для себя обширную библитеку less миксинов, которая и является сердцем фреймворка.
Метадология фреймворка частично придерживается стандартов mcss и БЭМ.
Oliwcss лежит по пути desktop ─> code ─> app ─> less
less/
├── core/
│ ├── base/
│ │ ├── br.less
│ │ ├── buttons.less
│ │ ├── common.less
│ │ ├── forms.less
│ │ ├── links.less
│ │ ├── reset.less
│ │ ├── tables.less
│ │ └── typography.less
│ ├── mixins/
│ │ ├── buttons.less
│ │ ├── center.less
│ │ ├── elements.less
│ │ ├── float.less
│ │ ├── gradients.less
│ │ ├── grid.less
│ │ ├── images.less
│ │ ├── links.less
│ │ ├── lists.less
│ │ ├── media.less
│ │ ├── placeholder.less
│ │ ├── position.less
│ │ ├── retina.less
│ │ ├── sprites.less
│ │ └── text.less
│ ├── settings/
│ │ ├── colors.less
│ │ └── options.less
│ ├── snippets/
│ │ ├── container.less
│ │ ├── float.less
│ │ └── tabs.less
│ └── index.less
├── experimental/
│ ├── index.less
│ └── libris.less
├── project/
│ └── index.less
├── all.less
└── fonts.less
Фреймворк содержит в себе малозначительный раздел базовых стилей проекта. Малозначительный он в первую очередь, потому что фреймворк разчитан на использование функциональной части (миксинов), как уже было сказано выше.
Данный раздел может помочь если вам необходимо использовать какие-то стили по умолчанию, без специфического дизайна. Но не смотря на это все параметры этой папки легко редактируемы! Для редактирования базовых стилей наобходимо задавать/изменять значения переменным в папке settings.
Демо некоторых базовых стилей с базовыми настройками
Главный раздел фреймворка - mixins. На его изучение будет возможно потрачено не мало времени, которое в последствии окупится. Тут содержатся миксины как от создателя oliwcss так и частично других фреймворков. Миксины позволяют не только стилизовать блоки быстрее, но и забыть о багах при верном их использовании.
- @c-btn
- @c-btn_hover
- @per-btn_hover: @per-btn_hover
- @brd_c-btn: @c-btn
- @c-btn
- @bg-btn
- @per-btn_hover: @per-btn_hover
- @per-btn_active: @per-btn_active
- @brd_c-btn: @c-btn
Параметры:
- @brd-b-c-btn
- @c-btn
- @brd-b-c-btn_hover
- @c-btn_hover
- @c-btn
- @bg-btn
- @per-brd
- @per-btn_hover: @per-btn_hover
- @per-btn_active: @per-btn_active
- @brd_c-btn: darken(@bg-btn, @per-brd);
@w-btn
@h-btn
@brd_rd-btn
@p_vert-btn
@p_horiz-btn
@f_sz-btn
@lh-btn
@brd_w-btn
Параметры:
@w
@h
@t: 50%
@l: 50%
Параметры:
@w
@h
Параметры:
@w
@h
Параметры:
@item: ~'.-ol-item'
Параметры:
@item: ~'.-ol-item'
Параметры:
@item: ~'.-ol-item'
Устаревший!
Параметры:
@padding
@rows
@counter: 1
Настройки делятся на две части colors и options. Отделение файла цветов произошло в виду исторических причин.
В разделе snippets собраны стили для частоиспользуемых элементов, которые не вошли в раздел base в виду отсутствия одноименных тегов. Это просто частоиспользуемые стили.