supercharged html & css
DESCRIPTION
Charla sobre preprocesadores HTML y CSSTRANSCRIPT
SUPERCHARGED
HTML & CSS
THE BRIGHT
SIDE
THE DARK SIDEJAVAPYTHONRUBYPHPSCALA…REST API
JAVASCRIPT
HTMLCSS
HAMLHTML Abstraction Markup
Languaje
$ gem install haml
$ haml input.haml output.html
HTML
HAML!!! 5 %html %head %title Homepage %body#home %h1 Bienvenidos %p Esto es un párrafo de texto %ul.menu %li Primer elemento %li Segundo elemento
<!DOCTYPE html><html> <head> <title>Homepage</title> </head> <body id=“home”> <h1>Bienvenidos</h1> <p>Esto es un párrafo de texto</p> <ul class='menu'> <li>Primer elemento</li> <li>Segundo elemento</li> </ul> </body></html>
JADENode Template Engine
$ npm install jade
HTML
JADEdoctype html head title Homepage body#home h1 Bienvenidos p Esto es un párrafo de texto ul.menu li Primer elemento li Segundo elemento
<!DOCTYPE html><html> <head> <title>Homepage</title> </head> <body id=“home”> <h1>Bienvenidos</h1> <p>Esto es un párrafo de texto</p> <ul class='menu'> <li>Primer elemento</li> <li>Segundo elemento</li> </ul> </body></html>
header.jade
head title My Site script(src=js/app.js)
footer.jade index.jade
doctype html include head body h1 Bienvenidos p Párrafo ul li Link 1 li Link 2 include footer
footer p Copyright 2013
template inheritance
JAD
E
layout.jade
doctype html head title My Site block script body block content block footer
index.jade about-me.jade
extends layout block script script(src=js/app.js)
block content h1 Bienvenidos p Este es mi sitio
block footer footer p Copyright 2013
block support with extends
JAD
E
extends layout block content h1 Sobre mi p Mi nombre es Max p Vivo en Buenos Aires
block footer footer p Copyright 2013
layout.jade
doctype html head title My Site block script script(src=js/jquery.js) body block content article h1 My Site block footer footer p Copyright 2013
block append / prepend
JAD
E
extends layout block append script script(src=js/app.js)
block prepend content nav ul li.active home.html li about-me.html li archive.html
index.jade
LESSThe Dynamic Stylesheet
Language
$ npm install less
$ lessc style.less style.css
style.less
@color: #FC0;@border-width: 2px;@border-style: solid;
div { border: @border-width @border-style @color; }
variables
LESS
div { border: 2px solid #FC0; }
style.css
style.less
header { color: black; h1 { background-color: gray; color: white; } nav { background-color: blue; color: white; ul { list-style-type: none; } }}
nested rules
LESS
header { color: black; }header h1 { background-color: gray; color: white; }header nav {
background-color: blue;
color: white; }header nav ul {
list-style-type: none; }
style.css
style.less
.bordered { border-top: 1px dotted black;border-bottom: 2px solid
black;}
button { background-color: red; color: white; .bordered;}
mixins
LESS
button { background-color: red; color: white;
border-top: 1px dotted black;border-bottom: 2px solid
black;}
style.css
style.less
.border-radius(@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius:
@radius; }
button { background-color: red; color: white;
.border-radius(4px);}
label { .border-radius(6px); }
parametric mixins
LESS
button { background-color: red; color: white;
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}
label { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
}
style.css
style.less
@page-width: 960px;@aside-width: 200px;@gutter: 10px;@margin: @gutter; @content-width: @page-width – ( @aside-width + (2 * @margin + @gutter )); //630px
.wrapper { width: @page-width;margin: @margin;
article { width: @content-width; float:left;}aside { width: @aside-width; margin-left:@gutter; float:right;}footer { clear:both; margin-top: @gutter; }
}
math
LESS
style.less
@color: red;
button { background-color: @color;&:hover {background-color: darken(@color, 10%);
}
label { color: @color;border: 1px solid @color; background-color: lighten(@color, 30%);
}
built-in functions
LESS
style.less
@import “reset.css”;@import “grid.less”;@import “colors.less”;@import “icons.less”;
header { color: @color; }
article { width: @page-width; }
aside {width: @aside-width; }
i.new { background-image: @icon-new; }
imports
LESS
(content of reset.css)(content of grid.less)(content of colors.less)(content of icons.less)
header { color: black; }
article { width: 960px; }
aside {width: 240px; }
i.new { background-image: new.png; }
style.css
SASSSyntactically Awesome
Stylesheets
$ gem install sass
$ sass --watch style.scss style.css
style.scss
$color: red;@mixin bordered {
border-top: 1px dotted black;border-bottom: 2px solid
black;}
button { color: $color;@include bordered;
}
variables & mixins
SA
SS
button { color: red;
border-top: 1px dotted black;border-bottom: 2px solid
black;}
style.css
style.scss
@mixin font-color($bgc){ @if $bgc == white { color: black;} @else if $bgc == black { color: white;} @else { color: blue;
}}$background: yellow;button {
background-color: $background;@include font-color($background);
}
LESS
conditional if/else
SA
SS
$ gem install compass
$ compass create /path/to/project
style.scss
@import “compass”;
button { @include border-radius(4px); }
label { @include box-shadow(red 2px 2px 10px); }
@include font-face(‘Open Sans’, font-files(“fonts/opensans.ttf”,
“fonts/opensans.otf”)) );
p { font-family: “Open Sans”, Helvetica}
LESS
COMPASS
SA
SS
style.scss
@import “bourbon”;
section { @include clearfix; }
div.logo { @include hide-text; background-image: url(logo.png); }
h1 { font-size: em(12); }
#{$all-text-inputs} { border: 1px solid green; }
LESS
BOURBON
SA
SS
TOOLSdevs just wanna have fun
editor’s choice
Scouthttp://mhs.github.io/scout-app/
Compass.apphttp://compass.handlino.com/
Livereloadhttp://livereload.com/
Less.app http://incident57.com/less
SimpLESShttp://wearekiss.com/simpless Codekit
http://incident57.com/codekit/
thanks ;)max kraszewski
@minimalart