Распределенные системы хранения данных, особенности реализации DHT в проекте Elliptics network
Илья Андриенко: Вёрстка в проекте глазами ...
-
Upload
oleg-poludnenko -
Category
Technology
-
view
252 -
download
2
description
Transcript of Илья Андриенко: Вёрстка в проекте глазами ...
Верстка в проекте глазами “неверстальщика”
Андриенко Илья, DataArt
“I am wondering, why are you here? Hmm?”
Основная цель этого доклада:Предотвратить возможную катастрофу в будущем
CSS-препроцессоры
Популярны в среде фреймворков
.. и многие другие
• Родом из 2009 года.
• CSS => LESS => CSS
• Написан на JavaScript (NodeJS)
Переменные как возможность повторяться
@background_color: #ffffff;@foreground_color: #000000;
.content{ background: @background_color; color: @foreground_color;}
.footer{ background: @foreground_color; color: @background_color;}
.content { background: #ffffff; color: #000000;}.footer { background: #000000; color: #ffffff;}
Примеси как возможность не повторяться
.get_rid_of_text(){ text-indent: -9999px; white-space: nowrap; overflow: hidden;}
.logo_header{ width: 200px; height: 50px; background: url("logo.png") no-repeat; .get_rid_of_text();}
.logo_footer{ width: 75px; height: 50px; background: url("logo-foot.png") no-repeat; .get_rid_of_text();}
.logo_header { width: 200px; height: 50px; background: url("logo.png") no-repeat; text-indent: -9999px; white-space: nowrap; overflow: hidden;}
.logo_footer { width: 75px; height: 50px; background: url("logo-foot.png") no-repeat; text-indent: -9999px; white-space: nowrap; overflow: hidden;}
Вложенность или возможность писать стройные таблицы
.parent{ background:#ff0; .child{ background: #0f0; }}
.parent{ background: #ff0;}
.parent .child { background: #0f0;}
Включения – коллективная работа
@import "style";@import "layout";
/* Layout */.content{ width: 80%; margin: auto;}
.footer{ height: 200px;}
/* Styles */.content{ color:#ff0; background: #000;}
.footer{ background: #000; color:#f00;}
/* Styles */.content{ color: #ff0; background: #000;}.footer{ background: #000; color: #f00;}
/* Layout */.content{ width: 80%; margin: auto;}.footer{ height: 200px;}
Проблема:
не вся команда готова использовать,а правки в верстку вносить приходится всем
(не дёргать же верстальщика по мелочам)
Хорошая верстка(с препроцессором)
CSS-результат
Глазами фронтендщика
Глазами бекендщика
Большой уродливый CSS-файл
Глазами бекендщика
Большой уродливый CSS-файлМаленькие правки
Большой уродливый CSS-файл(с правками)
Хорошая верстка(с препроцессором)
CSS-результат
Глазами фронтендщика
Большой уродливый CSS-файл(с правками)
Мелкие правки бекендщика затёрли.
Причины
•Тяжело настраивать
•Страх дебага
•Лень собирать
Настройка и установка
Особенно актуальна эта проблема для пользователей Windows.
Люди не хотят ставить Node или Ruby только для работы с версткой
Решения проблемы
• Курить маны и ставить
• Скачать велосипед (их десятки)
• Портативная версия компилятора Например, http://tinyurl.com/tools-css
Проблема с дебагом:
Трудно понять, откуда взялась та или иная строка.
..решение: source maps
• Вотчеры в IDE.
• Родные вотчеры процессоров
• Планировщики задач
(сборка на сервере)
Спасение от лени
Резюмируя:
• Можно добавить в вёрстку программистскую логику
• Можно не пользоваться и толком, но быть готовы должны все
• Попробуйте! Это не больно :P (http://tinyurl.com/tools-css)
Всем спасибо!
http://tinyurl.com/pugdnepr
ilia.andrienko
Контакты автора
Имеет смысл вступить: