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