Какой фреймворк предпочтительнее для фронтэнда?

Question

[srko]

Собственно, что лучше изучать ZURB Foundation 5 (с SASS) или Twitter Bootstrap 3 (с LESS)?

Планировал погрузиться в Bootstrap, но вот наткнулся на вполне разумное мнение, что для фронтэнда Foundation будет лучше.

Сам я ни с тем, ни с другим не работал. И даже с препроцессорами толком не знаком.
Занимаюсь только версткой и понимаю, что пора уже что-то выбирать. Потом планирую верстать Wordpress темы.

Хотелось бы услышать мнение знатоков.

Answer 1

[Денис Инешин]

Фреймворки под разные задачи.

Вообще, если верстаете обычный сайт или вордпресс тему, то они вообще не нужны.

Comments

[srko]

Отчасти да, но они упрощают некоторые рутинные задачи.

[Денис Инешин]

Под рутинные задачи пишутся сниппеты, и потом по хоткеям вставляются в редакторах.

[Сергей Протько]

@IonDen ну не сказал бы. Рутинные задачи для меня это:
- вендорные префиксы (спасает autoprefixer)
- спрайты (spritesmith решает эту проблему наура)
- оптимизация графики (pngquant и jpgmin, или тулзы типа imagemin)

Снипеты выносятся в миксины и используются там где нужны. Из готовых каркасных стилей предпочтительно использовать только нормалайз/ресет стили. Бутстрапы же и фаундейшены хороши для чего-то что не имеет дизайна. То есть если вам нужно сделать админку, простенькое приложение и т.д. В остальном я не вижу смысла, можно просто использовать набор миксинов для реализации стандартных вещей.

[srko]

@IonDen может я не так выразился, но, например, зачем писать css сетку, если можно использовать готовую?

[Денис Инешин]

@Fesor задачу префиксов прекрасно решают less-миксины, оптимизация графики - пусть этим займется сборщик вроде grunt со своими плагинами. Спрайты, ну да, нужны какие-то инструменты для их изготовления. Но это не та рутина, которая связана непосредственно с версткой.

@srko готовая сетка - это тот же самый готовый сниппет, а не целый бутстрап.

[Сергей Протько]

@IonDen ну да... держать у себя гору миксинов, следить за их актуальностью и т.д. это намного удобнее чем просто использовать плюшки css3 и не париться по поводу префиксов, а просто указать в конфиге сборки какие браузеры мы суппортим.

Answer 2

[anyd3v]

Если вопрос стоит в Less только из-за бутстрапа, то вот их порт на sass getbootstrap.com/css/#sass

я за sass/scss

Comments

[srko]

Не только, некоторые wordpress фреймворки с Less идут

[Сергей Протько]

@srko что?

[anyd3v]

да тоже интересно про "wordpress фреймворки". Может темы?

[srko]

@Fesor roots.io

[srko]

@anyd3v WordPress Theme Frameworks. Их много разных.

[anyd3v]

в чем тогнда вопрос? если связаны с ворвпрессом и мног less то берите его. Смысл гнатся за модой в ущерб своей производительности? на счет roots там написано что bootstrap, но не написано что это должен быть обьязательно less

[srko]

@anyd3v так дело в том, что в плане wordpress и препроцессоров у меня вообще нет никакой производительности. Это все будет, условно говоря, для меня в новинку. Стою перед выбором, что учить чтоб потом использовать.

Answer 3

[Piranis]

sass + compass + haml(rails)
например градиент
из

background-color: #ffffff;
@include filter-gradient(#ffffff, #e5e5e5, vertical);
@include background-image(linear-gradient(top,  #ffffff 0%,#e5e5e5 100%));

в

background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

Comments

[Сергей Протько]

less/sass + autoprefixer позволяет добиться того-же результата одной строчкой

background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);