Usage of CSS frameworks in slicing pages?

When slicing the PSD into HTML over at Artmov there will be a lot of common lines of codes that you need to write over and over again. A CSS framework will really cut down on development time and there’s a basic and solid foundation for typograhy, grid-based and printing stylesheet.

Counting CSS frameworks available: 14

Maybe the number of CSS frameworks available is much higer; but some might be limited, some might be in development – I’ve taken into counting only the most that appears mentioned on blogs.

Blueprint, YUI Grids, YAML, Elastic CSS, 960 Grid System, Emastic, snowdust, Elements, xCSS, CleverCSS, logiCSS, Tripoli, Baseline, BlueTrip

Criticism on frameworks

Although I’ve tested only two or three CSS frameworks so far: Blueprint, YAML – I didn’t had the flexibility I wanted in those frameworks. I’ve admit that a framework will save a lot of time when slicing pages (especially those that are generally the same in structure), but I needed to put some time to learning in coding and how the classes are structured and how to use them.

But I have a different style on writing IDs and Classes in CSS. As mentioned here a document is in development to create a CSS framework and a coding/naming convention for flexibility and fast development in slicing pages – a more suitable approach for Artmov.

I’ve already taken a step in making every stylesheet written to be very readable my non-tech people, but still keep it very organized and small in size. Also, a coding and naming convention in CSS stylesheets, file naming and HTML IDs and Classes is the perfect approach since I wanted to keep a maintainable code.

Taking a different step in CSS frameworking

As guessed, I’ve already taken a different step in developing a CSS framework that’s suitable for Artmov. Keypoints:

• More meaningful written code classes and IDs
• More readable and organized
• Better maintainability
• Separated the reset stylesheet, conditional stylesheets, printing stylesheet
  • class.css – Includes the reset code by Eric Meyer and framework classes;
  • style.css – General stylesheet for webpages;
  • style-ie.css – Only for IE7 and IE6 (make uses of * and _ hack);
  • print.css – Printing stylesheet;
  • mobile.css – Stylesheet for handhelds only.

So far, the above structure has been apart of organization of a sliced webpage, for several weeks. I’ve have to admit that this is a work-in-process framework, but eventually it will become the Artmov’s general framework – the framework that will be used on every webpage sliced here.

Conclusion

There is a lot to work on developing a CSS framework that is best suitable for you. The best choice is to try at least two or three frameworks before stopping using them or picking just one, without knowing the others.

Some are very complex, some are very light; some might need more time to discover and learn, some might be very simple in structure.

Related links

[1] The Blueprint CSS Framework – Tutorials, How-to Guides and Tools
[2] Blueprint. A CSS Framework.
[3] I Design Websites Faster Than You: Rapid Stylesheets with Blueprint CSS
[4] Top 12 CSS Frameworks and How to Understand Them
[5] List of CSS Frameworks
[6] 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started
[6] Overview: Emastic CSS Framework
[7] Overview: YUI 2: Grids CSS
[8] 10 Promising CSS Framework That Worth A Look
[9] Frameworks for Designers