Skip to content

Latest commit

 

History

History
executable file
·
58 lines (42 loc) · 2.73 KB

README.md

File metadata and controls

executable file
·
58 lines (42 loc) · 2.73 KB
Raw

Haml Starter Kit

Ever wanted to use excellent HAML syntax on any project even the small one? Me too, so I made one! HAML is intended for 'elegant' markup, eliminating the reptetive tags of HTML. I like to use Haml because it eliminates superfluous markup including closing tag. View code is much easier to read. What's in the package are basic responsive website template with HAML, Bourbon and Neat.

About the language

Here's an example of HAML markup looks like before compiling to HTML markup.

Just class

HAML

.tupperware Hello, World!

HTML

<div class='tupperware'>Hello, World!</div>

Another example with class and ID

HAML

%h2.headline#myID This is a headline
%p This is a paragraph.
%ul
	%li List item one
	%li List item two
	%li List item three
%p Another paragraph can go here.

HTML

<h2 class='headline' id='myID'>This is a headline</h2>
<p>This is a paragraph.</p>
<ul>
	<li>List item one</li>
	<li>List item two</li>
	<li>List item three</li>
</ul>
<p>Another paragraph can go here.</p>

Docs

  • index.haml contains all stuffs including CDN modernizr that compiled to index.html.
  • scss folder includes bourbon, neat and custom folders (normalize, etc.) that compiled to css folder.
  • favicons.psd HTML5 boilerplate favicon photoshop template

How to use it

The HAML reference is the most complete documentation for HAML. It contains information on every language feature is a great place to start if you aren't familiar with the language. It goes over the basic syntax for elements, etc.

If you're already familiar with compilers like CodeKit or Koala then you're on the right track. If not, check them out. To complie haml file, select the index.haml file and set the output path to index.html in the same directory. To compile scss file, select the scss/base.scss file and set the output path to css/base.css. I used favicons.psd to update the favicon only once. Pretty nifty, eh?

Credits

  • Bourbon - a simple and lightweight mixin library for Sass
  • Neat - a lightweight semantic grid framework for Sass and Bourbon
  • Favicon PSD - by Hans Christian
  • Sublime Text - awesome web editor
  • Mou - the missing Markdown editor for web developers

License

Haml Starter Kit is released under a Creative Commons Attribution-Share Alike 3.0 Unported License. This means you can copy, distribute, transmit and adapt the work to your own personal and commercial projects.