Html preprocessors challenge
•
0 gostou•656 visualizações
Comparison of the Macdom, Slim, Jade and Haml preprocessor on one example. How simple the way of writing html can be if you use one of them.
Recomendados
Recomendados
Mais conteúdo relacionado
Último
Último (20)
Destaque
Destaque (20)
Html preprocessors challenge
- 2. Macdom vs Haml vs Jade vs Slim <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta content="width=device-width" name="viewport"/> <link rel="shortcut icon" href="includes/favicon.ico"/> <title>HTML preprocessors challenge!</title> </head> <body> <h1 id="title" class="titles main-title">Hello world</h1> <nav> <a target="blank" href="http://www.google.com" class="first-link">Link on - Google</a> <a target="blank" href="http://www.yahoo.com">Link on - Yahoo</a> <a target="blank" href="http://www.github.com">Link on - Github</a> </nav> <div id="wrapper"> Some text <b>here</b>. </div> <script async="" type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script> </body> </html>
- 3. Macdom vs Haml !5 html head utf-8 viewport width=device-width favicon includes/favicon.ico title HTML preprocessors challenge! body h1 #title .titles .main-title Hello world nav @ a $http://www.[@].com $blank Link on - [google] .first-link Google [yahoo] Yahoo [github] Github div #wrapper Some text <b>here</b>. js-async //code.jquery.com/jquery-1.12.0.min.js !!! %html %head %meta{:charset => "utf-8"} %meta{:content => "width=device-width", :name => "viewport"} %link{:href => "includes/favicon.ico", :rel => "shortcut icon"} %title HTML preprocessors challenge! %body %h1#title.titles.main-title Hello world %nav %a.first-link{:href => "http://www.google.com", :target => "blank"} Link on - Google %a{:href => "http://www.yahoo.com", :target => "blank"} Link on - Yahoo %a{:href => "http://www.github.com", :target => "blank"} Link on - Github #wrapper Some text <b>here</b>. %script{:async => "", :src => "//code.jquery.com/jquery-1.12.0.min.js", :type => "text/javascript"}
- 4. Macdom vs Jade !5 html head utf-8 viewport width=device-width favicon includes/favicon.ico title HTML preprocessors challenge! body h1 #title .titles .main-title Hello world nav @ a $http://www.[@].com $blank Link on - [google] .first-link Google [yahoo] Yahoo [github] Github div #wrapper Some text <b>here</b>. js-async //code.jquery.com/jquery-1.12.0.min.js doctype html html head meta(charset='utf-8') meta(content='width=device-width', name='viewport') link(rel='shortcut icon', href='includes/favicon.ico') title HTML preprocessors challenge! body h1#title.titles.main-title Hello world nav a.first-link(target='blank', href='http://www.google.com') Link on - Google a(target='blank', href='http://www.yahoo.com') Link on - Yahoo a(target='blank', href='http://www.github.com') Link on - Github #wrapper Some text <b>here</b>. script(async='', type='text/javascript', src='//code.jquery.com/jquery-1.12.0.min.js')
- 5. Macdom vs Slim doctype html html head meta charset="utf-8" meta content="width=device-width" name="viewport" link href="includes/favicon.ico" rel="shortcut icon" title HTML preprocessors challenge! body h1#title.titles.main-title Hello world nav a.first-link href="http://www.google.com" target="blank" Link on - Google a href="http://www.yahoo.com" target="blank" Link on - Yahoo a href="http://www.github.com" target="blank" Link on - Github #wrapper Some text <b>here</b>. script async="" src="//code.jquery.com/jquery-1.12.0.min.js" type="text/javascript" !5 html head utf-8 viewport width=device-width favicon includes/favicon.ico title HTML preprocessors challenge! body h1 #title .titles .main-title Hello world nav @ a $http://www.[@].com $blank Link on - [google] .first-link Google [yahoo] Yahoo [github] Github div #wrapper Some text <b>here</b>. js-async //code.jquery.com/jquery-1.12.0.min.js
- 6. Where to find them • Macdom - https://github.com/Machy8/Macdom • Slim - http://slim-lang.com/ • Jade - http://jade-lang.com/ • Haml - http://haml.info/