Reader
You are here: Home / Archives for HTML & CSS / Frameworks

xCSS: A Lightweight Open Source Object Oriented CSS Framework

Last updated on by Gabriel Livan

xCSS is an open source lightweight framework that bases on CSS to empower a straight forward and object-oriented workflow when developing complex styles cascades. This framework is very useful to cut out development time by: having an intuitive overview of the overall CSS structure, using variables, re-using style existing cascades, nesting selector declarations, extending objects and many other handy features. xCSS seemly integrated into any existing workflow. An advantage is that the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.

xCSS-Object-Oriented-CSS-Framework

xCSS compiles on the fly (your natural CSS workflow remains the same) and it easily configurable (you can setup the file hierarchy and miscellaneous output settings in one single xCSS config file).

Baseline CSS Framework: A “Real” Baseline Grid on the Web

Last updated on by Gabriel Livan

Baseline is a free to use CSS (Designer) Framework useful to easily develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the default browser behavior. It builds a basic typographic layout (includes style for HTML forms & new HTML 5 elements) and a simple grid system. A nice feature of this designer framework is the fact that is uses the font metrics to line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout.

baseline-css-framework

Baseline can be used in many different ways. Use the reset.css and base.css file as a starting point, include the type.css for typographic control or include all files to have a complete foundation to start your web project.

Speed up the development process: Blueprint CSS Framework

Last updated on by Gabriel Livan

Blueprint is a CSS framework which aims to cut down on your development time by giving you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins and even a stylesheet for printing. Since Blueprint CSS Framework is very used among developers, you can find a lot of tutorials, plugins, tools and resources that are made to make your development process easier.

What are the advantages of using Blueprint?

  • A CSS reset that eliminates the discrepancies across browsers.
  • A solid grid that can support the most complex of layouts.
  • Typography based on expert principles that predate the web.
  • Form styles for great looking user interfaces.
  • Print styles for making any webpage ready for paper.
  • Plugins for buttons, tabs and sprites.
  • Tools, editors, and templates for every step in your workflow.

Develop Layouts Faster: Elastic CSS Framework

Last updated on by Gabriel Livan

elastic-css

Elastic CSS is a simple framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited columns combinations. It also has the capacity to make elastic, fixed and liquid layout easily.

Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code.

The framework has alot of classes and helpers that will aid in the process of web design. The documentation page of the Elastic CSS provides all the tools for you to start experimenting and trying all kinds of things you can imagine.