Chez's Notes

Not only... nasty things

Верстка и программирование сайта NordBox

NordBox

Сайт сделан в составе M18

Административная часть на базе инструментов М18. Клиентская верстка рассчитана на экраны 980, 1220, 1880 пикселей по ширине.

Посмотреть верстку можно здесь

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

Сборка LESS/SCSS(SASS) стилей или js скриптов в один файл

SASS LESSКак я писал ранее, работая в M18 познакомился довольно интересным способом сборки стилей и скриптов.

На первый взгляд он может показаться громоздким и неудобным, но когда привыкаешь - начинаешь чувствовать удобство. Кратко суть способа можно изложить в одном предложении: "less/sass без инклудов, но с толикой БЭМ", и сейчас я поясню, что имеется ввиду.

Компиляция less в один файл на php

LESS

Вдохновившись тем, как устроена компиляция проектов у меня на работе, решил написать свою реализацию "компилятора" less.

В какой-то момент жутко задолбался править css не имеющий четкой структуры и твердо решил, что нужно найти способ использовать препроцессоры.

SASS меня не устроил, а так как большую часть своего времени я пишу на структурно определенном less (на работе), решено было использовать lessphp + css-crush.

Посыл был в том, чтобы по нажатию горячей клавиши в PHPStorm были собраны все файлы css из набора структурированных файлов внутри директории с тем же именем.

То есть $common.less/* собирался в common.css итд. За день мучений с итераторами php был написан вариант, как говорится, "В лоб", который выложен на гитхаб.

Пример, кстати, там же. Так что клонируйте и пробуйте :)

 

Для преобразования фигового css в less можно воспользоваться lessify

 

ArtFuture Design School - cайт школы дизайна "АртФутуре"

На базе Интернет-магазина AfShop, который я упомянул ранее, было решено сделать второй сайт для Школы "АртФутуре".

Как и прежде, делал я его в составе M18, на той же технологической платформе, теми же средствами, но задача стояла несколько другая.

Каталог был упразднен до простых статейно - описательных страниц курсов ( коих в школе несколько видов по срокам и типу участия ).

Карта сайта

 

В новом сайте требовалось Следующее:

Шаринг в соцсети делал не я, мне был дан плагин jQuery, который нужно было только стилизовать.

 

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

 Страница курсаБлогГалерея со слайдеромСтатья со связанными новостями

ArtFuture Design Shop, интернет-магазин дизайнерских вещей, идей и решений

В составе M18 был создан интернет-магазин без корзины с возможностью оплаты через сервис Robokassa.

Моя часть работы над проектом заключалась в связывании бэкенда на базе админки M18 с фронтендом, написанным мной.

Верстка, дизайн были предоставлены мне уже готовыми. Доводка верстки под обновленные задачи происходила по факту.