Chez's Notes

Not only... nasty things

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

NordBox

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

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

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

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

Landing page для RBI

Работа выполнена ориентировочно в феврале 2014 в составе M18.
Сверстал по макету все за 1.5 рабочих дня.
Изображения предоставил дизайнер. 3D-панорамы предоставил заказчик.
Посмотреть можно http://rbi.m18.ru/panorama/ или http://view.rbi.ru/

Скриншот Скриншот Скриншот

Сборка 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