jiří teršel, 2010 - fi.muni.czxobsivac/pv219/prezentace10/css.frameworky.pdftypografie...
TRANSCRIPT
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“,...?
Reset
● Resetuje defaultní nastavení prohlížečů● Výchozí bod● Reset Erica Meyera, YUI Reset, Tripoli Reset,
Tantek Reset, ...● * {margin: 0; padding: 0;}
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● ?
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/
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