Supercharged HTML & CSS
•Download as PPTX, PDF•
2 likes•1,513 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Supercharged HTML & CSS
Similar to Supercharged HTML & CSS (20)
More from Max Kraszewski
Recently uploaded
Recently uploaded (20)
Supercharged HTML & CSS
- 6. $ gem install haml $ haml input.haml output.html
- 7. !!! 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>
- 9. $ npm install jade
- 10. 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>
- 11. 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
- 12. 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
- 13. 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
- 15. $ npm install less $ 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: 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
- 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
- 24. $ gem install sass $ 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 install compass $ 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 wanna have fun