NOVÉ TRENDY V HTML A CSSTomáš Majer

Čo poznáte

História

PRIESTOR NA VAŠE OTÁZKY

I have no idea what

I’m doing

Šankiho veta o 3 browsrochČasy, keď niekto používal aj Operu a

považovala sa za browser…

• Žiadna vec nefunguje naraz vo viac ako 2 prehliadačoch.

“shanki”

Prečo je ťažké robiť HTML a CSS

Prečo je ťažké robiť HTML a CSSBordel de merde…

• Rôznosť implementácie v prehliadačoch• Veľa možností, ako spraviť to isté• Je treba myslieť na veľmi veľa veci• Narezať grafiku je “easy”, ale…

Ako teda ďalej?

NovéTechnológie

CSS

LESSThe dynamic stylesheet language

• CSS wrapper• Premenné• Mixiny• Vnorené pravidlá• Funkcie• “Matematika”• “Prekladač” v JS - nodejs

LESS ukážka

@nice-blue: #5B83AD;@light-blue: (@nice-blue + #111); #header { color: @light-blue; }

#header { color: #6c94be; }

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}

#menu a { color: #111; .bordered;}.post a { color: red; .bordered;}

#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black;}.post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black;}

SASSStyle with attitude

• Podporuje všetko čo LESS• Kompaktnejšia syntax

(zrušené zbytočné zátvorky a znaky :-)

• Viac pre “programátorov”• http://sass-lang.com

SASS ukážka

$blue: #3bbfce$margin: 16px

.content-navigation border-color: $blue color: darken($blue, 9%)

.border padding: $margin / 2 margin: $margin / 2 border-color: $blue

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

• CSS Authoring Framework• Reusable patterns• Dokumentácia

• Sprites• CSS3• Typography

http://compass-style.org

NovéTechnológie

HTML

Chces robiť nejakú web app? Stiahni si bootstrap.

Twitter Bootstraphttp://twitter.github.io/bootstrap/

• Grid layout (+ responzívny)• Naštýlované všetky HTML prvky (LESS)• Self explanatory dokumentácia• Všetka háveď, ktorú treba (aj Javascript)– Pejdžre, Dropdowny, Menu, Buttony, Hlášky, Modaly,

Breadcrumbs, Taby, Carousel…– Bonus – Ikonky :-)

Ukážka

ZURB Foundationhttp://foundation.zurb.com/

http://cl.ly/image/0d2S08190U2O

Ak máš grafiku a chceš robiť nejakúweb app, stiahni si Foundation.

ZURB Foundationhttp://foundation.zurb.com/

• Platia tie isté veci ako pri Bootstrap-e• Postavné na SASS• Určené viac pre csskárov – pripravené veci pre

customizáciu• Viacero hotových layoutov• Všetká háveď included…

ZURB Foundationhttp://foundation.zurb.com/

http://cl.ly/image/0d2S08190U2O

Ukážka

Dalšieako huby po daždi…

• Gumby / http://gumbyframework.com/

• Kube / http://imperavi.com/kube/

• Yaml4 / http://www.yaml.de/docs/index.html

• Skeleton / http://www.getskeleton.com/

• …

Nástroje moderného web developera

• Javascript, javascript, javacsript…• Balíčkovacie systémy– npm, composer / Sématické verzionovania

• Git

• Livereload – ak to s CSS niekto myslí vážne

Sématicke verzionovaniehttp://semver.org/

• Verzia X.Y.Z– X = major, zmena public API– Y = New feature– Z = Patches

• 0.Y.Z – development, hocikedy sa môže zmeniť API• Pre-release versions X.Y.Z-aplha, X.Y.Z-rc.1• Ruby gems, npm, php composer, PyPI• .... Viac na webe – odporúčam

IkonkyOne more thing…

• Webfonty s ikonkami– Nekonečné zväčšovanie– Len jedna farba

• Font Awesome - http://fortawesome.github.io/Font-Awesome/

• Glyphicons - http://glyphicons.com/

Záver

• Peknú webovú appku vie spraviť aj sám developer• Veci sa už nerobia v staromódnom HTML a CSS• Balíčkovanie knižníc a závislosti

Ďakujem za pozornosťOtázky