Browse: HTML & CSS » Frameworks

The main goal of Easy’s framework is to provide a solid base for all of your front-end projects. This CSS/HTML/JavaScript framework is meant to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques. Easy includes all 3 layers of front-end: structural, presentational and interactive. That makes it the true all-in-one solution for your next front-end project.

Easy is not just a CSS framework designed for building layouts. It includes built-in (JQuery powered) interactive functions and a library of preformatted and precoded CSS/HTML content blocks that you can simply paste into your master template.

Main features include:

  • Rock-solid base HTML structure
  • Predefined basic CSS styles for both screen and print
  • Built-in set of interactive functions (no JavaScript code needed)
  • Library of HTML content blocks that can be easily used and reused
  • Basic file organization and possibility of expanding the library with your own code

Easy is rock-solid, true all-in-one front-end solution that you can easily use as it is or customize to fit your own needs.

CSScaffold is a new type of CSS, built with PHP, that changes the way you write and manage your CSS. It speeds up your development time by doing the hard work for you. Scaffold is different to other CSS frameworks, like Blueprint and 960.gs, but it’s power lies in it’s ability to extend the CSS language. It offers you the possibility to generate the CSS found in other CSS frameworks dynamically, like grid classes to quickly build layouts. The framework uses .htaccess files to automatically pass any CSS file through Scaffold first for processing and caching. You just have to drop the files onto your server (keep the framework in your CSS directory) and you’re ready to go with the CSS you’ve already written.

Features include:

  • Written like CSS (it is not necessary to learn a new language to use it)
  • Usage of constants within the CSS document
  • Use mixins like in SASS and Compass
  • Nest selectors to tidy up your code
  • Optimize, compress and gzip
  • Generate test suites for typography, layouts and form styles
  • Plugin architecture that lets you extend the language the way you want

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 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.

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

Posted on July 14, 2009, Filled under Frameworks,  Bookmark it

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.