Weitere ähnliche Inhalte Mehr von jan_mindmatters (8) 1. HAML und SASS
(und COMPASS)
markup haiku vs.
syntactically awesome stylesheets
Tobias Adam, Jan Krutisch
mindmatters GmbH & Co. KG
Donnerstag, 12. März 2009
4. ?!
(X)HTML Abstraction
Markup Language
Donnerstag, 12. März 2009
6. ERB = HTML = Tag-Suppe
Donnerstag, 12. März 2009
9. <div>
</div>
Donnerstag, 12. März 2009
10. <div>
Re d
und
</div>a n t !
Donnerstag, 12. März 2009
11. ERB = Zu Nachsichtig
Donnerstag, 12. März 2009
12. .e r b
de x
in <%= render :partial => 'head' %>
...
<%= render :partial => 'foot' %>
.e r b
e ad
_h
<body>
.e r b
foo t
_
</body>
Donnerstag, 12. März 2009
15. > gem install haml
> cd rails_app
> haml --rails .
Donnerstag, 12. März 2009
18. %table
%tr
%td Hey there
Donnerstag, 12. März 2009
19. %table
%tr
%td Hey there
Magic!
<table>
<tr>
<td>Hey there</td>
</tr>
</table>
Donnerstag, 12. März 2009
21. %foo/
Magic!
<foo/>
Donnerstag, 12. März 2009
22. Automatisch für:
‣ meta
‣ img
‣ link
‣ script
‣ br
‣ hr
Donnerstag, 12. März 2009
24. %blockquote<
%div
Foo!
Magic!
<blockquote><div>
Foo!
</div></blockquote>
Donnerstag, 12. März 2009
25. %img
%img>
%img
Magic!
<img /><img /><img />
Donnerstag, 12. März 2009
27. %head{ :name => quot;doc_headquot; }
%script{ 'type' => quot;text/quot; + quot;javascriptquot;,
:src => quot;javascripts/script_#{2 + 7}quot; }
Magic!
<head name='doc_head'>
<script src='/docs/rdoc/javascripts/script_9' type='text/javascript'>
</script>
</head>
Donnerstag, 12. März 2009
29. def html_attrs(lang = 'en-US')
{
:xmlns => quot;http://www.w3.org/1999/xhtmlquot;,
'xml:lang' => lang,
:lang => lang
}
end
Donnerstag, 12. März 2009
30. %html{html_attrs('de-de')}
Magic!
<html lang='de-de' xml:lang='de-de'
xmlns='http://www.w3.org/1999/xhtml'>
</html>
Donnerstag, 12. März 2009
32. #eins
.zwei
#drei.vier Hallo!
Magic!
<div id=quot;einsquot;>
<div class=quot;zweiquot;>
<div id=quot;dreiquot; class=quot;vierquot;>Hallo!</div>
</div>
</div>
Donnerstag, 12. März 2009
34. %ul
%li[@book, :foo]
Book
Magic!
<ul>
<li class=quot;foo_bookquot; id=quot;foo_book_1quot;>
Book
</li>
</ul>
Donnerstag, 12. März 2009
39. - [1,2,3].each do |i|
%p= i
Magic!
<p>1</p>
<p>2</p>
<p>3</p>
Donnerstag, 12. März 2009
41. :markdown
Header
======
Hallo, *Welt*
Magic!
<h1>Header</h1>
<p>Hallo, <em>Welt</em>
Donnerstag, 12. März 2009
42. Filter
‣ plain
‣ sass
‣ javascript
‣ textile
‣ escaped
‣ markdown
‣ ruby
‣ maruku
‣ preserve
‣ roll yer own
‣ erb
Donnerstag, 12. März 2009
44. / this is a comment
Magic!
<!-- This is a comment -->
Donnerstag, 12. März 2009
45. /[if IE]
a {:href => 'http://www.getfirefox.com/' }
Get Firefox!
Magic!
<!--[if IE]>
<a href=quot;http://www.getfirefox.com/quot;>
Get Firefox!
</a>
<![endif]-->
Donnerstag, 12. März 2009
46. -# this is a comment
Donnerstag, 12. März 2009
47. -# this is a comment
Magic!
Donnerstag, 12. März 2009
49. classes/Haml.html
atlin.com/docs/rdoc/
http://haml.hamptonc
Donnerstag, 12. März 2009
58. > gem install haml
> cd rails_app
> haml --rails .
Donnerstag, 12. März 2009
62. #main
:color #0f0
:width 300px
p
:color #030
Magic!
#main {
color: #0f0;
width: 300px; }
#main p {
color: #030; }
Donnerstag, 12. März 2009
63. a l te
rna
#main
t i ve
color: #0f0
syn
width: 300px
tax
p
color: #030
Magic!
#main {
color: #0f0;
width: 300px; }
#main p {
color: #030; }
Donnerstag, 12. März 2009
64. (
eventuell besser in situationen mit
migrationshintergrund
)
Donnerstag, 12. März 2009
67. link
color: #0f0
&:hover
color: #0ff
Magic!
a{
color: #0f0; }
a:hover {
color: #0ff; }
Donnerstag, 12. März 2009
69. .box
:border
:top 1px solid black
:bottom 5px solid black
Magic!
.box {
border-top: 1px solid black;
border-bottom: 5px solid black; }
Donnerstag, 12. März 2009
71. !bg_color = #002244
body
:background-color = !bg_color
Magic!
body {
background-color: #002244; }
Donnerstag, 12. März 2009
72. ng!
htu
Ac
!bg_color = #002244
body
:background-color = !bg_color
Magic!
body {
background-color: #002244; }
Donnerstag, 12. März 2009
74. !bg_color = #002244
body
:background-color = !bg_color + #020202
Magic!
body {
background-color: #022446; }
Donnerstag, 12. März 2009
76. =standard-border
:border 1px solid black
:padding 5px
#main
+standard-border
Magic!
#main {
border: 1px solid black;
padding: 5px; }
Donnerstag, 12. März 2009
79. .box{border-top:1px solid
black;border-bottom:5px solid
black}body{background-
color:#002244}#main{color:lime;p-
background-color:lime;p-
color:#000000}#main{border:1px d
s se
solid black;padding:5px} p re
om
:c
Donnerstag, 12. März 2009
84. @for !n from 1 through 15
.grid_#{!n}
+grid-width(!n, 15, 200px)
Donnerstag, 12. März 2009
85. !last = true
@if !last
+last
@else
:margin-right = 20px
Donnerstag, 12. März 2009
88. CSS-Frameworks
‣ Blueprint
‣ YUI-Grids
‣ 960.gs (als Plugin)
‣ YAML (geplant?)
Donnerstag, 12. März 2009
89. COMPASS-Module
‣ Reset
‣ Utilities
‣ Layout
Donnerstag, 12. März 2009
91. > git clone git://github.com/nex3/haml.git
> cd haml
> sudo rake install
> gem sources --add http://gems.github.com/
> sudo gem install chriseppstein-compass
Donnerstag, 12. März 2009
96. header
artist_header logo_header
body
footer
Donnerstag, 12. März 2009
97. !!! Strict
%html{html_attrs('de-de')}
%head
= stylesheet_link_tag 'compiled/screen.css'
/[if IE]
= stylesheet_link_tag 'compiled/ie.css'
%body
.container
#header.span-24
#artist_header.span-6
%h1 Foo
#logo_header.span-18.last
%h2 Bar
#body.span-24
= yield
#footer.span-24
Donnerstag, 12. März 2009
98. !!! Strict
%html{html_attrs('de-de')}
%head
= stylesheet_link_tag 'compiled/screen.css'
/[if IE]
= stylesheet_link_tag 'compiled/ie.css'
%body
#container
#header
#artist_header
%h1 Foo
#logo_header
%h2 Bar
#body
= yield
#footer
Donnerstag, 12. März 2009
99. @import compass/reset.sass
@import blueprint/modules/grid.sass
#container
+container
#header
+column(24, true)
#artist_header
+column(6)
#logo_header
+column(18, true)
#body
+column(24, true)
#footer
+column(24, true)
Donnerstag, 12. März 2009
101. @import compass/reset.sass
@import blueprint/modules/grid.sass
!blueprint_grid_columns = 10
!blueprint_grid_width = 60px
!blueprint_grid_margin = 10px
#container
+container
#header
+column(24, true)
#artist_header
+column(6)
#logo_header
+column(18, true)
#body
+column(24, true)
#footer
+column(24, true)
Donnerstag, 12. März 2009
103. // Clearing floats without extra markup
// Simple Clearing of Floats
// [...]
=clearfix
:overflow auto
:overflow -moz-scrollbars-none
// This makes ie6 get layout
:display inline-block
// and this puts it back to block
&
:display block
discuss.
Donnerstag, 12. März 2009
104. // Hides html text and replaces it with an image.
// If you use this on an inline element, you will
// need to change the display to block or inline-block.
=replace-text( !img, !x = 50%, !y = 50% )
:text-indent -9999em
:overflow hidden
:background
:image= url(!img)
:repeat no-repeat
:position= !x !y
Donnerstag, 12. März 2009
107. COMPASS =
Work in Progress
Donnerstag, 12. März 2009
108. Wird debugging im
Browser schwieriger?
(Ist der Output zu un-dry?)
Donnerstag, 12. März 2009
