Supercharged HTML & CSS

1,067 views

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
1,067
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
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

×