CSS frameworky

Jiří Teršel, 2010

O co jde?

● Framework = abstrakce, někdy konkrétněji knihovna

● CSS frameworky slouží k rychlejšímu a jednoduššímu stylování stránek

● Zkušení tvůrci mají svoje „frameworky“,...?

Úrovně abstrakce

Reset

● Resetuje defaultní nastavení prohlížečů● Výchozí bod● Reset Erica Meyera, YUI Reset, Tripoli Reset,

Tantek Reset, ...● * {margin: 0; padding: 0;}

Reset

Typografie

● Přiřazuje zresetovaným prvkům nový vzhled● Vertikální rytmus● Každý (framework) řeší jinak● Věc názoru● Blueprint typography classes

Alternativní média

● Některé frameworky definují obecná pravidla pro tisk, iphone, ...

● Hartija - Css Print Framework

Layout

● Definice rozvržení stránky● Většinou fixní nebo elastický layout postavený

na gridu● Populární část● WYSIWYG editory, např.

http://constructyourcss.com● Např. třídy cols-xx (šířka dokumentu), span-

xx(š. sloupce), prepend-xx(předsadit prázdné sloupce), append-xx

Vzhled prvků

● Typicky vzhled formulářů● Blueprint CSS● Formy - CSS Form Framework● Free CSS Drop-Down Menu Framework

Ornamenty

● Specializované ikonky, obrázky, tlačítka, ...● Individuální použití● Ikonky odkazů v Blueprint CSS

Zástupci

● Blueprint CSS● YUI CSS● Bluetrip● 960 grid system● Baseline● Tripoli● …co člověk, to framework● ?

Srovnání

● http://www.vzhurudolu.cz/css-frameworks

Blueprint CSS

● Forms, Typography, Grid, Print● Pluginy na tlačítka, taby, atd.● Komprimované verze● Jednoduše zapamatovatelné názvy tříd● Rozšířený, hodně článků, nástrojů, …● Věci jako class="span-15 prepend-1 colborder"

se nemusí líbit každému

YUI CSS

● Od společnosti Yahoo● Část YUI Library (JavaScript, AJAX, Widgety,...)● Lze linkovat přímo z webu Yahoo● I komprimované verze● Reset● Fonts ● Base● http://developer.yahoo.com/yui/grids/builder/

Diagnostic CSS

● Od Erica Meyera na zvýraznění některých prohřešků

1 line CSS Grid Framework

● KISS ad absurdum :-)● .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }

Pro a proti

● Výhody● Design bez tabulek● Rychlejší vývoj● Kompatibilita napříč prohlížeči● Prototypování

● Nevýhody● Flexibilita● Zvětšení kódu● Více http requestů v případě více souborů● Nic moc navíc oproti CSS, proti filozofii CSS

Meta frameworky

● Preprocesory CSS● Rozšíření CSS pomocí Ruby, PHP,...● Dědičnost, proměnné, matematické operátory● Skoro Turingovsky úplný jazyk :-)● Co až přijde CSS 3?● xCSS, CSScaffold, SASS, Less

LESS CSS Framework

● Ruby preprocesor CSS● Proměnné

● Mixins

LESS CSS Framework

● Vnořená pravidla

● Operace