Несколько интересностей и полезностей для веб-разработчика #23

[alchapone]

«ApplePie — еще один CSS фреймворк.» — не согласен. Это больше методология и подход о том, делать модульный CSS основнный на конвенциях, так же как и знакомые нам BEM, SMACSS. Читайте о ресурсах внимательнее, если уж делаете обзоры :)

[ilusha_sergeevich]

Не понимаю вашего комментария. Вы не согласны с тем что ApplePie CSS фреймворк? Иначе любой фреймворк, грубо говоря, предоставляет свою методологию и подход.

[alchapone]

Фреймворк предоставляет свою методологию и подход, Но не любой подход предоставляет фреймворк. Набор конвенций по тому как строить интерфейс, структурировать код, и именовать элементы это еще не фреймворк. Хотя там есть Toolkit, который предоставляет определенный каркас для CSS в проекте.
Но мой коммент не про определение 'фреймворк'. Просто мне кажется, «еще один CSS фреймворк» не совсем корректное описание… Про google ведь тоже можно сказать — «еще один поисковик» ;)

[ilusha_sergeevich]

CSS фреймворк и поисковик разные вещи. CSS фреймворков наплодилось огромное количество. На Хабре шутили, что каждый бэкэндер делает свою CMS, а я добавлю, что каждый фронтэндер пилит свой Bootstrap. В ApplePie нет никакого «инновационного подхода», но он обрел некоторую популярность и это еще один CSS фреймворк.

[alchapone]

Про поисковик это была Аналогия… Но если, как я вижу, для вас Bootstrap, понятие 'фреймворк' и 'методология' это по сути одно и то же, то пускай будет фреймворк ))

[xskif]

В написании своего bootstrap, кстати, нет ничего плохого, лишь бы кроссбраузерный. Это будет на много лучше чем безсистемные велосипеды в css. А то потом править чужие стили без какой либо системы — ужасно, а поддержка такого проекта может превратиться в ад.

[XanderBass]

Свой bootstrap разрабатывать хорошо, ИМХО, только для случаев когда:
— Нужно существенно уменьшить объём кода, убрав лишнее
— Нужен свой существенно отличающийся от типового дизайн для VCL-компонентов своего фреймворка (формы, кнопки и т.п.)

И то в перечисленных случаях рациональнее разработать отдельную надстройку над существующим bootstrap. В остальных случаях создание своего bootstrap ничем не оправдано в виду огромных потерь времени. Вот, например, стояла передо мною задача по изменению дизайна окошек в моём фреймворке. Казалось бы, необходимо писать своё полноценное решение. Однако, на деле это ограничилось несколькими строками кода. Кому надо, можете забрать решение (белый бэкдроп, полупрозрачные шапки окошек в стиле «семёрки», больше аккуратности):

div.modal-backdrop { background: rgba(220,240,255,0.6); }

div.je-window { background: rgba(200,220,255,0.5) url('wbg.png') repeat center center; margin-left: -220px; width: 440px; top: 5%; }
div.je-window > div { padding: 8px; }
div.je-window div.modal-header { border-bottom: 1px solid rgb(200,220,255); padding: 4px 8px 4px 8px; }
div.je-window div.modal-header h3 { font: 17px Cuprum,Arial,sans-serif; margin: 2px 32px 0 0; color: #46a; position: relative; padding: 1px 0 0 20px; }
div.je-window div.modal-header .close { color: #710; }
div.je-window div.modal-header .close:before { font: 16px jeUII; content: '\004a'; }
div.je-window div.modal-header h3:before { position: absolute; left: 1px; top: 2px; font: 16px jeUII; }

div.je-window div.modal-body { background: rgb(240,250,255); max-height: 600px; }
div.je-window div.modal-body .form-horizontal div.controls,
div.je-form.form-horizontal div.controls { margin-left: 120px; }
div.je-window div.modal-body .form-horizontal .control-label,
div.je-form.form-horizontal .control-label {
  width: 120px; font: 16px Cuprum,Arial,sans-serif; color: #40444f;
  padding: 5px 10px 0 0; position: relative;
}

Не, ну правда, нафиг изобретать принципиально неоригинальный велосипед ради одного звоночка, когда можно прикрутить готовый звоночек к готовому велосипеду?

[xskif]

Я лишь сравнил «оригинальный CSS» и CSS из фреймворка. Если выбирать из этих двух вещей, то лучше уж систематизированный но не доработанный фреймворк, чем pure css. В случае с фреймворком, любым (а так же любым его форком или собственной наработкой), править и модифицировать проект будет проще, нежели простыню из чистого CSS.

Я тут сделал несколько проектов подряд на бутстрапе, а потом мне заказали сверстать лендинг для уже готового сайта с готовой шапкой и половиной готовых стилей, это был ад… я увидел что люди до сих пор используют контекст идентификаторов в составных селекторах в качестве стилизации, ну и в 2014 году больше половины населения не слышали про box-sizing: border-box, который приятнее и проще, из-за этого бутстрап подключить было нельзя, пришлось пилить свою систему внутри этого хаоса, я уже разучился верстать не объектно, или без применения инкапсуляции внутри css.
В итоге получилось не идеально, но это лучше чем то что было на проекте.

[ilusha_sergeevich]

Фреймворк предоставляет свою методологию и подход, Но не любой подход предоставляет фреймворк.

Вообще да, но простите не удержался, напомнило одного персонажа

[jojo97]

Свежий перевод Use Elements as Background Images with -moz-element из рубрики западные мысли. Кушайте на здоровье:)

[ilusha_sergeevich]

Я восхищен вашей оперативностью. А свойство действительно интересное, это прямо ООП в CSS.

[jojo97]

Спасибо! Да я уже жду ваших подборки, и перевожу, как только так сразу) Да свойство прикольное, вот бы в следующем CSS все пошло в том же направлении, то есть, в сторону динамической привязки свойств и элементов друг-к-друг.

[jojo97]

Перевод 18 Surprises From Reading jQuery's Source Code

[xskif]

ApplePie напомнил, по крайней мере оформление сайта, нынешний дизай хабра. Интересно, кто у кого подсмотрел.)

[Eternalko]

Как частичную альтернативу фениксу (о нем узнал из статьи, спасибо) юзал anvil. mac only.

[ilusha_sergeevich]

А я даже помойму писал про них. Они еще сборщик Hummer выпускают.