CSS frameworks are a Gods send. They speed up development, ensure usability, meet all W3C standards, compatabile across most browsers and a hell of a lot more. Sounds marvelous doesn’t it. Why doesn’t everybody use them? Well, for the novice developer, frameworks, may be a little bit tricky to get there head around? That is were this article comes in, to hopefully give everybody a better understanding of what a framework is and how to use it effectively.
We are going to focus on how to use the Blueprint Framework, a framework that is a little bit more mainstream and mature than the rest (I am not saying better). We have getting started guides, advanced tutorials, plugins, tools and apps and some insightful further reading articles…
Direct link: The Blueprint CSS Framework – Tutorials, Guides and Tools
We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich…
Direct link: Modern CSS Layouts: The Essential Characteristics
At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers…
Direct link: How to Achieve Cross-Browser @font-face Support
One of the most popular galleries for web designers, with over 21,000 RSS readers, over 10,000 del.icio.us bookmarks and PageRank 6.
Direct link: Web Creme
Best Web Gallery is an inspirational gallery site where we collect a wide range of quality design websites (Flash & CSS). What does quality design means to us?
Quality Design = Visual + Technical + Creativity
Direct link: Best Web Gallery
CSS can sometimes be a tricky business. There are times when even the simplest of layouts take some serious brainstorming! One of those frustrating times is when you want to create a series of columns of equal height, but the content in one column might be longer than the next. Here’s where the Faux Column technique steps in, let’s take a look at how this solution can make even the most complicated layout a breeze to code up…
Direct link: Create Sidebars of Equal Height with Faux Columns
Complex CSS files can often be difficult to manage especially if you don’t use a structured way to write and organize their code. In a previous post I already illustrated a methodic approach to CSS coding. This post illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier…
Direct link: 5 Rules To Write More Readable CSS Files
This Visual Cheat Sheet will help you to understand CSS (2.1 and 3) behavior in Internet Explorer’s earlier (IE6 and IE7) and recent (IE8) versions. This cheat sheet (2 pages) contains some important CSS reference like… At rules (@rule), Element Selectors, Attribute Selectors, Pseudo-classes, Border and Layout, Position, Font and Text etc.
Direct link: Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser Safari or Chrome…
Direct link: Screencast: Editable CSS3 Image Gallery
One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. As a result, they all more or less ignored the issue I raised at the end of the essay: that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?
Direct link: Fluid Images in CSS Fluid Layouts