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.
Similar to the IE6 situation, when using HTML5/CSS3 in our websites, it is a good idea to offer non-problematic outputs to web users with older/non-standard browsers.
Modernizr is a JavaScript library that uses feature detection techniques to determine whether or not the current browser is capable of CSS3 and HTML5 features like rgba(), border-radius, CSS Transitions & more.
It enables you to write pseudo-IF/ELSE statements in your CSS &, if wanted, it is possible to wirite conditional statements in JavaScript with the help of a "Modernizr JavaScript object" created.
Also, Modernizr adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.
BlueTrip is a CSS framework which aims to combine:
to provide you a sensible set of styles and a common way to build a website so that you can get right to designing.
To see the framework in action, check the demos.
There are various CSS frameworks which offer a grid system, a style reset, basic typography, form styling & more.
But, if you only need a lightweight grid framework to build the skeleton of your website, take a look at the 1Kb CSS Grid.
It supports both fluid grids besides the fixed-width ones and nested rows can be created.
The website of the framework provides a generator to customize the grid & download the CSS easily.
Also, Usability Post has a very detailed introduction to the 1Kb CSS Grid in 3 steps. To dig the details, make sure you check them:
LESS is a Ruby gem which compiles the LESS code to CSS & extends css by adding variables, mixins, operations and nested rules.
It uses the existing CSS syntax. So, it is very easy to convert current CSS files to LESS files & there is almost no learning curve.
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
LESS is well-documented & source can be found here.
HTML entities (character references) which are used to define reserved characters or to express characters that cannot easily be entered with the keyboard are generally hard to remember.
EntityCode is a website that lists HTML entities in an easy-to-find format. Rather than a long list of entities, they are simply grouped like currency, math, direction, etc.
A must-bookmark for every web designer & developer.
Dragon Labs is featuring 3 beautiful CSS / JavaScript effects that you may want to use in your websites. Here they are:
A solution to create rainbow effects by not using any images.
It is accomplished with the help of some JavaScript and CSS magic to apply a two-color gradient to any text. Shadows and highlights can also be applied.
This is a CSS trick, specially used in menus, that fades any other elements when one of the items is hovered.
It is technique to smoothly change colors and create ambient motion. A nice demo is presented here.
P.S. Rainbow & Putterfish are well-described & source files are offered. On the other hand, DragonFish, currently, only comes with the demo.
Controlling layouts with CSS is a big subject these days as after dropping the table support, it is clear that the current capabilities of CSS is not enough to develop complex & flexible layouts with ease.
There is CSS Template Layout Module which offers exciting features but it is in a draft status.
Until we get those new features, there are various solutions that are developed with jQuery to manipulate page layouts for faster & cross-browser results.
Here is a collection of 6 jQuery plugins to manage page layouts easily:
Masonry is like the flip side of CSS floats. Floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. And the result is no vertical gaps between elements of varying height.
The plugin is almost totally managed with CSS rules. It uses jQuery’s outerWidth() and innerWidth() methods to calculate the margins & paddings of elements.
This is a plugin to create desktop-like layouts. It can b used to create any UI look from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms & more.
The library provides three layout algorithms:
border, which lays out components in five different regionsgrid, which lays out components in a user defined gridflex-grid which offers a grid with flexible column and row sizes.
The plugin aims to offer a similar functionality with the CSS Template Layout Module (which is currently in a draft status).
The script simply parses the mentioned CSS rules & displays the content accordingly.
The plugin automatically converts any content into a newspaper-like column format.
A default clumn widt or a static number of columns can be defined & the rest is almost done by itself.
Creating equal height boxes or content holders is mostly a challenge with CSS. The plugin makes this process easy by simply calling a function.
Compass is a stylesheet framework (and not only a collection of classes) for Ruby.
Using Compass, you can still use the other css frameworks -blueprint, yui, 960- that are ported to Sass and they are ready to be used in your ruby-based web application or stand-alone via a simple command-line interface.
The framework comes with a detailed documentation on:
You can also watch the podcast on how Compass works.
Grid System Generator is a website that asks for grid width, number of columns, margin-left/right & creates a fixed grid system with valid xhtml/css.
Besides the CSS framework, a .PNG background file is created as well to help in prototyping and design.
The generator is based on 960.gs & displays already created grids which can be found here.
You can also find instructions on using the generator & links to resources about grid systems.
P.S. Another 960.gs based grid generator can be found here.
