The Fluid Grid System is a CSS framework which combines the principals of the typographic & baseline grid into a resolution-independent one.
It has a comprehensive logic. The classes are mentioned like: six_column section or three column which makes it easier to use & understand.
With the simple layout & use of CSS, the Fluid Grid System degrades well in both older web browsers, scales with text nicely & presents content to screen readers in a logical manner as well.
The framework is also great for rapid prototyping besides final production layouts as designers can quickly design complex layouts.
Compatibility: All Major Browsers
eCSStender is an open source JavaScript library, created by Aaron Gustafson, that helps browsers (including IE6) pay attention to the CSS code you write.
It aims to prevent the usage of browser-specific properties & hacks but make leaner & meaner CSS possible.
eCSStender is an extendible library with its API support & has ready-to-use extensions like CSS3 selectors, @font-face, rotation & more.
How does it work?
-
it loops through the document's stylesheets and begins collecting information
-
parses the rules it understands
-
checks if the parsed rules are supported by the extensions
-
applies the supported rules to the document via JavaScript
Read the rest of this entry »
CSScaffold is a PHP-powered CSS framework which will improve the development time by extending the CSS language.
A great thing about the framework is, "it is written exactly like CSS", so, no need to learn a new syntax.
How it works?
CSScaffold sits in your CSS directory, & uses .htaccess files to automatically pass any CSS file through itself first for processing/caching which all happens in the background.
Some Features:
Like mentioned, CSScaffold improves the language itself. This happens by making the usage of:
- constants
- mixins
- nested Selectors
- expressions
- caching and gzipping
possible.
It has a plugin architecture which makes adding new features possible & easier.
Requirements: PHP 5+
xCSS is a CSS framework that makes developing complex style structures easier within an object-oriented workflow.
Using xCSS can save a lot of development time by:
- using variables
- having a intuitive overview of the overall CSS structure
- re-using existing style cascades
- & more..
xCSS requires PHP 5 to run & can be configured very quickly by inserting few lines to the webpages + the stylesheet.
The framework is lightweight, can seamlessly integrate into any existing workflow & well-documented which lowers the learning curve.
Also, besides minimizing the CSS overhead, it still keeps (X)HTML attributes semantic.
Requirements: PHP 5
Web-kreation is sharing a beautifully-crafted sliding login panel that is very handy to be used in websites with limited spaces.
It has 2 versions:
The panel works by overlapping the content rather than pushing it & can be easily converted to be used for any other functionality (like navigation, search, contact form, etc.)
It is also converted into Wordpress plugins:
P.S. It comes only the HTML-CSS-JavaScript part of the code & doesn’t have an integrated login system. Such a function needs to be adapted while using the code.
Requirements: jQuery or MooTools
Compatibility: All Major Browsers
As the processes in HTML 5 & CSS3 working groups move forward everyday, it is getting much more clear that new standards are not too far.
There are lots of new tutorials, resources being created on HTML 5 / CSS3 including cheat sheets which are very functional helpers for anyone willing to code with these standards.
Although there are (currently) few around, here is a collection of HTML 5 and CSS3 cheat sheets:
P.S. the list will be updated with the new ones once they are created, please feel free to share them.
HTML 5 Cheat Sheets
Read the rest of this entry »
ChocoTemplates is sharing 15 (currently) beautiful & free website templates including rarely-found ones like GUI & portfolio templates.
They are XHTML-CSS templates which are not customized specially for any CMS or blogging software.
Some of them (portfolio templates) come with a built-in slider script & all are free to use under the CC Attribution 3.0 license.
Baseline is a CSS framework, built with typographic standards in mind, that aims to simplify developing a website with a pleasing grid and good typography.
With the help of reset.css & base.css files, Baseline clears the default behavior of your browser & builds a basic typographic layout to start with.
Compared to most other frameworks, Baseline uses the font metrics to line up headlines, paragraphs, form labels and any other major elements rather than regular line-height. And, it is compatible only with the recent web browsers (Safari 3+, FF3+, IE8+..).
The download package includes the full set of CSS files both for development and deployment, a Photoshop base document and a full set of HTML templates and examples.
Requirements: No Requirements
Compatibility: Safari 3, Google Chrome, Firefox 3, Opera 9 & IE 8
Elastic is a simple CSS framework which eases creating elastic, fixed and liquid layouts with any column variations.
Using Elastic is like having a conversation with the code as it uses a declarative language.
It supports "combining classes" which helps creating almost any type of layout. And, it comes with a set of helper classes, to accomplish hard things by pure CSS like: same-height, full-width, and vertical-center.
Another nice feature is: both absolute & relative positioning can be used as no overlfow:hidden & clearfix are used.
Requirements: No Requirements
Compatibility: All Major Browsers
SlickMap CSS is a stylesheet for transforming HTML unordered lists into attractive sitemaps.
The stylesheet can easily fit into most of the websites as it supports up to 3-level navigations.
It also provides a functional visual output by displaying the URLs besides the titles. For a demo of SlickMap CSS, click here.
