Rails - Day 1 - The RubyGem Love StoryRails - Day 10 - Testing Rails ControllersRails - Day 13 -ActiveRecord Relationships Part IIRails - Day 15 - Rails Forms Part IIIn the last
post I talked about rails migrations and how schema modifications are made through the rails workflow and how rails takes care of the lowlevel SQL.
After the last
post, we have in theory seeded our ever so simple database thanks to a combination of rake and rails.
We are now going to move onto some UI with an introductory piece on a few of the tools we are going to use to create our views.
I am going to introduce a few exciting things I have discovered in Rails which you might be able to use in a greenfield .NET project. I am going to introduce them and then bring them together with a trivial example. The first owes nothing to rails and is a new craze that is sweeping the design landscape and is that of the CSS Grid Framework
CSS Grid Frameworks
Layout grids are an old concept used in print publishing long before the Web. They are essentially a lattice that divides horizontal and vertical space in consistent units where, text, headlines, images and just about any visible HTML element can be placed.
Below is an example of a grid layout and how we might begin to think about our web pages in a printing style that pre-dates the web. We start to think about anchoring UI elements to specific coordinates of a grid:
As I hope you can see on the image above, we carve up our content into regions and then place html elements within these regions. I will explain later how we can position our elements at these specific coordinates but it is a thrilling concept for a CSS heretic like myself. CSS to me has, until recently, been a matter of thrashing and guess work for most of the time. When I first started to use a CSS framework, it was a complete revelation that I could actually precisely position my html elements anywhere on a page.
After some diligent research, it seemed that
blueprint was the most feature rich and active framework out there. Feature rich by my estimation anyway.
I had been looking into CSS frameworks about the same time as I started getting into rails and I rightly assumed that rails would have grasped this concept and come up with its own unique slant on how to harness this emerging technology.
A little research turned up Chris
Eppstein's Compass gem. This is a very nice meta-framework, which can be used with rails and comes in a nicely packaged gem and also has blueprint support. I excitedly progressed further.
It turned out that compass uses something I had never heard of before named
Sass to provide the power of frameworks like BluePrint. Sass it seems is rarely mentioned in the same breath without the view engine HAML.
I will now offer a brief introduction to HAML, SASS and Compass.
HAML and SASS
These two tools take the verbosity out of HTML and CSS.
HAML - XHTML Abstraction Markup Language uses a variation of the convention over configuration to substantially reduce the amount of text in a view, by using indentation to demarcate blocks. And since div is the most commonly used element, you don't need to type it at all except when there's no ID or class assigned to it. A simple example is
| 03 | .some_class Some free text |
| 11 | .username= user.username |
The above generates the following HTML:
| 01 | <h1>This is the title</h1> |
| 03 | <div class="some_class">Some free text</div> |
| 04 | <div class="someother_class"> |
| 05 | <div class="userclass"> |
| 06 | <div class="username label">Name</div> |
| 07 | <div class="userage label">Age</div> |
| 08 | <div class="username">Bill</div> |
| 09 | <div class="userage">35</div> |
| 10 | <div class="username">Viv</div> |
| 11 | <div class="userage">32</div> |
| 12 | <div class="username">Chris</div> |
| 13 | <div class="userage">28</div> |
offers similar simplification for CSS and adds the use of multiple types of variables, directly as constants and through mixins. Mixins enable you to define reusable groups of CSS attributes and then include them inline. As in HAML, indentation is used to represent content and inclusion.
By content I mean attributes and the corresponding value and inclusion that a selector is effective only when used as a child of the previously specified selector:
| 01 | !heavy = bold // a simple variable |
| 02 | =heavy_label // a mixin |
| 06 | :text-decoration underline |
This SASS gets this CSS:
| 04 | text-decoration: underline |
| 10 | text-decoration: underline} |
Compass
Compass takes the CSS supplied Blueprint and other supported frameworks and transforms them into SASS files; HAML comes with utilities to Convert SASS to CSS, HAML to HTML and vice versa. There are also some other command line utilities, all invoked through the compass executable. For rails projects, compass automatically updates the compiled CSS files whenever you change the SASS.
In this post we have introduced the blueprint CSS framework, HAML, SASS and last but by no means least Compass.
In the next post we will create our first view.
Posts
wowwwww
ReplyDeleteImpressive!!! this software is really amazing!!! mainly because contained old systems that works perfectly.
ReplyDeletenice!!!! super chill
ReplyDeleteInteresting stuff, keep it up. This is an interesting blog post here.... Keep posting such an awesome blog post here.... I would like to thank you for sharing your experience and the time it took to post!
ReplyDelete