Macdom html preprocesor

Macdom preprocesor
Vladimír Macháček
@8machy

Úvodem
use Machy8MacdomLoadersLoaderLatte;
protected function createTemplate() 
{ 
$template = parent::createTemplate(); 
$macdom = new LoaderLatte($this); 
$template->getLatte()->setLoader($macdom); 
return $template; 
}

Elementy & tagy
<div></div>
 
<input>
div
 
input

Selektory & atributy
<div id="id" class="trida" data-popis="popis"></div>
div id=id class='trida' data-popis="popis"
div #id .trida -popis=popis

Jak je to s textem?
<div> 
<b>Text</b> 
</div>
div <b>Text</b>
div
b Text

“Rychlé” atributy
<a href="nette.org" target="blank">Nette.org</a>
 
<input type="text" placeholder="Uživatelské jméno"> 
a $nette.org $blank Nette.org
 
input $text 3$Uživatelské jméno;

Makra
<meta charset="utf-8">
<script type="text/javascript" src="script.js" async></script>
utf-8
js-async script.js

Replikátor
<nav>
 
<a href="twitter.com" target="blank" class="trida1 trida2 trida3"> 
<i class="icon-twitter"></i> Jsme na Twitteru 
</a>
 
<a href="facebook.com" target="blank" class="trida1 trida2 trida3"> 
<i class="icon-facebook"></i> Najdete nás na Facebooku 
</a>
 
<a href="instagram.com" target="blank" class="trida1 trida2 trida3"> 
<i class="icon-instagram"></i> Prohlédněte si náš Instagram 
</a>
 
</nav>

Replikátor
nav 
@navLink a $[@].com $blank .trida1 .trida2 .trida3 
@ i .icon-[@]
 
navLink [twitter] 
[twitter] Jsme na Twitteru
 
navLink [facebook] 
[facebook] Najdete nás na Facebooku
 
navLink [instagram] 
[instagram] Prohlédněte si náš Instagram

Něco málo k nastavení
• Přidat & odebrat
• Elementy, atributy a makra
• Nekompilované oblasti a elementy
• Změnit
• Rychlé atributy, čím bude odsazen zpracovaný kód, způsob odsazení
• Povolit & zakázat
• Automatické odsazení dokumentu
• Úpravu výsledného kódu dle XHTML
• Komprese zpracovaného kódu
• Uzavírání nepárových tagů lomítkem
• Celý zápis boolean atributů

Challenge
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>Macdom example</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>

Macdom vs Haml
!5
html
head
utf-8
viewport width=device-width
favicon includes/favicon.ico
title Macdom example
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 Macdom example
%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
.
%script{:async => "", :src => "//code.jquery.com/jquery-1.12.0.min.js", :type => "text/javascript"}

Macdom vs Jade
!5
html
head
utf-8
body
nav
[yahoo] Yahoo
[github] Github
doctype html
html
head
meta(charset='utf-8')
meta(content='width=device-width', name='viewport')
link(rel='shortcut icon', href='includes/favicon.ico')
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
| .
script(async='', type='text/javascript', src='//code.jquery.com/jquery-1.12.0.min.js')

Macdom vs Slimdoctype html
html
head
meta charset="utf-8" /
meta content="width=device-width" name="viewport" /
link href="includes/favicon.ico" rel=("shortcut icon") /
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
| .
script async="" src="//code.jquery.com/jquery-1.12.0.min.js" type="text/javascript"
!5
html
head
utf-8
body
nav
[yahoo] Yahoo
[github] Github

Vladimír Macháček
@8machy
Děkuji za pozornost!

Macdom html preprocesor

More Related Content

What's hot

Macdom html preprocesor