There has been a lot buzz and controversy lately over CSS Frameworks. Arguments are made that they are bloated, use un-semantic code, and many other complaints. This article is not to debate the validity of CSS Frameworks, but a review of one in particular. Emastic!
Emastic CSS Framework
Emastic was created by Vladimir Carrer, a self employed web developer from Italy. The framework is lightweight weighing in at just below 4kb with the compressed version. Along with the download comes a grid system for aligning elements in a neat, well formed structure. (Emastic’s grid system has some problems, but I will discuss them later.) There is something special that Emastic offers to people, though, beyond saving them from writing their own CSS. This framework provides the developer a way to make beautiful elastic layouts using ems! To me this is the most compelling attraction to Emastic.
What is ems?
Most CSS designers out there (including me) use pixels for setting heights, widths, and font-sizes for the elements they are working with. This is all good and fun until you think a little bit about what that means for people who want to enlarge the text to see it better. In our pixel based layouts the text will get bigger but the elements themselves will stay the same pixel height/width.
If you are using ems for layout then you have given a more elastic component to the site. Now when the user enlarges the text on your page, all other elements will enlarge, too. It looks like the page is zooming in and out. If you use Firefox 3, it is similar to using the full page zoom feature.
This is what a site with an elastic layout will look like when you load it into your browser. Now if you think the text is too big or too small you can use the shortcut  + or  - to start resizing the text to a comfortable level. (I believe it’s Shift + and Shift - in Windows.)
When the pages layout is made with ems instead of pixels. This will happen:
Now the whole page looks as though you zoomed out away from it. All the elements are relative to one another!
Emastic makes creating and converting your site to ems very easy with all the prebuilt classes and id’s.
Typography
The style sheet dedicated to the overall typography of each page is pretty straight forward. Arial is used for paragraphs and beautiful Georgia is used for heading and caption text. Now not every page should use these two font-faces. In those cases simply editing the type.css file is easy to do. Locating and changing the font-family properties is no hard task since there are only four instances of the font-family property.Â
Grid Work
Grids have become a popular development tool when making websites. They can be used to make very appealing layouts. Emastic, though, is lacking in the grid department. The framework comes with a grid overlay system but thats about it. The grid offers little room for customization and no vertical line adjustment, only horizontal. In my opinion being able to line up elements vertically is very important. Maybe even more important than horizontally aligning elements.Â
I expect in later version Emastic this problem will be addressed, but I hope that it will be made a priority because just a little grid work can be a great asset to any site.
In Conclusion
Overall I deem Emastic a well thought out and excellent framework for any level of developer. Being that it’s only in beta right now, there is room for improvement. If Vladimir keeps actively developing his framework, he will be sure to see positive feedback and use of his product.Â
To check out Emastic for yourself visit his google hosted site. You can also download the files directly.
This is great, I’ve read about Elastic Layouts and using ems before, but they’re not something I actively use. This framework interests me, because I’m not much of a designer or CSS developer. Emastic sounds like something I could use pretty easily.
Also: you might want to fix something in your post. Each time you wrote “emtastic”. Its actually “emastic”. After reading your post I googled “emtastic” and figured out thats not what it’s called.
@Jeff Wow. I am embarrassed. When I read about Emastic on CSSBeauty it was spelled Emtastic, but I most definitely should have realized.
I have also read about and used ems before but not to the extent that Emastic allows. It is a really great tool for someone who isn’t much of a designer/CSS developer.
Dylan thank you for your beautiful post! You post encourage me to work more on Emastic! I just published Emastic Beta 2. I put more examples, gadgets.css, Vertical Spacing and more …
@Vladimir - Thanks for leaving the comment. It’s great to hear from you. I took a look at the new additions to emastic, and it’s looking great! Keep up the good work!