Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Xhtml & Css’ Category

Cabin is a CSS framework which comes with a lightweight core and can be extended easily once needed.

The core CSS file includes the styles that are needed by the majority of the websites: reset, typography and navigation.

Styles for grids (12 or 16, fixed and fluid), tables, forms, media queries or social media messages are all provided as extensions.

And, Cabin is compatible with all major browsers (by leaving IE6 in the past).

Cabin CSS Framework

SimpleGrid is a uncomplicated CSS grid framework that focuses on keeping things simple with using little markup and classes as much possible.

Using the grid system, each item loads in parallel to their order in the code and there is no need to use any .first or .last classes.

It is ready for serving responsive layouts and whatever the size of a user's browser, it'll fit perfectly with no horizontal scrollbars.

There is also support for infinite nesting and they don't require any extra mark up as well.

SimpleGrid

The Semantic Grid System is a fresh approach to CSS grids which allows us to define column-gutter widths, choose the number of columns and switch between pixels and percentages. And all these without the -kinda ugly- .grid_x classes used in the markup

It is built by Tyler Tate, the developer of the popular 1KB Grid and powered by Less.js (the dynamic stylesheet language).

The Semantic Grid System

The grid system is responsive as well and manipulating it using media queries is very easy.

There is also a detailed introduction of Semantic.gs in Smashing Magazine that is written by the developer himself.

Twitter Bootstrap is a toolkit created by Twitter for kickstarting CSS when developing websites.

It is built with Less and consists of base CSS + HTML for typography, forms, buttons, tables, grids, navigation, and some more.

The grid provided is 940px wide 16-column and, for the layouts, there are solutions for both fixed + fluid ones.

Twitter Bootstrap

Twitter Bootstrap's HTML elements have a plain-yet-elegant style where form inputs get a nice box-shadow on focus or table rows being highlighted.

The kit also includes other stuff like popovers, alerts, tabs and pagination which all use semantic XHTML.

It is actually built with Preboot, an open-source pack of mixins and variables to be used with Less and, for anyone willing to use it with Less rather than the static CSS, a detailed how-to is provided.

Golden Grid System is a fluid-width grid system which functions as a starting point for building responsive websites.

It splits the screen into 18 even columns where two of them are used as outer margins, leaving 16 columns for use in design. And, they can be converted (or folded) into 8 columns or 4 columns.

The folding process is accomplished by media queries and enables the website to serve good-looking pages to screens from 240 to 2560 pixels.

Golden Grid System

Normally, responsive grids using gutters proportional to the screen can display the content like "it's being squeezed" once the screen width changes. Golden Grid System has elastic gutters which always stay in proportion to the content.

The resource also has handy little script named Golden Gridlet, which helps overlaying the grid and a baseline grid of 1.5em onto the page for visually checking that everything lines up properly.

P.S. It is built by the developer of the popular Less Framework.

Jeffrey Way of Nettuts+ has recently created a simple-yet-useful web application named Prefixr that can auto-insert cross-browser prefixes for a given CSS file.

Once a CSS file is pasted into the application, it scans all the rules and adds browser-specific ones when applicable. Simply, writing only border-radius will end up in getting -moz-border-radius, -webkit-border-radius, etc.

Best of all, the web interface is not the only way to use it. With the help of an API, it can be integrated into your code editor and can be ran with a shortcut (a how-to exists on Nettuts+).

Prefixr

theexpressiveweb.com is a beautiful resource and showcase on CSS3 and HTML5 features.

It is brought by Adobe and currently shares 12 features including the ones like CSS3 animations, media queries, web fonts, HTML5 audio, canvas and web storage.

The website is pretty interactive and comes with many impressive demos that are built by Adobe or other websites.

theexpressiveweb

For each property, the browsers that support it are displayed and, for non-compatible browsers, any possible fallback strategies are discussed.

Also, the official announcement of the project includes an informative "Lessons Learned" part which is a very nice read.

P.S. 2 Adobe-related posts in a row. What are the odds? : )

HTML5 canvas brings a huge flexibility in drawing graphics in web pages but it is sometimes complicated to work with.

CanvasText is a JavaScript library that handles using and styling text in canvas with a syntax similar to HTML & CSS.

The usage is pretty easy with a readable function and, currently, the supported properties include fontFamily, fontSize, fontWeight, fontColor and lineHeight. More properties and a caching system is mentioned to be under development

CanvasText

Although the features supported by browsers are becoming more common, there are still many differences between them.

In order to find out the capabilities of the browser you use, Haz.io offers an effortless solution.

Haz.io

Using Modernizr in the backend, it detects which HTML5 and CSS3 are supported, shows the result in a nice interface and links to the related W3C or WHATWG page for each property.

Haz.io is an open source project where you can get the source and update/improve it

Resources on creating CSS3 buttons that looked stylish was shared previously at WRD.

CSS3 Buttonize Framework is a new addition to this list which comes with styles for creating buttons in various sizes.

Icons can be used inside the items and there are ready-to-use classes for building disabled, striped or highlighted buttons and a panel/horizontal navigation.

CSS3 Buttonize Framework

Uptime Robot
Loading...
Get WebResourcesDepot Weekly
A Weekly Newsletter For Web Designers And Developers
feed-holder
FeedBurner
  • file uploading, video/audio/image encoding, s3 storage and much more
  • PSD to HTML
  • PSD to HTML
    aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter