From 645233dce9b4d97f1958dbb08b18551b9bfe906d Mon Sep 17 00:00:00 2001 From: Simon Neveu Date: Wed, 8 Oct 2014 09:38:07 +0100 Subject: Init haml md --- haml.html.markdown | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 haml.html.markdown (limited to 'haml.html.markdown') diff --git a/haml.html.markdown b/haml.html.markdown new file mode 100644 index 00000000..cde76eee --- /dev/null +++ b/haml.html.markdown @@ -0,0 +1,8 @@ +--- +language: haml +filename: learnhaml.haml +contributors: + - ["Simon Neveu", "https://github.com/sneveu"] +--- + +HAML is a \ No newline at end of file -- cgit v1.2.3 From 269d717224db16057d8c0f20084df533d8dc45dd Mon Sep 17 00:00:00 2001 From: Simon Neveu Date: Wed, 8 Oct 2014 23:18:30 +0100 Subject: added comments, tags, classes, and attributes --- haml.html.markdown | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) (limited to 'haml.html.markdown') diff --git a/haml.html.markdown b/haml.html.markdown index cde76eee..124f160b 100644 --- a/haml.html.markdown +++ b/haml.html.markdown @@ -5,4 +5,66 @@ contributors: - ["Simon Neveu", "https://github.com/sneveu"] --- -HAML is a \ No newline at end of file +Haml is a markup language predominantly used with Ruby that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. It encourages well-written markup. + +Haml aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is markup that is well-structured, DRY, logical, and easier to read. + +```haml +/ ------------------------------------------- +/ Comments +/ ------------------------------------------- + +/ This is what a comment looks like haml + +/ + To write a multi line comment, indent your commented code to be + wrapped by the forward slash + +-# This is a silent comment, which means it wont be rendered into the doc at all + + +/ ------------------------------------------- +/ Html elements +/ ------------------------------------------- + +/ To write your tags, use the percent sign followed by the name of the tag +%body + %header + %nav + +/ Notice no closing tags. The above code would output + + +

+ +

+ + +/ Divs are the default elements so they can be written simply like this +.foo + +/ To add content to a tag, nest it +%h1 Headline copy + +/ + To output a ruby value as the contents of the tag, use an equals sign followed + by the ruby code + +%h1= author.name + +/ Classes can be added to your tags either by chaining .classnames to the tag +%div.foo.bar + +/ or as part of a ruby hash +%div{:class => 'foo bar'} + +/ Attributes for any tag can be added in the hash +%a{:href => '#', :class => 'bar', :title => 'Bar'} + +/ For boolean attributes assign the value 'true' +%input{:selected => true} + +/ To write data-attributes, use the :data key with it's value as another hash +%div{:data => {:attribute => 'foo'}} + + -- cgit v1.2.3 From f6a604e1551233cb2f9b6a2c2c723f0acdc84f50 Mon Sep 17 00:00:00 2001 From: Simon Neveu Date: Wed, 8 Oct 2014 23:25:21 +0100 Subject: Copy change to intro and formatting --- haml.html.markdown | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'haml.html.markdown') diff --git a/haml.html.markdown b/haml.html.markdown index 124f160b..60dc5426 100644 --- a/haml.html.markdown +++ b/haml.html.markdown @@ -1,13 +1,17 @@ --- language: haml -filename: learnhaml.haml +filename: learnhaml.html.haml contributors: - ["Simon Neveu", "https://github.com/sneveu"] --- -Haml is a markup language predominantly used with Ruby that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. It encourages well-written markup. +Haml is a markup language predominantly used with Ruby that cleanly +and simply describes the HTML of any web document without the use of +inline code. -Haml aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is markup that is well-structured, DRY, logical, and easier to read. +It aims to reduce repetition in your markup by closing tags for you +based on the structure of the indents in your code. The result is +markup that is well-structured, DRY, logical, and easier to read. ```haml / ------------------------------------------- -- cgit v1.2.3 From 46f174fab100f31659f3141a9aeca137035e34b3 Mon Sep 17 00:00:00 2001 From: Simon Neveu Date: Wed, 8 Oct 2014 23:32:22 +0100 Subject: testing git config --- haml.html.markdown | 1 + 1 file changed, 1 insertion(+) (limited to 'haml.html.markdown') diff --git a/haml.html.markdown b/haml.html.markdown index 60dc5426..9cde462e 100644 --- a/haml.html.markdown +++ b/haml.html.markdown @@ -13,6 +13,7 @@ It aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is markup that is well-structured, DRY, logical, and easier to read. + ```haml / ------------------------------------------- / Comments -- cgit v1.2.3 From d1ef1771ad5448c3c004f1aec3e8b836df3cb96e Mon Sep 17 00:00:00 2001 From: Simon Neveu Date: Thu, 9 Oct 2014 23:13:37 +0100 Subject: Added filters, ruby interpolation and additional resources --- haml.html.markdown | 82 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 74 insertions(+), 8 deletions(-) (limited to 'haml.html.markdown') diff --git a/haml.html.markdown b/haml.html.markdown index 9cde462e..47da2aee 100644 --- a/haml.html.markdown +++ b/haml.html.markdown @@ -7,7 +7,8 @@ contributors: Haml is a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of -inline code. +inline code. It is a popular alternative to using rails templating +language (.erb) and allows you to embed ruby code into your markup. It aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is @@ -19,7 +20,7 @@ markup that is well-structured, DRY, logical, and easier to read. / Comments / ------------------------------------------- -/ This is what a comment looks like haml +/ This is what a comment looks like haml. / To write a multi line comment, indent your commented code to be @@ -38,7 +39,6 @@ markup that is well-structured, DRY, logical, and easier to read. %nav / Notice no closing tags. The above code would output -

@@ -48,14 +48,25 @@ markup that is well-structured, DRY, logical, and easier to read. / Divs are the default elements so they can be written simply like this .foo -/ To add content to a tag, nest it +/ To add content to a tag, add the text directly after the declaration %h1 Headline copy -/ - To output a ruby value as the contents of the tag, use an equals sign followed - by the ruby code +/ To write multiline content, nest it instead +%p + This is a lot of content that we could probably split onto two + separate lines. + +/ You can escape html by using the ampersand and equals sign ( &= ) +%p + &= "Yes & yes" + +/ which would output 'Yes & yes' -%h1= author.name +/ You can unescape html by using the bang and equals sign ( != ) +%p + != "This is how you write a paragraph tag

" + +/ which would output 'This is how you write a paragraph tag

' / Classes can be added to your tags either by chaining .classnames to the tag %div.foo.bar @@ -73,3 +84,58 @@ markup that is well-structured, DRY, logical, and easier to read. %div{:data => {:attribute => 'foo'}} +/ ------------------------------------------- +/ Inserting Ruby +/ ------------------------------------------- + +/ + To output a ruby value as the contents of a tag, use an equals sign followed + by the ruby code + +%h1= book.name + +%p + = book.author + = book.publisher + + +/ To run some ruby code without rendering it to the html, use a hyphen instead +- books = ['book one', 'book 2', 'book 3'] + +/ Allowing you to do all sorts of awesome, like ruby blocks +- books.shuffle.each_with_index do |book, index| + %h1= book + + if book do + %p This is a book + +/ + Again, no need to add the closing tags to the block, even for the ruby. + Indentation will take care of that for you. + + +/ ------------------------------------------- +/ Inline Ruby / Ruby interpolation +/ ------------------------------------------- + +/ Include a ruby variable in a line of plain text using #{} +%p Your highest scoring game is #{best_game} + + +/ ------------------------------------------- +/ Filters +/ ------------------------------------------- + +/ + Use the colon to define haml filters, one example of a filter you can + use is :javascript, which can be used for writing inline js + + :javascript + console.log('This is inline