Your SlideShare is downloading. ×
0
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

LESS and even more. Anton Shubkin.

215

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
215
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LESS and even more!
  • 2. LESS and even more!
  • 3. Код стилей:● Понятный● Гибкий● Разбит на файлы небольшогоразмера
  • 4. SMACSSScalable and Modular Architecture for CSSby Jonathan Snook
  • 5. Категории стилей1. Base2. Layout3. Module4. State5. Theme
  • 6. 1. Basehtml, body {...}input[type=text] {...}a {...}a:hover {...}p > span {...}span + span {...}- reset.css
  • 7. 2. Layout#header, #footer {...}#sidebar-first, #sidebar-second {...}#content {...}.l-fixed #sidebar-first { width: 200px; }.l-fluid #sidebar-first { width: 20%; }
  • 8. 3. Module.menu {border: 1px solid #ccc;}.menu > h2 {padding: 5px;}.menu li {padding: 5px;}.menu {border: 1px solid #ccc;}.menu-header {padding: 5px;}.menu-item {padding: 5px;}
  • 9. Sub-modules.menu {border: 1px solid #ccc;}.menu-item {padding: 5px;}.menu-horizontal .menu-item {display: inline-block;}
  • 10. 4. State#header.is-sticky {position: fixed;top: 0;}.menu.is-collapsed > h2 {text-decoration: underline;}
  • 11. Изменение состояния● класс● псевдо-класс● media query● атрибут.menu.is-collapsed {...}a:hover {...}@media screen and (max-width: 400px) {...}.button[data-state=pressed] {...}
  • 12. 5. Theme/* in module-name.css */.mod {border: 1px solid;}/* in theme.css */.mod {border-color: blue;}/* in theme.css */.theme-border {border-color: purple;}.theme-background {background: linear-gradient( ... );}
  • 13. ● используйте классы● избегайте селекторов сидентификаторами● избегайте селекторов по элементам● избегайте большой вложенности вселекторах● используйте префиксы в классах
  • 14. Структура файлов● выносите базовые стили в отдельный файл● в зависимости от типов layout-ов, выносите их вотдельный файл или каждый основной тип в отдельныйфайл● выносите каждый модуль в отдельный файл● в зависимости от размера проекта, выносите подмодулив отдельные файлы● выносите глобальные состояния в отдельный файл● выносите layout-ы и состояния, относящиеся к модулю, втом числе media queries, в файл модуля
  • 15. Sass
  • 16. Переменные$fontSize: 16px;$lineHeight: normal;$fontColor: #000;.element {font-size: $fontSize;line-height: $lineHeight;color: $fontColor;}$black: #000;$fontColor: $black;.element {color: $fontColor;}.scss.element {font-size: 16px;line-height: normal;color: black;}.element {color: black;}.css
  • 17. Переменные$borderWidth: 1px;$borderStyle: solid;$borderColor: #ccc;$border: $borderWidth $borderStyle $borderColor;.element-1 {border: $border;}.element-2 {border: $borderWidth $borderStyle $borderColor;}.element-1 {border: 1px solid #cccccc;}.element-2 {border: 1px solid #cccccc;}.scss .css
  • 18. Вложенные правила.menu {a {color: #0000cc;&:hover {text-decoration: underline;}&.active {color: #cc0000;}}}.scss.menu a {color: #0000cc;}.menu a:hover {text-decoration: underline;}.menu a.active {color: #cc0000;}.css
  • 19. Миксины (Mixins)@mixin link {color: #0000cc;&:hover {text-decoration: underline;}}a {@include link;}.scssa {color: #0000cc;}a:hover {text-decoration: underline;}.css
  • 20. Миксины@mixin border-radius($radius) {-moz-border-radius: $radius;-webkit-border-radius: $radius;border-radius: $radius;}.rounded {@include border-radius(5px);}.scss.rounded {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}.css
  • 21. Миксины@mixin fixed-size($width: 100px, $height: 100px) {width: $width;height: $height;}.box-1 {@include fixed-size;}.box-2 {@include fixed-size(150px, 200px);}.scss.box-1 {width: 100px;height: 100px;}.box-2 {width: 150px;height: 200px;}.css
  • 22. Расширения.error {border: 1px #f00;background-color: #fdd;}.error.intrusion {background-image: url("/image/hacked.png");}.seriousError {@extend .error;border-width: 3px;}.scss.error, .seriousError {border: 1px #f00;background-color: #fdd;}.error.intrusion, .intrusion.seriousError {background-image: url("/image/hacked.png");}.seriousError {border-width: 3px;}.css
  • 23. Расширенияa:hover {text-decoration: underline;}.hoverlink {@extend a:hover;}.scssa:hover, .hoverlink {text-decoration: underline;}.css
  • 24. Математическиевыражения и функции$baseFontSize: 16px;$color: #999;$elementOuterWidth: 300px;$elementLeftRightPadding: 20px;.element {padding: 0 $elementLeftRightPadding;width: $elementOuterWidth -$elementLeftRightPadding * 2;font-size: $baseFontSize + 2;color: $color + #000033;}.title {font-size: $baseFontSize * 1.5;}.scss.element {padding: 0 20px;width: 260px;font-size: 18px;color: #9999cc;}.title {font-size: 24px;}.css
  • 25. Математическиевыражения и функции$colNumber: 3;.col {width: floor(100% / $colNumber);}.col.last {width: 100% - floor(100% / $colNumber) *($colNumber - 1);}$contentWidth: 960px;$colPaddingLeftRight: 20px;.another-col {width: floor(($contentWidth / $colNumber) - 2 *$colPaddingLeftRight);}.scss.col {width: 33%;}.col.last {width: 34%;}.another-col {width: 280px;}.css
  • 26. Функции работы сцветами$linkColor: #0000ff;$buttonColor: #b83000;a {color: $linkColor;&:hover {color: lighten($linkColor, 10%);}}.button {background-color: $buttonColor;&:hover {background-color: darken($buttonColor, 10%);}}.scssa {color: blue;}a:hover {color: #3333ff;}.button {background-color: #b83000;}.button:hover {background-color: #852300;}.css
  • 27. Директива @import.element-1 {display: block;float: left;}element-1.scss.element-1 {display: block;float: left;}.element-2 {display: inline-block;border: 1px solid #999;}main.css.element-2 {display: inline-block;border: 1px solid #999;}element-2.scss@import "element-1.scss";@import "element-2";main.scss
  • 28. + Zen Grids
  • 29. Omega(7.x-4.x)
  • 30. /* main.scss */@import"variables","mixins","base/import","layout/import","components/import";
  • 31. Полезные ссылкиgoogle.com
  • 32. Полезные ссылки● CSS coding standards https://drupal.org/node/1886770● SMACSS http://smacss.com/● Sass http://sass-lang.com/● Compass http://compass-style.org/● Zen https://drupal.org/project/zen● Omega https://drupal.org/project/omega● AdaptiveTheme https://drupal.org/project/adaptivetheme
  • 33. Спасибо завнимание!

×