Метка: css

CSS-фреймворки

СSS-фреймворки для веб-разработчика в 2017 году

(CSS (Cascading Style Sheets) библиотеки)

CSS-фреймворки используются для быстрой работы с CSS, упрощают разработку,  исключая проблемы совместимости браузеров, ошибки в коде, содержат в себе встроенные препроцессоры. Перечислены как старые и популярные, так и довольно новые и современные.

Blueprint

http://www.blueprintcss.org

Немного о blueprint:

http://gearmobile.github.io/css/framework-blueprint/

Bootstrap

http://getbootstrap.com

Русская страничка:

http://bootstrap-3.ru/index.php

Подробнее про использование bootstrap:

https://habrahabr.ru/post/211032/

Foundation

http://foundation.zurb.com

Много про foundation: https://webformyself.com/chto-novogo-v-foundation-6/

Semantic UI

https://semantic-ui.com

Skeleton

http://getskeleton.com

Pure

https://purecss.io

пример pure: https://purecss.io/layouts/blog/

Некоторые примеры работы с pure: http://innova-media.ru/news/1147/

Обзор pure css: https://siteacademy.ru/purecss-offers-an-intriguing-alternative-to-bootstrap

Kube

http://kubeframework.com

(либо https://imperavi.com/kube/)

YAML4

http://www.yaml.de

Bulma

http://bulma.io

основывается на Flexbox

Shine

http://rmmfree.github.io/shine_css/

Uikit

https://getuikit.com

Подробнее про UIkit framework: https://webformyself.com/vvedenie-v-uikit-framework-chast-1/

 

Сравнение фреймворков между собой:

http://usablica.github.io/front-end-frameworks/compare.html

Плюсы и минусы фреймворков:

https://webformyself.com/top-10-front-end-frejmvorkov-v-2016/

Еще больше фреймворков:

http://iantonov.me/page/obzor-css-frejmvorkov

https://networkroom.ru/список-css-фреймворков.html

https://habrahabr.ru/post/156747/

Очень много свежих фреймворков: http://www.cssauthor.com/css-frameworks/

Работа с разметкой:

Grid https://css-tricks.com/snippets/css/complete-guide-grid/

Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Другие статьи:

CSS пре- и постпроцессоры

Препроцессоры

Препроцессоры преобразуют код, автоматизируют рутинные операции, убирают дублирование стилей или селекторов, упрощают работу с CSS, позволяют ускорить разработку, на выходе получается кроссбраузерный css. 

Sass  (scss)

(на Ruby)

https://sass-scss.ru/guide/

Дополнительная библиотека Compass

Один из самых популярных препроцессоров

Less

( на JavaScript)

http://lesscss.org

https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/chapter_1/css-reprocessors.html

Stylus

( на JavaScript)

Наиболее гибкий и новый препроцессор

http://stylus-lang.com

Почему все чаще переходят на stylus: https://habrahabr.ru/company/yandex/blog/169415/

 

Отличия Sass и Less: https://habrahabr.ru/post/144309/

 

Что могут добавить в CSS надстройки Sass, Less  и прочие препроцессоры:

  • Переменные
  • Примеси
  • Вложенные селекторы
  • Функции
  • Простая математика
  • Циклы for
  • Массивы
  • Условные операторы if .. else
  • Наследование селекторов
  • Ссылки на свойства

 

Постпроцессор

Постпроцессоры берут готовый CSS и автоматизируют его: например, автоматическое добавление вендорных префиксов к новым свойствам CSS3, автоматизация CSS под оптимальную работу на большинствах современных браузеров.

Постпроцессор — это библиотека, которая преобразует CSS файл и на выходе сохраняет оптимизированный CSS.

Как работает постпроцессор: 

https://webformyself.com/postprocessory-css-dlya-nachinayushhix-sovety-i-resursy/

PostCSS.

(на JavaScript)

Автоматизирует рутинные операции с CSS с помощью расширений, написанных на языке JavaScript. Используется при разработке Википедии, Facebook и GitHub.

http://postcss.org

Подробнее о postCss: https://habrahabr.ru/post/280988/

Pleeease

(для NodeJS)

http://pleeease.io

Bless

Это постпроцессинг для оптимизации под IE

http://blesscss.com

Rework

Фреймворк для создания постпроцессоров

https://github.com/reworkcss/rework

 

Другие статьи: