Post on 11-Jul-2015
HTML y CSS dietéticos
+
David Grilli@djGrill
Agenda
temas = ['HAML', 'SASS']
temas.each do |tema|print 'Introducción a ', temaprint ‘Contenido estático en ', temaprint ‘Contenido dinámico en ', tema
Introducción a HAML
<h1>Joincic 5</h1>
<p>Texto en latín cuyo significado es unmisterio para algunos de nosotros</p>
<% código ruby %>
Introducción a HAML
> HTML Abstraction Markup Language
> DRY
> Identación
Contenido estático en HAML
%h1 elementos HTML
.clase clases CSS
#id IDs
{:atr} atributos
%h1 Joincic 5
%pTexto en latín cuyo significado es un
misterio para algunos de nosotros
Contenido estático en HAML
!!! Strict%html
%head%body
%h1 Hola, mundo!
Contenido estático en HAML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head></head><body>
<h1>Hola, mundo!</h1></body>
</html>
Contenido estático en HAML
!!! Strict%html
%head%body
%h1 Frutas famosas%div
%ul%li Manzana%li Mora%li Ninja
Contenido estático en HAML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head></head><body>
<h1>Frutas famosas</h1><div>
<ul><li>Manzana</li><li>Mora</li><li>Ninja</li>
</ul></div>
</body></html>
Contenido estático en HAML
!!! Strict%html
%head%body
%h1 Frutas famosas%div.list#lista_1
%ul%li Manzana%li Mora%li Ninja
Contenido estático en HAML
!!! Strict%html
%head%body
%h1 Frutas famosas.list#lista_1
%ul%li Manzana%li Mora%li Ninja
Contenido estático en HAML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head></head><body>
<h1>Frutas famosas</h1><div class="list" id="lista_1">
<ul><li>Manzana</li><li>Mora</li><li>Ninja</li>
</ul></div>
</body></html>
Contenido estático en HAML
!!! Strict%html
%head%body
%h1 Frutas famosas.list#lista_1
%ul%li
%a{:href => "http://apple.com"}Manzana
%li Mora%li Ninja
Contenido estático en HAML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head></head><body>
<h1>Frutas famosas</h1><div class="list" id="lista_1">
<ul><li><a href="http://apple.com">Manzana</a></li><li>Mora</li><li>Ninja</li>
</ul></div>
</body></html>
Contenido estático en HAML
Contenido dinámico en HAML
= out lógica con output
- logic lógica sin output
-#com comentarios
- @clase = "principal"!!! Strict%html
%head%body
%h1 Frutas famosas%ul
%li%a{:href => "http://apple.com", :class => @clase}
Manzana%li Mora%li Ninja
Contenido dinámico en HAML
- @clase = "principal"!!! Strict%html
%head%body
%h1 Frutas famosas%ul
%li%a{:href => "http://apple.com", :class => @clase}
Manzana= @clase
%li Mora%li Ninja
Contenido dinámico en HAML
Introducción a SASS
> Syntactically Awesome StyleSheets
> CSS estático a partir de una plantilla dinámica
> Identación
Contenido estático en SASS
h1 elementos HTML
.clase clases CSS
#id IDs
:atr atributos
bodyh1
:blackground-color #f5f6f7a
:color #444
Contenido estático en SASS
body h1 {blackground-color: #f5f6f7; }
body h1 a {color: #444; }
Contenido estático en SASS
bodyh1
:blackground-color #f5f6f7a.primero
:color #444a #id_1
:color #777
Contenido estático en SASS
body h1 {blackground-color: #f5f6f7; }
body h1 a.primero {color: #444; }
body h1 a #id_1 {color: #777; }
Contenido estático en SASS
Contenido dinámico en SASS
!var variables
+out comportamiento con output
=comp comportamiento sin output
!naranja = #ff7f00body
h1:blackground-color = !naranjaa
:color #444
Contenido dinámico en SASS
body h1 {blackground-color: #ff7f00; }
body h1 a {color: #444; }
Contenido dinámico en SASS
=texto:margin-bottom 0.7em:color #abc
bodyh1
:blackground-color #f5f6f7+texto
Contenido dinámico en SASS
body h1 {blackground-color: #f5f6f7;margin-bottom: 0.7em;color: #abc; }
Contenido dinámico en SASS
http://haml.info
http://sass-lang.com
http://peepcode.com
Más información Contacto
http://twitter.com/djGrill
http://davidgrilli.com
HTML y CSS dietéticos
+
David Grilli@djGrill