Товарищи топовые верстальщики. Нужен совет по "плюшкам" и "штуковинам". Короче, надо будет верстать огромнейший проект, в котором частенько встречаются одинаковые элементы. Хочется верстать это быстро, и не запутаться. Т.к. до сегодняшнего дня я только глазком видел, что такое jade и работаю с sass, хотелось бы узнать полный список инструментов для быстрой и качественной верстки, в которой легко ориентироваться. Делать все буду строго по БЭМу, соответственно нужны какие-то миксины соответствующие (если есть такие), и прочее. Пока у меня в голове такой пак: - Sublime Text 3 как редактор (привык) - Gulp - Sass - Pug (Jade) Вот вопрос: нужны ли обработчики препроцессоров, или они уже есть в галпе? И поправьте, где что не так, чего убрать или добавить. Заранее огромная благодарность всем!

Переименовал к одному названию и поставил разный font-weight, все работает. Но я не могу понять, как на том сайте так же все работает, хотя названия шрифтов разные...

работать будет, но это не считается корректным, по фен-шую название шрифта должно быть одно

Товарищи топовые верстальщики. Нужен совет по "плюшкам" и "штуковинам". Короче, надо будет верстать огромнейший проект, в котором частенько встречаются одинаковые элементы. Хочется верстать это быстро, и не запутаться. Т.к. до сегодняшнего дня я только глазком видел, что такое jade и работаю с sass, хотелось бы узнать полный список инструментов для быстрой и качественной верстки, в которой легко ориентироваться. Делать все буду строго по БЭМу, соответственно нужны какие-то миксины соответствующие (если есть такие), и прочее. Пока у меня в голове такой пак: - Sublime Text 3 как редактор (привык) - Gulp - Sass - Pug (Jade) Вот вопрос: нужны ли обработчики препроцессоров, или они уже есть в галпе? И поправьте, где что не так, чего убрать или добавить. Заранее огромная благодарность всем!

в галпе есть компоновщики и компрессоры, а также автопрефиксер, вместо саблайма я взял бы более мощный и бесплатный vscode

в галпе есть компоновщики и компрессоры, а также автопрефиксер, вместо саблайма я взял бы более мощный и бесплатный vscode

Вот смотри, чтобы у меня обрабатывался sass (то есть компилировался в css) я ставил двигло руби. И уже через нехитрый батник запускаю обработчик сасса на лету. Если будет галп, подобного рода махинаций не потребуется, или всеже надо будет ставить какую нибудь ноду, к примеру?

Я бы прям почитал статьи на эти темы, если вдруг есть у кого

нода, в ноде галп, в вскоде конфиг для галпа и все

либо: нафик ноду и галп, ставь коалу и компиль сасс коалой, на выходе уже пожатый единый css-файл

Так, но есть еще и pug

он-то тебе в верстке зачем?

Как я понял это же препроцессор для html, не?

Или это шаблонизатор?

хз, я не любитель этого, я пишу чистый код

с шаблонизатором приятней

удобней

Мне всегда казалось, что jade (pug) это как sass, только для html. Типа, удобнее и быстрее делать верстку

Разве нет?

его часто в качестве шаблонизатора на бэкэнде юзают. ну в ноде например

Как смарти в пхп?)

http://www.embeddedjs.com/ еще есть такое

Сложноооо. Короче, хочется что-то типа компонентной верстки. Сделал форму, лежит у тебя файлом аккуратно. Берешь и подключаешь ее, куда надо. Как то так.

React/Angular :)

там все компонентно:D

Ноуп

Я не фронт)

Там отдельно будет чел по JS

Отдельно буду я)

Как верстак

http://handlebarsjs.com/ еще такое есть

ну если верстак, то pug вроде норм)

Товарищи топовые верстальщики. Нужен совет по "плюшкам" и "штуковинам". Короче, надо будет верстать огромнейший проект, в котором частенько встречаются одинаковые элементы. Хочется верстать это быстро, и не запутаться. Т.к. до сегодняшнего дня я только глазком видел, что такое jade и работаю с sass, хотелось бы узнать полный список инструментов для быстрой и качественной верстки, в которой легко ориентироваться. Делать все буду строго по БЭМу, соответственно нужны какие-то миксины соответствующие (если есть такие), и прочее. Пока у меня в голове такой пак: - Sublime Text 3 как редактор (привык) - Gulp - Sass - Pug (Jade) Вот вопрос: нужны ли обработчики препроцессоров, или они уже есть в галпе? И поправьте, где что не так, чего убрать или добавить. Заранее огромная благодарность всем!

Ты мыслишь правильно Я именно так и работаю с большими проектами Тебе нужно разобраться как это все настроить ?

ну или html :))

Ты мыслишь правильно Я именно так и работаю с большими проектами Тебе нужно разобраться как это все настроить ?

Да. И что к чему, какая фигня что обрабатывает и прочее.

на бутстрап или любые другие фреймворки посмотри лол

там как раз все компонентно

uikit хорошый пример

https://github.com/uikit/uikit/tree/develop/src/scss/components

на бутстрап или любые другие фреймворки посмотри лол

ненене

Ты не понял

Я свои куски кода хочу применять где надо

А не бутстраповские и прочее

ну я и говорю про твои)

Посмотри как у них все организовано

Бест практики можно сказать

Мне всегда казалось, что jade (pug) это как sass, только для html. Типа, удобнее и быстрее делать верстку

в нем удобно инклюдить блоки, файлы и подобное, + циклы для одинаквых элементов

например шапку и футер делаешь отдельными файлами и инклюдишь их во все остальные файлы

нужна правка шапки, не надо будет её правиь на 20 страницах, а исправить только в одном файле

Вот этого я и хочу!

и инклюдить формы, кнопки и прочее подобное

но это если верстаешь без запущенного lamp, если имеешь lamp, это можно делать с помощью инклюда php файлов

но для фронтендера - lamp вроде как нужен будет потом, отлаживать формы, ajax, данные отправляемые на бэк

ток как ты будешь комилить пхп в html?;D

в одном проекте столкнулся с jade, вроде как прикольно

Не не, я чисто верстак

но это если верстаешь без запущенного lamp, если имеешь lamp, это можно делать с помощью инклюда php файлов

у меня опенсервер и я делаю это с его помощью, т.к. на беке у меня всегда 100% пых

просто верстку делаю в файлах php

согласен, openserver наше все ))

Мне нужно будет отдавать верстку в html, надо чтобы все компилилось в простой html.

Если pug это и делает, то замечательно вообще

У меня тоже опенсервер, если что)

Если pug это и делает, то замечательно вообще

gulp sass pug autoprefixer и в бой

Ты мыслишь правильно Я именно так и работаю с большими проектами Тебе нужно разобраться как это все настроить ?

вот неплохобы вебинарчик наговорить на эту тему и видео на ютуб, всех страждущих носом тыкать

тогда jade самое то, мне очень понравилось, надо взять его на поработать. но он очень критичен к отсупам

вот вэбпак все никак не освою, вот там бы закрутилось все )))

https://github.com/yeoman/generator-webapp еще можешь взять этот генератор и почти все готово

ток pug прикрутить,

https://github.com/yeoman/generator-webapp/blob/master/docs/recipes/pug.md вот так

ERROR: S client not available

кстати человеку ещё live-reload забыли посоветовать

browser-sync

тогда jade самое то, мне очень понравилось, надо взять его на поработать. но он очень критичен к отсупам

Я в сассе привык к отступам)

https://github.com/yeoman/generator-webapp еще можешь взять этот генератор и почти все готово

тут он есть:)

browser-sync

gulp+jade+sass+sourcemap+autoprefixer+browsersync

не забудьте человека научить всем этим пользоваться )))

Кстати да)))))

Хотя бы статейку

Какую

долго мучил конфиг jade+browsersync, отмучил, работает ))

соурс мапы и оптимизация картиночек тоже есть:)

Так

А соурсмап шо такое?

ты в браузере смотришь же не sass, а css

а соурсмап будет показывать где это свойство находится именно в sass

Ну да, у меня же при сохранении sass сразу компилится css, а css уже подключен к вертке

Ага

Понял

Полезно

у кого сколько уходит на верстку, чую, что то я торможу не по детски, интерсна средняя скорость )))

- Node.js - Gulp - Jade/Sass - SourceMap - BrowserSync

Верно?

- Node.js - Gulp - Jade/Sass - SourceMap - BrowserSync

+

у кого сколько уходит на верстку, чую, что то я торможу не по детски, интерсна средняя скорость )))

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

- Node.js - Gulp - Jade/Sass - SourceMap - BrowserSync

теперь идешь по ссылочки выше, читаешь как запустить и готово:)

ток pug надо будет прикрутить

кто-то gulp-shorthand юзает?

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

))) такая же фигня, проблема - как назвать очередной класс ?

теперь идешь по ссылочки выше, читаешь как запустить и готово:)

Какой именно?

Какой именно?

https://github.com/yeoman/generator-webapp#getting-started