SUPERCHARGED
HTML &
CSS
JAVA
PYTHON
RUBY
PHP
SCALA
…
REST API
JAVASCRIPT
HTML
CSS
HAML
HTML Abstraction Markup
Languaje
$ gem install haml
$ haml input.haml output.html
!!! 5
%html
%head
%title Homepage
%body#home
%h1 Bienvenidos
%p Esto es un párrafo de texto
%ul.menu
%li Primer elemento
%...
JADE
Node Template Engine
$ npm install jade
doctype
html
head
title Homepage
body#home
h1 Bienvenidos
p Esto es un párrafo de texto
ul.menu
li Primer elemento
li Segu...
header.jade
head
title My Site
script(src=js/app.js)
footer.jade index.jade
doctype
html
include head
body
h1 Bienvenidos
...
layout.jade
doctype
html
head
title My Site
block script
body
block content
block footer
index.jade about-me.jade
extends ...
layout.jade
doctype
html
head
title My Site
block script
script(src=js/jquery.js)
body
block content
article
h1 My Site
bl...
LESS
The 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;
}
var...
style.less
header {
color: black;
h1 {
background-color: gray;
color: white;
}
nav {
background-color: blue;
color: white;...
style.less
.bordered {
border-top: 1px dotted black;
border-bottom: 2px solid black;
}
button {
background-color: red;
col...
style.less
.border-radius(@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
...
style.less
@page-width: 960px;
@aside-width: 200px;
@gutter: 10px;
@margin: @gutter;
@content-width: @page-width – ( @asid...
style.less
@color: red;
button {
background-color: @color;
&:hover {background-color: darken(@color, 10%);
}
label {
color...
style.less
@import “reset.css”;
@import “grid.less”;
@import “colors.less”;
@import “icons.less”;
header { color: @color; ...
SASS
Syntactically 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: ...
style.scss
@mixin font-color($bgc){
@if $bgc == white {
color: black;
} @else if $bgc == black {
color: white;
} @else {
c...
$ 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); }
@in...
style.scss
@import “bourbon”;
section { @include clearfix; }
div.logo { @include hide-text; background-image: url(logo.png...
TOOLS
devs just wanna have fun
Scout
http://mhs.github.io/scout-app/
Compass.app
http://compass.handlino.com/
Livereload
http://livereload.com/
Less.app
...
thanks ;)
max kraszewski
@minimalart
Supercharged HTML & CSS
Supercharged HTML & CSS
Upcoming SlideShare
Loading in...5
×

Supercharged HTML & CSS

561

Published on

Charla sobre preprocesadores HTML y CSS

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
561
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Supercharged HTML & CSS

  1. 1. SUPERCHARGED HTML & CSS
  2. 2. JAVA PYTHON RUBY PHP SCALA … REST API JAVASCRIPT HTML CSS
  3. 3. HAML HTML Abstraction Markup Languaje
  4. 4. $ gem install haml $ haml input.haml output.html
  5. 5. !!! 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>
  6. 6. JADE Node Template Engine
  7. 7. $ npm install jade
  8. 8. doctype 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>
  9. 9. 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 JADE
  10. 10. 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 JADE extends layout block content h1 Sobre mi p Mi nombre es Max p Vivo en Buenos Aires block footer footer p Copyright 2013
  11. 11. 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 JADE 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
  12. 12. LESS The Dynamic Stylesheet Language
  13. 13. $ npm install less $ lessc style.less style.css
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. SASS Syntactically Awesome Stylesheets
  22. 22. $ gem install sass $ sass --watch style.scss style.css
  23. 23. style.scss $color: red; @mixin bordered { border-top: 1px dotted black; border-bottom: 2px solid black; } button { color: $color; @include bordered; } variables & mixins SASS button { color: red; border-top: 1px dotted black; border-bottom: 2px solid black; } style.css
  24. 24. 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 SASS
  25. 25. $ gem install compass $ compass create /path/to/project
  26. 26. 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 SASS
  27. 27. 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 SASS
  28. 28. TOOLS devs just wanna have fun
  29. 29. Scout http://mhs.github.io/scout-app/ Compass.app http://compass.handlino.com/ Livereload http://livereload.com/ Less.app http://incident57.com/less SimpLESS http://wearekiss.com/simpless Codekit http://incident57.com/codekit/
  30. 30. thanks ;) max kraszewski @minimalart
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×