Какие технологии/frameworks использовать для верстки лендинга или какие готовые решения порекоммендуете?

Question

[Никита]

Подскажите, с использованием чего можно сверстать страницу в стиле лендинга такого типа getapitchdeck.com/demo/? Да, я знаю про bootstrap ;) Хотелось бы услышать более точные комментарии с советами. Должны быть в сети какие-то tutorial'ы или шаблоны, которые решают данную задачу максимально эффективно.

К текстам требуется добавить легкую анимацию в момент, когда пользователь долистывает страницу до появления надписи на экране. Отличный пример - www.baribal.be/appi
или vivaco.com/demo/stylio_v2/index-light.html

Может быть знаете коммерческие темы, которые можете порекоммендовать?

Заранее большое спасибо за помощь!

Answer 1

[Maksim Zverev]

Для node.js - grunt или gulp и выбираете препроцессоры для html и css.
Для ruby - я использую middleman

Совсем крутой вариант - постичь дзен bem

Смысл в чем, все лендинги по сути набор повторяющихся блоков, использую препроцессоры и сборщики, вы можете выделять эти блоки в отдельные файлы и таскать их между проектами, исправляя лишь контент и немного стилистику оформления. Что бы понять о чем я, почитайте вводную статью по БЭМ методологии.

Это все технологии, фреймворки можно не использовать ибо после нескольких лендингов у вас будет свой набор блоков на 90% покрывающий потребность

Comments

[Никита]

Огромное спасибо за развернутый ответ! Действительно, если создание страниц с похожими блоками требуется с некоторой периодичностью, то без описанной технологии процесса не обойтись - уж очень много будет занимать времени.

[Никита]

Посмотрел БЭМ, но он показался попыткой полностью "переработать" подход к созданию страниц, фактически отказавшись от стандартных инструментов. Из описанного мне очень понравился middleman для ruby.
Еще раз спасибо за подсказку подхода к решению задачи ;)

[Maksim Zverev]

Каюсь у меня так и не дошли руки до полноценного использования БЭМ, пока только использую некоторые их принципы в именовании классов и разбиение файлов по блокам, рад был помочь

[Максим]

Тоже БЭМ использую только для именования классов. ИМХО, БЭМ - это извращенный способ использовать веб-компоненты. Уж лучше Polymer юзать. С ним больше вероятность, что когда стандарт выйдет не придется все писать с нуля.

Answer 2

[Никита Рябин]

Мне кажется, или такую страничку можно и самому сверстать без свяких фреймворков? Поправьте если ошибаюсь.

Comments

[Никита]

Можно и сверстать "с нуля" ;) Но сколько это займет времени?

А если использование готовых решений позволит это сделать в разы быстрее, то почему не использовать их?

"Лишняя работа" ради процесса не помогает в быстрой реализации. Все должно быть оправдано. Если собственное решение позволяет реализовать что-то, что обязательно требуется и нельзя быстрее и проще сделать с использованием готовых решений, то, естественно, надо делать самостоятельно.

[Никита Рябин]

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

Answer 3

[Roman Zhak]

Angularjs, Backbone.js или Backbone.Marionette.js идеально подойдут.

Comments

[Никита]

Лендинг статический же, не требуется никакого взаимодействия с пользователем. Разве AngularJS не для создания приложений? В данной задаче только верстка. Благодаря вашему ответу и чтению по поводу AngularJS наткнулся на gumbyframework.com. Выглядит интересно.

[Roman Zhak]

@n1k0s можно из готовых посмотреть - www.designrazzi.net/2014/landing-page-templates

[Никита]

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

Answer 4

[ixon]

Какой нибудь css фреймворк для кросс-платформенности, например: Bootstrap или 1140px.