Fabrique - Задание/руководство на базе Bootstrap

[klierik]

Привет.

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

Когда то много лет назад я начинал с тех же шагов что и большинство текущих новичков. Читал документации, выполнял задания бесплатно только ради опыта или за мизерную стоимость. Было такое что я брал заказ на 40 однотипных сайтов размером с одну страницу и был очень рад этому потому что вносило вклад в мой опыт.
Но настоящий рост начался когда я пришел в одну компанию где уровень задач был ну просто несоизмеримо выше моих знаний. От меня требовалось создать админ-интерфейс для js библиотеке, у которого огромное количество элементов, которые могли попасть в любую часть страницы и во внутрь чуть ли не любого блока.
Вот тогда мне стало понятно что профессиональный рост возможен только когда поставленные задачи выше твоего уровня знаний.

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

 

Краткое описание ситуации.
Давай будем исходить от абстрактной ситуации когда ты получил на входе макеты psd, а на выходе тебе надо выдать готовое решение согласно поставленных требований.
Так как процесс наш все таки учебный, то жестких временных рамок у нас нет, но условно предположим что на его выполнение тебе дали 2 недели.
Сам проект -- это интернет магазин. А значит у нас будет следующий набор страниц:

1. Главная страница
2. Страница категории
3. Страница товара
4. Страница авторизации
5. Страница регистрации
6. Страница пользователя
7. Страница корзины
8. Страница оформление заказа
9. Страница подтверждения оформления заказа
10. Страница для связи с саппортом
11. Страница со статичными данными (статья напимер)
12. Страницы системных ошибок (404 например) 

Архив с исходниками качай от сюда. 
 
Представленный макет имеет 12 колонок и написан под ширину экрана 1000пк.
Ну в целом все понятно и особых проблем возникнуть не должно. 
А теперь я внесу в задание реалии которые вполне могут повстречатся на твоем пути. Ну что ж, поехали
 
Функциональные данные.

1. Не смотря на то что макет нарисован под 1000пк заказчик желает сделать его адаптивным. Заказчик соглашается с тем что некоторые горизонтальные отступы/поля  могут незначительно отличатся от макета.
2. Исполнитель должен реализовать работу с поддержкой адаптивности на базе нижеизложенных данных. Как только будет готово первое демо, заказик, возможно, будет вносить изменения в работу тех или иных блоков страницы для достижения наилучшей картинки.
3. Все размеры блоков для каждого представления сайта (их будет 4)  исполнитель во время разработки делает на свое усматрение, отталкиваясь от наиболее гармоничного результата, максимально приближенного к оригиналу.
4. Не все страницы представленны с исходниках. Такие страницы как категория, аккаунт, оформление заказа (далее по тексту "чекаут") и статья в данный момент отсуствуют и будут предоставленны позже (так было бы написанно в тз, но в реале данный архив их попросту не содержит, так что будем отталкиватся от того что есть).

Технические данные.

1. Сайт должен быть написан на базе фреймворка bootstrap версии 3 (в проекте должна быть использованна dev версия с репозитария)
2. Поддержка браузерами IE8 и выше (для ie8 адаптивность не требуется, так как браузер не поддерживает ее)
3. Все что педставленно в проекте должно быть сверстано в стиле graceful degradation. Учить браузер тому чего он не умеет не требуется. Использование дополнительных ресурсов, особенно для ie -- избыточно и не приветствуется.
4. В случае если в макете попадаются такие фишки, например, borser-radius, то он задается только в css. Если браузер поддерживает свойство только через пефикс -- использовать префикс для применения правила.

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

...bootstrap/bootstrap/distbootstrap/...images/images/iconsimages/block-nameimages/...css/css/project-name.min.cssless/js/js/jquery.min.jsjs/plugins/js/plugins/plugin-namejs/plugins/plugin-name/plugin-name.min.jsjs/plugins/plugin-name/plugin-name.zip

Gruntfile.js

package.json 

Более развернутый пример структуры файлов и директорий представлен в этой теме

 

Теперь поясню некоторые папки.

 

bootstrap/ - в этой папке хранится содержимое репозитария. Тебе предстоит скачать мастер ветку и содержимое выложить в нее. А так же тебе надо будет сбилдить исходники что бы получить содержимое в папке bootstrap/dist/. Описывать как это сделать я не буду -- научись сам. Но подскажу что для этого тебе понадобится node.js и grunt
И кстати - никаких значений в самом бутстрапе ты не меняешь! Любые изменения ты вносиш в свои less файлы, поверх дефолтных. А если сохранишь глубину как в оригинале то умный минимизатор в итоге перезапишет правила бутстрапа твоими.
Все возможные элементы которые присутствуют в бутстрапе мы используем в нашем проекте. Те что отсутствуют -- дописываем.
 
css/ - сюда будут ложится скомпилированные css файлы из less файлов.
 
less/ - тут будет список твоих less файлов. Основной less файл именуй как project-name.less и в него импортируй остальные less файлы со стилями. Так же рекомедую в него сразу импортировать scanfolding.less, mixin.less и variabless.less которые находятся в бутстрапе. Для компилирования используй рекомендации с http://lesscss.org. Так же возможно под твою ОС существует программа с графическим интерфейсом для этого процесса.
 

Gruntfile.js - я использую команды этого файла для того что бы мои less файлы компилировались на лету, или при запуске комманды из терминала. В проектах в которых я участвую он присутствует всегда и им пользуются как фронтент так и бекенд разработчики. Могу поделится, если надо.
 
Теперь давай разбирать макет.

Мы имеем стандартный лейаут, состоящий из шапки, контента и футера.
От тебя требуется визуально разделить макет на структуру(лейаут) и на блоки которые она содержит.
Для этого тебе надо создать сетку на базе инструмента bootstrap grid.
Важно: не используй классы bootsrap grid в разметке! Применяй соответствующие правило напрямую в less.
 
Пример: less/layout.less
 
Смотри, тут задается какой див должен выступать в роли row, и какой в роли ячейки. По аналогии ты строишь весь лейаут во всех требуемых ситуациях! В исключения попадают данные контента, например статьи, но там свои особенности. Они незначительные и рассматривать мы их не будем.
 
Главная страница
 
Шапка сайта

 

 
В данном случае шапка делится на 2 строки.
Первая содержит 4 блока. От тебя требуется создать структуру для этих блоков на основе грида бутсрапа. Точной копии ты не получишь -- не парься. Зато получишь уловную резину. Размер каждого блока тебе следует подобрать самому.
Логотип делай текстом.
 
Кстати по поводу шрифтов. Их в комплекте нет. Но в макете использованы бесплатные шрифты которые можно найти в google web fonts. И не забудь указать семейство.
 
Меню пользователя и валюту делай, например, списком. Разделители через :pseudo-element.
 
В блоке с корзиной вместо представленной иконки используй ту что идет в бустрапе. Учти что имя может быть длинное и в таком случае пусть контент наполняется снизу вверх.
 
Вторая строка содержит .navbar с дропдаунами и поиск.
С навбаром и дропдаунами вроде все просто - внести изменения поверх дефолтных (структуру описания ищи в less файлах бутсрапа и соблюдай глубину 1:1 как там).
 
Поиск тоже достаточно прост. Но за основной стиль для .form-group (из бутсрапа) возми тот, для элементов формы, который представлен на странице регистрации, а для текущей ситуации просто внеси изменения поверх.
 
Посмотри в примерах бутстрапа как сделана навигация и сделай по аналогии.
 
Футер сайта

 

 

Тут тоже все понятно. Область делится на 2 строки.

 

В первой 4 блока, которые при ужимании в итоге станут просто один под одним (в шапке кстати аналогично). Если вдруг иконки не влезут в последнем блоке, то можно уменьшить расстояние.

 

Если представить что каждый блок - это колонка, то сейчас их 4. Градация при уменьшении будет 4-2-1. Но надо проверить при какой ширине экрана сбрасывать 4 в 2 что бы смотрелось хорошо. В целом такой поджод тебе надо будет использовать во всей адаптивной верстке как за точку отсчета.

 

Далее внизу пару блоков раскиданных по углам.

 

Так как сетка в бутстрапе 12 колоночная каждый блок тут будет занимать 4 части.
 
Контент
 
Слайдер и инфо блок

 

 

Это 2 колонки шириной 8 и 4 частей.
Слайдер состоит из картинки, у которой будут стили .img-responsive(), заголовка, текста и кнопки. При уменьшении картинка будет становится соотвественно меньше. Блок с текстом будет становится по ширине больше, что бы текст влез. Блок текстом так же можно повесить на грид, или просто задать приавила ширины через @media.
 
Инфо блок содержит баннер - полностью картинка. И блок рассылки новостей. Так как картинка при уменьшении так же будет терять высоту, то что бы рассылка не подскакивала вверх -- закрепим ее в нижней линии области. Инпут тянется по ширине. Ширина блока будет равна ширине баннера.
 
При уменьшении следует откалибровать эти блоки что бы смотрелись гармонично. При мнимальной ширине экрана вся область -- dispay:none. Это просто реализовать через стандартные правила бутсрапа. Смотри таблицу на сайте в документации.
 
Блоки контентной части

 

 
Давай тут определим терминологию. Если сущность находится в центральной части то, как правило, все аналогичные сущности выглядят одинаково. В сайдбаре так же. Но что бы различать блок который в центре и блок который сайдбаре я для себя выбрал следующие имена классов:

• .unit {} -- блоки с таким именем находятся в центрально части.
• .block {} -- блоки с таким именем именем находятся в сайдбаре.

 
Тут речь идет о блоках которые однотипны, разница между которыми только в содержимом и заголовке. Оба эти блока состоят из элементов: заголовок и содержимое. Но их вид разный. Вот и именуются они по разному.
 
Юнит состоит из

• Линия сверху
• Область для заголовка
• Область с содержимым

 
Оттакливаемся от того что одинаковое только в то что в перечне. А вот название и содержимое разное. В общем как и показано на главной странице.
 
Тут юниты наполнены картинками с продуктами. В бутстрапе этот блок называется thumbnail. Берем его за основу, кладем в созданный нами список для подуктов, называем, например, ul.products-grid {}
Для каждого <li> опиши правила 4-2-1 и все. 
 
Расмотрим thumbnail детальнее.
 
 

• Картинка
• Название и цена
• Описание
• Екшены

Высота этого блока пусть будет фиксированна да бы избежать лесенки. Теперь введем ограничения

• Название продукта может быть не более 2х строк. Если больше то невидимо. Высота для этого бдока установлена по умолчанию. Исключением может быть только при минимальной ширине экрана. Высота:авто;
• Описание продукта не может занимать более 4х строк. Высота этого блока так же фиксированна. Исключение аналогично предыдущему.

Кнопки размещаются после них. Классы у кнопок будут .btn.btn-default.btn-small а внешний вид ты переопределиш в своих стилях.
Это сложный элемент и подобрать значения для каждой ширны экрана прийдется тлько методом перебора и подстановки. Зато в итоге все будет смотреть очень даже хорошо.
 
 
Страница каталога
 
 
Эта страница считай тебя уже сделана так как тут используется тот же .products-grid
Но эта страница будет 2-х колоночная. Сайдбар будет слева. Такой же как на странице регистрации только наоборот.
 
Страница продукта

 
Заголовок продукта
 
Он состоит из 2х колонок. Тут все просто и понятно по картинке. Ширина каждой равна 6 частям.
 

 

 

Дальше галерея продукта и его информационная часть делятся следующим образом

 
 
Область делится так же на 2 уолонки шириной по 6 частей каждая. Превьюшки под большой картинкой так же делят область на 2 по 6 частей каждая. При мнимальном размере экрана превьюшки занимают 6 частей. 
А область с описанием и галереей уже 12 частей и выстраются в одну колонку.
 
Следующим идет область с описанием продукта. Делим структуру следующим образом
 

 
Описание не трубует определенной разметки и просто находится внутри области.
А вот блоки под ней делятся на 4 ячейки, с шириной по 6 частей каждая. Возможно при каком-то разрешении экрана будет достаточно места что бы их высторить в ряд (ширина каждой ячейки будет 3) но не факт.
 
Следующий блок ниже под галереей это уже созданный тобой ранее -- юнит. Только содержимое у него другое.

 

 
В сайдбаре .block с похожими продуктами. Наполнен опять таки .thumbnail но имеет слегка иной вид нежели наши товары.
Назвать его можно .related-products и положить в содержимое блока(структуры) .block-content{}

 

 
 

Страница корзины

 

Так как ограничения на форуме до 10 фоток в пост, далее пойдут ссылки

 

Корзина

Тут у тебя будет много работы что бы правильно отрисовать все отступы и поля. Большего от тебя и не требуется. За основу бери бутстраповкий .table и большую часть ты получишь уже с ходу.
Вообще таблицы эта та штука с которой сильно заморачиватся не стоит ибо достичь 1:1 с дизайном зачастую сложно и попросту не нужно.
Ширину колонок выставь в ячейках шапки th.review th.name.
Иконку "удалить" поменяй на бутстраповскую.
 
Верхушка и область под корзиной делятся на 2 ячейки. Схематично должно быть все понятно.
 
Страница статьи
 
Оформление в принципе у тебя уже все будет из коробки так что особо заморачиватся в рамках данной задачи тебе не предстоит.
 
Страницы регистрации, авторизации, связь с нами и 404

 

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

Регистрация 
 
Ну в общем то в целом по дизайну и его построению все.
Не скажу что это легко но то что по силу -- однозначно.
 
Мои рекомендации по less/css и html
 

• Не использовать .camelCase.
• Классы именовать краткими англоязычными терминами
• Классы которые состоят из нескольких слов оформляй так: .block-name
• Не используй комментирование в html - красиво отформатированная разметка (с оступами, переносом строк) и логичным именованием классов не нуждается в комментировании
• Глубина в less не должна быть больше 3х уровней, за редкими исключениями. То есть в css должно быть ну глубже: .products-grid .caption .name{}. Хотя тут можно обойти через .products-grid .product-name{}
• Код должен быть гибким. Блоки могут и будут содержать блоки и элементы.
• Не следует делать жесткую привязку всего и вся. Описывай каждый уникальный блок отдельно что бы иметь возможность его легко изменить при надобности
• Форматируй less и html так что бы он был читабельный. Не важно сколько лишних пробелов или переносов строк -- главное читабельность. На живом сервере это все сожмется до минимума без тебя.
• Разделяй css свойства на групы и разделяй их пустой строкой (напимер как это рекомендуют в БЭМ). Такое оформление легко читать. Особенно хорошо читается бекенд программистами которым надо что-то быстро поправить (как показала практика на последние пару лет)
• Помни что твой код могут и будут читать другие люди, и важно не то сколько комментариев ты напишешь, а краткость кода и его оформление.

Готовый результат выкладывай в веб в готовом виде. А на гитхаб исходники тобою написанные.
 
Те не многие кто все же осилит данную задачу -- поверьте, вы будете очень собой гордится выполнив работу. Это будет хорошим толчком для твоего виденья построение веб ресурсов. Ты больше не захочеш делать мелкие сайты, а руки будут чесатся братся за более сложные задачи. Твой уровень будет расти вверх и доход, соответственно, тоже.
И если ты думаеш что быть верстальщиком дело обычное и простое, что каждый может постичь дзен, что доход верстальщика имеет высшую планку, и не дай Бог, ты ее себе представляете -- ты сильно ошибаешься. Все ограничение только у тебя в голове.
 
Я тебе говорю как разработчик, который еще несколько лет назад тусил в разделе для начинающих, тут, на форуме и на портале, перечитывая спеку и задавая море вопросов.
 
Дай Бог здоровья, долгих лет, успехов, личностного и профессионального роста Владу, создателю сего замечательного ресурса, и Всем кто был благосклонен отвечать на мои вопросы. 
Всем кто помогал и помогает этому форуму, тем кто его поддерживает, отвечая на вопросы новичков. А так же и тем кто помогает держатся форуму с технической стороны.
 
И на последок скажу, что этот пост был написан в декабре месяце, почти под Новый год, под пальмами, на песчаном берегу в метрах 30 от морьки, с которой веет приятный свежий ветерок и слышен шум волн.
 
Искрене желаю тебе успеха!

[Roger]

bootstrap/ - в этой папке хранится содержимое репозитария. Тебе предстоит скачать мастер ветку и содержимое выложить в нее. А так же тебе надо будет сбилдить исходники что бы получить содержимое в папке bootstrap/dist/. Описывать как это сделать я не буду -- научись сам. Но подскажу что для этого тебе понадобится node.js и grunt

а можно подробнее про этот пункт? не могу понять что значит сбилдить

Edited March 5, 2014 by Roger

[Svatov]

 

bootstrap/ - в этой папке хранится содержимое репозитария. Тебе предстоит скачать мастер ветку и содержимое выложить в нее. А так же тебе надо будет сбилдить исходники что бы получить содержимое в папке bootstrap/dist/. Описывать как это сделать я не буду -- научись сам. Но подскажу что для этого тебе понадобится node.js и grunt

а можно подробнее про этот пункт? не могу понять что значит сбилдить

 

 

Build в данном контексте означает "собрать". Обычно создается файл или он уже создан с необходимыми настройками (директивами) внутри на основе которого программа собирает приложение или подготавливает необходимый набор файлов

 

В данном случае grunt это сборщик на основе программной платформы Node.js. А чтобы в этом разобраться нужно перелопатить кучу материала. Установить Node.js, установить необходимые модули к нему (npm install) и тд.

Edited March 5, 2014 by Svatov

[klierik]

набросок с рабочей средой LESS 2 CSS: https://github.com/klierik/htmlforum-fabrique-example

 

Так же мини-мануал для что бы оно заработало (мануал написан для консоли в среде osx/linux/*nix систем):

 

Grunt compile environment

Requirements

- http://nodejs.org/

- http://gruntjs.com/getting-started

$ npm install -g grunt-cli

 

Open skin folder (перейти в директорию с проектом)

$ cd /path-to-project-folder/htmlforum-fabrique-example

 

Run install (запустить команду в консоли для установки модулей)

$ npm install

 

Compile less (для компилирования less в css)

$ grunt less

 

Watch less (мониторинг изменений файлов и автоматический запуск компилирования less в css)

$ grunt

Как собрать (сбилдить) bootstrap

 

Перейти с директорию в которой хранится bootstrap

$ cd/htmlforum-fabrique-example/bootstrap

Запустить установку модулей

$ npm install

Собрать/сбилдать bootstrap из исходных файлов

$ grunt dist

Подробнее о bootstrap: https://github.com/twbs/bootstrap

[Roger]

вроди бы разобрался с Gruntjs с npm пакетами

 

Для компилирования используй рекомендации с http://lesscss.org. Так же возможно под твою ОС существует прогамма с графическим интерфейсом для этого процесса. 

 

 

а Grunt.js разве не компилирует .less файлы?

Edited March 10, 2014 by Roger

[klierik]

 

 

Grunt я предлагал для тех кто хочет углубится в среду разработки и получить знания, которые позволят в будущем работать одновременно с многими проектами используя более гибкие инструменты благодоря консоле, чем аналогичное ПО с интерфейсом.

 

А вот касается lesscss.org - то с ним, все таки, проще. Не говоря о софте.

 

Каждый для себя сам выберает насколько глубоко хочет углубится в обучении

[Roger]

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

Edited March 10, 2014 by Roger

[ryter]

добавте еще пунктик с jade  к интересности +100 

[Bassline]

makefile - я использую команды этого файла для того что бы мои less файлы компилировались на лету, или при запуске комманды из терминала.

А чем makefile отличается от gruntfile? Gruntfile вроде бы тоже компилирует, минимизирует и конкатенирует файлы на лету.

[klierik]

@Roger, @Bassline,  

Я не сразу использовал Grunt. В тот момент когда была написана данная тема, я использовал $ lessc и мониторинг файлов на базе другого ПО.

На данный момент сибираю все Grunt`ом.

 

Спасибо что обратили на этой внимание. Обновил пост.

 

 

добавте еще пунктик с jade  к интересности +100 

понятия не имею что это.

[ryter]

@Roger, @Bassline,  

Я не сразу использовал Grunt. В тот момент когда была написана данная тема, я использовал $ lessc и мониторинг файлов на базе другого ПО.

На данный момент сибираю все Grunt`ом.

 

Спасибо что обратили на этой внимание. Обновил пост.

 

 

добавте еще пунктик с jade  к интересности +100 

понятия не имею что это.

http://jade-lang.com/

[klierik]

гуглом я умею пользоватся. у меня есть Grunt -- зачем мне искать что-то другое?

[ryter]

гуглом я умею пользоватся. у меня есть Grunt -- зачем мне искать что-то другое?

https://github.com/gruntjs/grunt-contrib-jade 

[Roger]

Важно: не используй классы bootsrap grid в разметке! Применяй соответствующие правило напрямую в less.   Пример: less/layout.less

 

 

Примерно так или я ошибаюсь?

.wrapper {  .make-row();}.content-main {  .make-lg-column(8);}.content-secondary {  .make-lg-column(3);  .make-lg-column-offset(1);}<div class="wrapper">  <div class="content-main">...</div>  <div class="content-secondary">...</div></div>

[klierik]

да, верно.

но отталкивайся от того, что -xs- работает на любой ширине, -sm- от 768 и выше и так далее. то есть не обязательно описывать все 4 шага responsive (в большинстве случаем). Зачастую хватает указать -xs- и -sm-

например:

.slide-layout {	.make-row();	.clearfix();	.col-l,	.col-r {		.make-xs-column(12);	}} 

по умолчанию ширина колонки будет 12 частей (100%) под любую ширину экрана.

а теперь внесём изменения на все устройства, ширина экрана которых больше 768.

.slide-layout {	.make-row();	.clearfix();	.col-l,	.col-r {		.make-xs-column(12);		.make-sm-column(6);	}}

ну и так далее...

[Sergik+]

Возможно ли пересобрать bootstrap на sass ? Можно конечно и less использовать.

Очень охота данный макет осилить.

Edited August 25, 2014 by Sergik+

[klierik]

Возможно ли пересобрать bootstrap на sass ?

 

https://github.com/twbs/bootstrap-sass

[Sergik+]

Сложновато с ходу, но думаю разберусь.

Я правильно понимаю что каждый раз при компиляции нашего проекта

из bootstrap будут тянутся только необходимые инструменты и ничего лишнего ?

Разобрался, если все тянуть то 6000строк прилетает.

Edited August 25, 2014 by Sergik+

[СергейРусков]

Частично выполнил задание, обсуждение тут.