Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Semantic Grid. Layout of the future

1,171 views

Published on

Published in: Design
  • Be the first to comment

Semantic Grid. Layout of the future

  1. 1. Semantic Grid: разметка будущего<br />Краковецкий Александр<br />Software Developer, PhD. <br />Microsoft ASP.NET/IIS MVP, Regional Director<br />@msugvnua<br />
  2. 2. О чем поговорим?<br />LESS: CSS preprocessor<br />Semantic Grid<br />Демо<br />
  3. 3. LESS: the dynamic stylesheet language<br />Основные возможности:<br />Переменные (variables)<br />Функции (functions)<br />Операторы (operations) <br />Миксы(mixins) <br />Вложенные правила (nested rules)<br />
  4. 4. LESS: Variables<br />// LESS <br />@color: #4D926F; <br />#header {color: @color; } <br />h2 { color: @color; } <br />/* Compiled CSS */ <br />#header { color: #4D926F; } <br />h2 { color: #4D926F; }<br />
  5. 5. LESS: Mixins<br />// LESS <br />.rounded-corners (@radius: 5px) <br />{ <br /> border-radius: @radius; <br /> -webkit-border-radius: @radius; <br />} <br />#header { .rounded-corners; } <br />#footer { .rounded-corners(10px); }<br />/* Compiled CSS */ <br />#header { border-radius: 5px; -webkit-border-radius: 5px; } <br />#footer { border-radius: 10px; -webkit-border-radius: 10px; }<br />
  6. 6. LESS: Nested Rules<br />// LESS <br />#header { <br />h1 {font-size: 26px; font-weight: bold; } <br />p { font-size: 12px; <br />a {text-decoration: none; <br />&:hover { border-width: 1px; } <br /> } <br /> } <br />} <br />/* Compiled CSS */ <br />#header h1 { font-size: 26px; font-weight: bold; } <br />#header p { font-size: 12px; } <br />#header p a { text-decoration: none; } <br />#header p a:hover { border-width: 1px; } <br />
  7. 7. LESS: Functions & Operations<br />// LESS <br />@the-border: 1px; <br />@base-color: #111; <br />@red: #842210; <br />#header { <br />color: @base-color * 3; <br /> border-left: @the-border; <br /> border-right: @the-border * 2; <br />}<br />#footer {color: @base-color + #003300; border-color: desaturate(@red, 10%); } <br />/* Compiled CSS */ <br />#header { color: #333; border-left: 1px; border-right: 2px; } <br />#footer { color: #114411; border-color: #7d2717; }<br />
  8. 8. LESS: настройка<br /><link href="styles.less" rel="stylesheet" type="text/less“ /><br /><script src="less.js" type="text/javascript"></script><br />Для .NET разработчиков:<br />CSS Is Less plug-in: http://visualstudiogallery.msdn.microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa9923<br />В IIS нужно добавить “text/less” MIME type!<br />
  9. 9. Semantic Grid<br />@import 'grid.less'; <br />Для фиксированной верстки (по умолчанию длина 960px):<br />@column-width: 60; <br />@gutter-width: 20; <br />@columns: 12; <br />Для гибкой верстки (процентной) нужно использовать переменную total-width:<br />@total-width: 100%; <br />
  10. 10. Semantic Grid: hello, world!<br /><body> <br /><article>Main</article> <br /><section>Sidebar</section> <br /></body><br />@import 'grid.less'; <br />@columns: 12; <br />@column-width: 60; <br />@gutter-width: 20; <br />article { .column(9); } <br />section { .column(3); } <br />
  11. 11. Semantic Grid: fluid layout<br />@import 'grid.less'; <br />@columns: 12; <br />@column-width: 60; <br />@gutter-width: 20; <br />@total-width: 100%; <br />// Switch from pixels to percentages <br />article { .column(9); } <br />section { .column(3); } <br />
  12. 12. Демо<br />
  13. 13. Ссылки<br />http://lesscss.org/<br />http://semantic.gs/<br />http://msug.vn.ua/<br />
  14. 14. Q&A?<br />@msugvnua<br />

×