Filed September 30th, 2010 under
CSS,
ResourcesMost, if not all, of my projects begin in a simple text editor. And that’s not likely to change any time soon – unless someone develops a serious web design application. That said, a lot of my tasks rely upon the rather monotonaous referencing of W3C specifications, and laborious testing.
Thankfully, the design community has produced some fantastic CSS tools to make our jobs easier. From on-the-fly typography comparison, to entire layout frameworks, there’s a tool for just about everything you can imagine with CSS. In this post, I cover some of the most essential: from golden oldies, to the latest and greatest.
Typography
Typechart
Courtesy of Panduka Senaka, Typechart is my favourite amongst a host of typography apps. Although it’s limited to web safe fonts, it’s a great tool for rapidly comparing font styles.
Typetester
Typetester is functionally the same as Typechart. With it, you can quickly compare different font styles amongst the web safe fonts – and then grab the raw CSS of whatever you’ve tested.
typeface.js
Of the many font embedding solutions, typeface.js is one of the easiest – especially if being cross-platform is absolutely necessary. Of course, Typekit is definitely easy, and cheap – but it relies upon @font-face. For older browsers (say pre-Safari 2.1 and pre-Firefox 3.5), it’s just not an option. So if you absolutely need real fonts, but also want to make sure your project is broadly cross-compatible with older browsers, typeface.js is worth a shot.
CSS Typeset
The last of the typography tools on the list, CSS Typeset is the minimalist counterpart to the two font style editors mentioned above. In fact, the thumbnail below is a screen capture of the entire site. Enter example text on the left, play with the controls on the bottom, and the raw CSS appears on the right. Just about as easy as it can be.
Frameworks
960s.gs
If you haven’t worked with a CSS grid framework before, 960.gs is the place to start. With such widespread acclaim, there’s not much else to say about 960.gs. It’s used by 5by5 Media, Twitter, WooThemes, and a host of freelancers, design agencies, and web professionals. And the grid overlay bookmark is seriously cool.
Blueprint
If I had to give a rough estimate of usage of these frameworks, Blueprint would come a close second to 960.gs. Again, it’s a platform that’s been widely praised for its intuitive modularity, strong documentation, and broad community support (it even has plugins for things like sprites).
YUI CSS Grids
Like every part of the YUI framework, Yahoo’s CSS Grids module is beautifully polished, with excellent documentation. Its CDN hosted stylesheet offers a fast, responsive, and cache-friendly grid framework.
css-boilerplate
Although it’s a bit old (it was released in 2007 – which, as we all know, is the equivalent of 20 internet years ago), it’s still a great resource. css-boilerplate basically gives you a blank slate for your web development projects. Its default settings include a reset stylesheet, IE specific styles, forms styles, and typography. Here’s a teaser snippet from the form styles:
form.hform p { margin: 0 0 .5em; }
form.hform p label { float: left; width: 100px; }
form.hform p input { width: 200px; }
form.hform p select { width: 200px; }
form.hform p input.button { width: auto; }
form.hform p input.checkbox { width: auto; }
form.hform p input.radio { width: auto; }
form.hform p.checkbox { margin-left: 100px; }
form.hform p.checkbox label { float: none; }
form.hform p.checkbox input { width: auto; }
52Framework
52Framework bills itself as the first ever HTML5 & CSS3 framework. It’s basically a mux of boilerplate meets grid system. There’s an HTML5-ready starting document, along with pre-coded CSS using a few of CSS3′s awesome features including the ::selection selector, rounded corners, text-shadows, and more. I’m not sure how much traction this will get within the community – particularly given the strength of HTML5 Boilerplate – but this is a CSS tools list, so we’ll save that discussion for later.
Variable Grid System
Inspired by 960.gs, the Variable Grid System is an easy-to-use tool that allows to create, well, varying grid systems. You input column width, number of columns, and the gutter width – and VGS outputs ready-to-go CSS. It’s really an incredibly useful tool.
Elastic CSS
Elastic CSS is a semantically-sensitive CSS framework. Classes are named intelligently and intuitively, and it provides a nice blend between some of the more full-blown boilerplates, and the more low-key grid systems.
BlueTrip
Like Elastic CSS, BlueTrip focuses on common sense naming conventions, ease of use, and, well, just plain getting out of your way. This demo page shows off all of its bells and whistles.
Formatting
ProCSSor
This simply beautiful app turns your ugly stylesheets, into poetic pieces of art. It’s simple, intuitive, and works really, really well. First, you paste in some CSS (or upload a file/paste a link to a stylesheet), then you set some optional parameters, and ProCSSor spits out your work in perfectly formatted code. It’s awesome.
Code Beautifier
Code Beautifier does essentially the same thing as ProCSSor. Input a stylesheet, define some parameters, and out pops some gorgeous looking code.
CSS Compressor from CSS Drive
After aesthetics, the other quintessential CSS formatting problem is a very simple one: size. With a large enough deployment (or sloppy enough coding), every extra kb can start to feel sluggish. With so many CSS compressors out there – all with essentially the same feature set – I feel like I can only justifiably include two. CSS Compresspor from CSS Drive is the first. With three levels of compression, CSS Drive’s tool can do everything from a casual tidy-ing up to full fledged illegibility.
CSS Compressor from Sevenforty
With perhaps the shortest instructions of any tool on this list, CSS Compressor for Sevenforty is lightweight and fast – just like the stylesheets it gives you: “Simply browse your system for the CSS file you wish to shrink down, select your line break option and hit Compress.”
Miscellaneous
0to255
0to255 is a new take on an old problem: sorting through hex values for the perfect colour. With a downright beautiful design, it’s hard not to love it.
LESS
A cousin to the venerable SASS, LESS is a Ruby-based CSS compiler. Basically, you write your stylesheets like normal – but you can do things like use variables, mixins, and nested rules (like any scripting language). LESS takes this quasi-stylesheet, and compiles it into ready-to-go CSS. It’s an amazing time saver for large scale development.
Modernizr
Ok, so Modernizr isn’t strictly a CSS tool. But it enables you to detect CSS3 support when a user visits your site. It doesn’t add any functionality, but it allows you to selectively control certain features – so that everything works as intended.
ecsstender
Unlike Modernizr, ecsstender actually does add functionality to older browsers. You choose from a number of extensions (including CSS3 transform, transition, font-face, etc), and then ecsstender determines whether or not the user’s browser supports a given function. If it doesn’t, it outputs browser-specific functionality pertaining to that function using JavaScript.
Did we forget something?
Did we forget to mention your favorite tool? The one that you absolutely, positively cannot live without? Let us know in the comments!
Filed September 8th, 2010 under
CSS,
ResourcesW hat’s the value in returning to a CSS trend from 2 years ago? Well, most descriptions, guides, and round ups of CSS reset styles are outdated. Not to mention that the advent of HTML5 makes revisiting reset styles particularly worthwhile.
I’ll be covering 6 tried-and-true methods, 2 newer minified approaches, and finally a new HTML5 CSS reset style. Of course, I owe a great debt to Jeff Starr of Perishable Press for his 2007 post A Killer Collection of Global CSS Reset Styles. Several of the early methods stem from his post.
Ultra Minimalist CSS Reset
Description: It’s pretty obvious isn’t it? The only trouble with the Ultra Minimalist CSS Reset is that it can degrade performance on large sites, given that its use of the universal selector.
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
Condensed Universal CSS Reset
Description: Using the Ultra Minimalist CSS Reset as a base, we add typographic resets to several of the font tags as well as to the vertical-align tag. Like the Ultra Minimalist CSS Reset, however, it can degrade performance on large sites. So unless you’re dealing with a micro implementation, it’s best to stay away from universal selectors.
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
Siolon’s Global CSS Reset
Description: Building on the Condesenced Universal CSS Reset, Siolon’s solution extends the reset styles to include other typical tags such as h1 through h6, p, table, and li. He assigns base-level margin attributes to many of structural selectors, making his solution a solid base for further development. Technically speaking, these changes aren’t germane to a reset stylesheet, but their relatively innocuous and fairly standard. Again, the use of the universal selector can be problematic in large cases so be wary of applying this to big projects.
Permalink: http://www.siolon.com/blog/browser-reset-css/
/*
Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.
By: Chris Poteet & various influences
*/
* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
YUI 2: Reset
Description: For a long time, Yahoo’s YUI Reset has been a go-to reset file for web developers. It avoids the issues posed by the universal selector entirely, and gives a truly blank slate to build upon. The YUI 2 framework launched in February 2006 – and it encompasses both JavaScript and CSS libraries. Of course, Yahoo offers CDN hosting for the stylesheet so you can take advantage of caching goodness.
Yahoo also offers a Base CSS stylesheet (which applies a consistent style foundation for common HTML elements) and a Fonts CSS stylsheet (which offers offers cross-browser typographical normalization and control).
Permalink: http://developer.yahoo.com/yui/reset/
CDN hosted:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
Full style sheet:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
YUI 3: Reset
Description: In 2009, Yahoo launched YUI 3. The framework contains an updated version of the reset stylesheet. Its biggest feature addition is the ability to reset elements either globally or contextually. If you only want to reset a single div tag, you load the contextual version of CSS Reset, and include .yui3-cssreset as a classname.
Permalink: http://developer.yahoo.com/yui/3/cssreset/
CDN hosted:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-context-min.css">
Full style sheet (comments redacted):
html{
color:#000;
background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
li {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
font-variant:normal;
}
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
input, textarea, select {
*font-size:100%;
}
legend {
color:#000;
}
Eric Meyer’s Reset CSS
Description: Eric Meyer’s bit of code is one of he most used CSS reset style in the web developer community. Originally released in 2007, it’s become a go-to reference. It is, however, far reaching. Nearly every single HTML element is reset in this stylesheet – something to keep in mind during development. But if you’re looking for the ultimate reset, this is probably it.
Permalink: http://meyerweb.com/eric/tools/css/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Simple Reset
Description: Recently, attempts to minify the reset stylesheet have been made. Russ Weakley’s Simple Reset is one such attempt. It’s fairly robust and fast-loading, making it a nice middle ground between the minimalist styles and Eric Meyer’s.
Permalink: http://www.maxdesign.com.au/articles/css-reset/
html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
table
{
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}
input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}
CSS Mini Reset
Description: Authored by Vladimir Carrer, CSS Mini Reset is another bare-bones, but robust approach to CSS reset stylesheets. Inspired by Eric Meyer and Russ Weakley, Carrer composed his minified reset by focusing on “the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.”
Permalink: http://www.vcarrer.com/2010/05/css-mini-reset.html
html, body, div, form, fieldset, legend, label
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
th, td
{
text-align: left;
vertical-align: top;
}
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }
img { border: 0; }
HTML5 Reset
Description: With HTML5 introducing a host of new elements, it’s no surprise that an HTML5-specific CSS reset stylesheet would exist. Released in late July of 2010 by Richard Clark, this thing is piping hot. Clark removed the deprecated elements commonly found in the older reset stylesheet, while adding in HTML5′s new elements. In August the reset stylesheet was wrapped into this lovely package: HTML5 Reset (appropriately written in HTML5). The project is active, so if you use this in a development environment, watch for updates.
Permalink: http://code.google.com/p/html5resetcss/
/*
html5doctor.com Reset Stylesheet
v1.6
Last Updated: 2010-08-18
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted inherit;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
