Downloaded 14 times
Uploaded byMax Kraszewski
Supercharged HTML & CSS
The document describes several templating languages and preprocessors for HTML, CSS, and front-end development including Haml, Jade, LESS, SASS, and Bourbon. It provides code examples to demonstrate features like variables, nesting, mixins, imports and more. These tools can be used to make HTML, CSS, and template files more concise, reusable and maintainable.
More Related Content
Supercharged HTML & CSS
- 1.
- 2.
- 5.
- 6. $ gem installhaml $ haml input.haml output.html
- 7. !!! 5 %html %head %title Homepage %body#home %h1Bienvenidos %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>
- 8.
- 9. $ npm installjade
- 10. doctype html head title Homepage body#home h1 Bienvenidos pEsto 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>
- 11. header.jade head title My Site script(src=js/app.js) footer.jadeindex.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
- 12. layout.jade doctype html head title My Site blockscript 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
- 13. layout.jade doctype html head title My Site blockscript 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
- 14.
- 15. $ npm installless $ lessc style.less style.css
- 16. 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
- 17. 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
- 18. style.less .bordered { border-top: 1pxdotted 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
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23.
- 24. $ gem installsass $ sass --watch style.scss style.css
- 25. 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
- 26. 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
- 27. $ gem installcompass $ compass create /path/to/project
- 28. 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
- 29. 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
- 30. TOOLS devs just wannahave fun
- 31.
- 32.