Free themes for Twitter Bootstrap

I was helping Laura (a developer who works with me) learn about cross-browser debugging this week, which got me excited to share my process.

The first principal is simply:

Work with CSS, not against it.

CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs. I learned CSS by reading the W3C specifications, which is why I began coding according to the language’s design, but however you learned it, you can pick up some of the key points involved.

The first thing I do is code to a good browser from the start. Our choice is Google Chrome, mainly because of the superior developer tools. When I have something working in Chrome and I am satisfied with it, I take a look at it in either Safari or Firefox.

If there is a discrepancy between these good browsers, chances are you are working against CSS. Do not try to hack around discrepancies between good browsers. Your goal is to figure out *why* it is being interpreted differently. Usually there is a very good reason.

A neat way of aligning the columns in tables up with each other -- a table grid system of sorts.
Apply these classes to `<col>` elements in a `<table>`’s `<colgroup>`.
Always leave one `<col>` without a class so that it remains fluid and can ‘soak up’ the effects of any breakages elsewhere in the table.

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Flat Icons & Icon Fonts

There are many such roundups. This one is mine.

Icon Fonts... are awesome. They typically come with standard vectors as well if you prefer working with them that way, but these icon projects go the extra mile in offering an @font-face compatible font for web use.

Normalize vs Reset
It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.

Normalize.css preserves useful defaults

Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements.

When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.

Normalize.css corrects common bugs

It fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements, correcting font-size for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.

One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand.

Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.

Anyway, I have a recommendation for your CSS going forward:

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.

Adjust the iframe’s height with JavaScript

By using the following piece of JavaScript you can adjust the height of the iframe element to match the height of its content:

Pears are common patterns of markup & style.

Pears is an open source WordPress theme. I'll admit the code
is a bit rough, initially based on the default 'twentyone' theme.

I wanted a handy way of collecting HTML & CSS pattern pairs.
Often used modules with a minimal of style applied. It's become
a valuable learning tool, whereby breaking interfaces down into
small pieces make it easier to learn and improve running code.

Learn more and see it in action here:
http://pea.rs

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

After a bit of trial and error it turned out that if an image has a max-width specified through CSS, a width attribute in the HTML, and is the child of a floated element that has no explicit width set, IE8 makes its width zero. I’m not sure if this behaviour is correct, but it sure doesn’t seem intuitive. If this happened with images that did not have a width attribute it would be slightly more logical to me. And it seems to happen only in IE8 (and only in standards mode).

Similar to the way developers use programming languages to generate valid HTML, Sass and its first cousin, Compass, combine to provide a powerful toolbox for generating valid CSS. It’s a win-win: developers can now use features like variables to write faster and more easily maintained code and the resulting CSS will work in browsers exactly as before. What’s not to love?

Well, this is the Internet and some people don’t love it. Rather than write another overview of the most advertised features of Sass, I thought I’d address a few of its critics and provide some tips for those still unsure about using it.

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that's just the first paragraph.

I haven’t done serious web work — HTML web work, that is — since I last worked on Manila 10 years ago.

I’ve done some small things — the system that generates this blog, for instance — but I haven’t had the chance to use almost any of the newer web technology. I’ve never written a Rails app, used JQuery, or deployed to a virtual server.

So when I had the chance to re-do the websites for our company and main product, I was excited — because it meant I could try some of the new technologies and learn some things.

I’ve been recently working on optimizing performance of a so-called one-page web app. The application was highly dynamic, interactive, and was heavily stuffed with new CSS3 goodness. I’m not talking just border-radius and gradients. It was a full stack of shadows, gradients, transforms, sprinkled with transitions, smooth half-transparent colors, clever pseudo-element -based CSS tricks, and experimental CSS features.

Aside from looking into bottlenecks on Javascript/DOM side, I decided to step into the CSS land. I wanted to see the kind of impact these nice UI elements have on performance. The old version of the app — the one without all the fluff — was much snappier, even though the JS logic behind it hasn’t changed all that drastically. I could see by scrolling and animations that things are just not as quick as they should be.

Was styling to blame?

Fortunately, just few days before, Opera folks came out with an experimental “style profiler” (followed by WebKit’s ticket+patch shortly after). The profiler was meant to reveal the performance of CSS selector matching, document reflow, repaint, and even document and css parsing times.

Aren't you just bored with all those slides-based presentations?
Don't you think that presentations given in modern browsers shouldn't copy the limits of 'classic' slide decks?
Would you like to impress your audience with stunning visualization of your talk?
then you should try
impress.js*

Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site.

From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experienced front-end engineers have offered their suggestions on how we can improve the user experience by means of some performance best practices.

Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas.

In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.

Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.

The ‘tiny screen first’ boilerplate extension*

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

Welcome to the home of the 978 and counterpart grid systems.

Earlier this year I gave a talk (slides) outlining the latest and greatest in mobile performance, including a bit of my own unscientific research into carrier latency and bandwidth thanks to boomerang.js.
I realized that interest in mobile performance has exploded recently, especially with Steve Souders announcing his focus on mobile, and I thought it was time for an update, this time in blog form. Also, my old slides have been somewhat embarrassing. For some strange reason, at the time I wanted to give S5 a try – that outdated, ancient, not-performant slideshow framework. The result is a slideshow on performance that loads slowly… doh! (incidentally, I recommend deck.js as an alternative).
In any case, it was time for a roundup of mobile performance best practices, in blog form. I’m not sure if it’s properly called a manifesto, but it is what it is! Onward!

This article shows examples of how to embed video and other iframes in a responsive web design and has examples with YouTube, Vimeo and Slideshare.
I found a neat little CSS trick on the A List Apart article “Creating Intrinsic Ratios for Video” and I did some experimenting with it. (Yes, I had to look up the word Intrinsic…)
The problem with embed code that you copy from websites like YouTube is that they often contain a fixed width and height in pixels. And that does not work too well in responsive designs. In a responsive design we have a container with a relative width and we want the embedded object to be relative to our container. This is not possible with all embeds as some of them insist on having a fixed width. If you encounter such embeds, the workaround is probably to move some of the code to the server side or javascript and set the width to the pixel value that you think is most appropriate. It will work, but it will not be flexible like the method shown here.
This technique is fully flexible and I have tests below with Vimeo, SlideShare and YouTube (sorry if this post took long to load…). Here are the steps to make it work.

This is a list of best practices for creating websites that do not break when browsers are updated. It's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. This is especially important for intranet applications and other non-public websites where problems are likely to not be noticed during testing by browser vendors.

Description

At The Future of Web Design I presented Sass and Compass. These were my slides yo.

An explanation of the CSS animation on Apple's iPhone 4S webpage

The "phone stage" (blue-bordered box) contains all 6 "slides" of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier curve). For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At the end of the cycle, the phone stage's transition duration is temporarily set to 0ms while slide 6 resets to slide 1.

This demo only works in recent versions of safari, chrome, firefox, and opera. In the real version, the caption for each slide animates separately and the site degrades well in older browsers.

What does LiveReload do?

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

A Pinboard redesign built off of the styles started by Josh Pigford, I’m providing a bare stylesheet which works with StyleBot on Chrome and User CSS on Safari. The Chrome version can be installed straight from Stylebot​.me. Stylebot​.me also has a userscript version which could be used with Greasemonkey, but my styles don’t seem to translate well to Firefox, yet. I’ll work on that when I have time.

Here’s the raw stylesheet if you want to grab it and use it in User CSS or somewhere else: pinboard.css. I’m not going to tell you it’s bulletproof, but feel free to send in obvious bugs. Also feel free to pick it up and run with it, just link the “credit chain” back and make sure to show us what you did!

css border transitions

Today, I’d like to show you a neat trick. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

If you are anything like me, then as a designer you are also probably a bit of a curmudgeon, though perhaps you consider it perfectionism – and justifiably so. You have honed a specific workflow you adhere to because that is what works, dang it. Woe unto anyone who suggests you are not doing things in the best possible way, right? Yes, exactly! Except, well… no.

I believe my first reaction to Wynn Netherland, when he told me I ought to try Sass and that perhaps I would see a boost in productivity, was something along the lines of: “Bah, get off my lawn” — a reference to the cantankerous character played by Clint Eastwood in Gran Torino.

I came to realize that his suggestion was not a subtle way of saying “I know something you don’t know” (though he did), but more of a friendly nudge towards greater efficiency. He was just being a good neighbor, so to speak.

So, I am writing this post in an attempt to get designers out there (who are also already CSS savvy) to try Sass and Compass. I aim for this to be the article I wish I had read when I was first contemplating Sass but (at the time) did not consider it worthwhile. I could not have been more wrong.

When designing/developing a new application we all have our own way of doing things, using frameworks, grid systems, saved code snippets etc..., but what we usually have in common is the fact that we end up repeating lots of tasks for each project.

Workless aims to help you by offering a basic HTML5 base template filled with goodies to get you up and running on every project you do as quickly as possible.

At it's core Workless is simply a mashup of all the things I like about HTML5 Boilerplate and Twitter Bootstrap with some additional stuff which I tend to use on every project such as PrettyPhoto for lightboxes, Tipsy for tooltips, Prettify for styling and colorizing code and various other bits and pieces.

Workless comes with responsive media queries setup for 'Mobile Portrait', 'Mobile Landscape', 'Tablet Portrait', 'Tablet Landscape/Small Browser' and 'Large Browser', you can demo the effect right now by simply scaling your browser window. The blue button above the logo will show what query is running.

Remember, this isn't a 'Use this, its great!', it's simply a way I found to improve my workflow and cut down on repetitive tasks in every project. Feel free to use/abuse and hack into something that fits your workflow.

No images, no external CSS
No dependencies
Highly configurable
Resolution independent
Works in all major browsers, including IE6
Smaller than an animated GIF (3K minified, 1.7K gzipped)
MIT License

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!

In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections.

Nicholas Zakas and I spoke at Velocity a few minutes ago. First we talked about CSS 3 and it’s impact on performance, then we demoed and open sourced CSS Lint! I really couldn’t be more excited (or relieved, I was super duper nervous before this presentation).

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

Ethan Marcotte established the idea of responsive web design in his 2010 A List Apart article of the same title.  Succinctly, responsive web design is device-agnostic content presentation. A responsive design looks great on a desktop monitor, a tiny phone screen or a large format display.  This brief paper first details where responsive web design fits in the front end design stack. Then it will describe how a responsive web design is constructed.

In my last post, Pure CSS3 Speech Bubbles Without Images, we saw how the :before and :after pseudo-elements could be used to create different effects. In this post we’ll use similar techniques to create a variety of ribbons.

Ribbon effects are in vogue. Most designers use positioned images, but we’ll create them without using border effects and a single h2 tag:

Choose an easing type and test it out with a few effects.
If you don’t quite like the easing, grab a handle and fix it.
When you’re happy, snag your code and off you go.
Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!

We are passionate about the web, learning, and craftsmanship. We want you, as web designers and developers, to be successful in your careers. We feel, though, that W3Schools is harming the community with inaccurate information. Like any other authoritative educational resource, W3Schools should both hold itself to, and be held to, the highest standards.

We hope we can illuminate why W3Schools is a troublesome resource, why their faulty information is a detriment to the web, and what you (and they) can do about it.

Mobile-first Responsive Web Design may just be the most practical and forward-looking way to address the multitudes of devices and browsers that reach your site. But lack of native CSS3 Media Query support in Internet Explorer 8 and under (among others) presents a serious challenge to the technique.
Filament Group's own Scott Jehl has released a script to address the problem, and also achieves mobile-optimized filesize (3kb / 1kb gzipped) and near-native performance. You can learn more at the project site on Github: Respond.js Project (documentation here).

The “Fontspring @Font-Face Syntax”
This is the way the code should have been all along. Clean, clear and simple:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot#') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#webfontFqDaNIX6') format('svg');
}
What? I don't get it.
The hack trick that makes this work is the '#' following the EOT filename. Seriously.

How it works
Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single hash mark. The hash fools IE into thinking the rest of the string is a URL fragment and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

Browser compatibility
I see no reason why any browser would fail with this syntax. Please report your findings though. Once we feel that there are no issues, we'll change the syntax for the Fontspring webfonts.

We've tested on:

Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11

It's a single-song HTML5 Audio Player, powered by jPlayer, styled and mostly animated with CSS3. About the name? Hmmm.. In the stopped/paused state, doesn't it remind you a little of a dark Zen stone lying on bright sand? Hint: Click and keep holding the progress bar circle for some skipping fun.

Drupal 7 includes a big re-factor of the way CSS and Javascript are aggregated. What does this mean for your sites? In short:

You will see a greater number of files compared to D6 - this is normal and not usually cause for alarm. Surprisingly, more files is sometimes better.
To ensure efficient aggregation, the most important thing developers can do is choose the parameters to drupal_add_css and drupal_add_js carefully. And if you encounter contrib modules that are using the wrong parameters, please file patches!
This was a somewhat controversial change, and understanding the new strategy (and how to override it) requires going a bit deeper.

Previously, all files were merged together into one giant file (at least within the same scope or media type). This strategy worked well on simple sites with few or no contrib modules. Unfortunately, many contrib modules in D6 incorrectly add conditional* CSS and Javascript files – resulting in changing aggregates as you browse from page to page. If even a few lines af code differ, the entire aggregate (including large libraries like jQuery and jQuery UI) must be re-downloaded, consuming extra bandwidth.

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

So you write a lot of CSS, right? I used to be like you. I'll bet you probably write enough CSS to see tons of possibilities in the code, but also maybe you pull your hair out over some of the limitations? It's ok, you can admit it. Like when you have to copy/paste code all over your stylesheets, or when you try to remember the browser prefixes and divergent syntaxes for CSS3 techniques, or how there's no help whatsoever in managing color values. Or maybe you're one of us super nerds who actually has a use for programmatic loops and logic? If you nodded for even one of those, then let me introduce you to Sass.

Even from the earliest brainstorming days for our new version of Gmail for iPhone and Android-powered devices, we knew we wanted to try something novel with menu actions: a context-sensitive, always-accessible UI element that follows conveniently as a user scrolls. Thus, the "floaty bar" was born! It took us a surprisingly long time, experimenting with different techniques and interactions, to converge on the design you see today. Let's look under the covers to see how the animation is achieved. You may be surprised to find that the logic is actually quite simple!

These three questions seem to account for about 25% of all CSS questions. Well, maybe not quite that many - but I think we can all agree that it's definitely a lot. Most of the tutorials out there seem to make it all so complicated. It's really not - all three questions can be answered quite simply. First and foremost, reset all browsers to zero. For simplicity sake, I just used the * to reset everything for the example. Feel free to use a different reset method.

Firediff is a Firebug extension that tracks changes to a pages DOM and CSS.
Change Tracking

Change Tracking Screenshot
Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM. This provides insight into the functionality of the application as well as provide a record of the changes that were required to debug and tweak the page’s display.
In addition to monitoring each change, Firediff also allows individual changes or sets of changes to be reverted, while leaving other changes intact.

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Another fun CSS3 feature that’s been implemented in Firefox 3.5 is box shadows. This feature allows the casting of a drop “shadow” from the frame of almost any arbitrary element.

As the CSS3 box shadow property is still a work in progress, however, it’s been implemented as -moz-box-shadow in Firefox. This is how Mozilla tests experimental properties in CSS, with property names prefaced with “-moz-”. When the specification is finalized, the property will be named “box-shadow.”

I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.”

It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.

Very soon we’ll see the next evolution of LESS. The new change will be bigger than any previous implementation or update because LESS has now been re-implemented in JavaScript. What this means is you no longer need Ruby, ASP or PHP to use LESS, you just need a browser.

Less.js is a JavaScript implementation of LESS that’s run by your web browser. As any JavaScript, you include a link to the script in your HTML, and…that’s that. LESS is now going to process LESS code so instead of including a link to a CSS file, you’ll include a link directly to your LESS code. That’s right, no CSS pre-processing, LESS will handle it live.

While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.

With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.

There is only one problem: many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world.

This is nice, but one thing I had been struggling with was a way to reduce the opacity of the shadow without making the element itself less opaque. Black shadows can be harsh. One possibility is to use a lighter shadow colour (e.g. #808080 — medium grey), but such a shadow will disappear over any background colour darker than that. What I want is a subtle shadow that shows up over everything other than black. Call it a faded shadow.

In looking for a solution, I only today recalled that you can specify colours in CSS using the alternate rgba([red], [green], [blue], [alpha]) syntax. RGB values are written in decimal (0-255) and the last attribute is “alpha” (i.e. opacity) a decimal number from 0 (transparent) to 1 (opaque). 0.5 alpha gives you something 50% transparent. So rgba(0, 0, 0, 0.25) gives you a nice faded black shadow that stays dark enough to be noticeable over even dark grey.

As I’ve pledged, today I’m posting the Curved corner without any js stuff.
For firefox, you can set border-radius by prefixing “-moz” to the css property. And ofcource for webkit use “-webkit” . Now IE ?? .. As IE is not a good browser to work with css, we need to make it so. Here, you need to use a nice css hack. Some how I managed to have an htc file to make border-radius work in IE 

This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer.
IE is supported through use of VML. Standards-compliant browsers are, by default, ignored. If you wish it so, each call to DD_roundies.addRule can take an optional third parameter that will spit out appropriate proprietary code for browsers that are known to support the CSS border-radius property.

What Is This Thing?

These two guys, Alexis and Dmitry, invented a time machine. They went forward 10 years, brought back CSS 4.0 and called it LESS. It's universally awesome and you can read about it here. This app makes working with LESS a snap by turning it into a graphical interface.

LESS is an extension of CSS. You can write LESS code just like you would write CSS, except you need to compile it to CSS.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css

.curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / }

Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc)

Snook.ca - Web Design, Development and Consulting Services

En teknik för rundade hörn med CSS från en MODx-utvecklare.

Man behöver inte ha en enhet på radavstånd i CSS.

Diverse tricks och hack för att kringgå buggar i IE.

Den skumma float-bugg i IE som jag råkade ut för med travnet.se, här som demo hos positioniseverything.

Cabel på Panic har gjort ett rätt fräckt sätt att visa bilder ur ett bildgalleri på en webbsida med hjälp av javascript.

Mejllistepostning om float-buggen i IE som gäckat mig.

Yahoos fria bibliotek av testade CSS-baserade layouter.

En guide över vad som fungerar när det gäller CSS i HTML-mejl.

One True Layout syftar på att få flera delmål uppfyllda i samma layout. Total flexibilitet, lika höga kolumner och kontroll över vertikal placering.

En artikel om hur den fixerade kommentarsrutan på snook.ca fungerar.

En artikel om hur "specificity" fungerar i CSS, dvs hur olika stilinformationen styr över det slutgiltiga utseendet.

Hur man kan göra droppskuggor ("drop shadows") med enbart ren CSS-kod.

Hur man kan göra dockningsbara kommentarer.

Om problemet med att Internet Explorer (för Windows) inte hanterar "overflow" på rätt sätt. Ingen lösning, men olika sätt att jobba runt problemet.

Hur man gör formulär med hjälprutor som inte är popupfönster utan som öppnas och stängs på ett smart sätt.

En artikel hos A List Apart om hur man smart hanterar länkar vid utskrift av webbsidor, nämligen genom att lägga dom som fotnoter (fotnötter?) med javascript.

En förklaring till hur man ändrar på style, stilar, med javascript. Kan t.ex. ändra den bakgrundsfärg som är satt med CSS.

Ett enligt författaren bättre alternativ till "Global Whitespace Reset" som start-CSS-kod.