These days, “framework” is quite a buzzword in web development. With JavaScript frameworks like the Yahoo User Interface library, jQuery, and Prototype getting a lot of attention and web application frameworks like Rails and Django getting even more, it seems like everyone is using some kind of framework to build their sites. But what exactly is a framework? And are they only useful to programmers, or can we web designers benefit from the concept, as well?
What is a framework?#section2
So that we’re all on the same page, let’s agree—at least for the duration of this article—on this definition of “framework”: a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around. Generally speaking, this is the approach taken by the aforementioned JavaScript and web application frameworks.
To be clear, we’re not necessarily talking about something that is built, packaged, and released to the public. Rather, a framework may be solely for you or your team.
A framework for designers#section3
Chances are, you can benefit from a similar abstraction of CSS code for your web design process. Those who can benefit most are designers who work on several sites of a similar nature. Additionally, designers working on a team with other designers have a lot to gain from a framework approach. For example, I work for a newspaper company, and all of the 20+ sites in our stable have a lot in common. Simply by virtue of being news sites, they tend to be more similar than they are different. But, even a solo web designer who works on projects which are all quite different on the surface can probably find pieces that are suitable for abstraction into a general-purpose CSS framework.
At the Lawrence Journal-World, where I work, we’ve recently built a CSS framework and found it to be a huge efficiency booster. Sure, it took us a few days to create the framework itself, but once that was done, the speed at which we can put together quality page designs is tremendous. What’s more, since every designer on the team is now using the same framework, when one goes to make edits to another team member’s work, they don’t have to spend 20 minutes trying to understand why things were built the way they were. They can just dive right in.
What sorts of things can be abstracted?#section4
When you jump into putting together a CSS framework, you’ll want to look for things that you tend to do over and over again on every project. The goal is to consolidate these things into one central location, following the Don’t Repeat Yourself (DRY) coding methodology. This makes maintenance a lot easier, and can also save on bandwidth costs.
A few things I account for in the CSS of almost every single project I work on are:
- A “mass reset” of default browser styles. For example, setting
marginandpaddingto 0 on all elements, turning off borders on framesets and images, etc. - Aligning the type to a consistent baseline. This includes things like setting the margins on block level elements like paragraphs, headers, and lists to the same value as (or some multiple of) the base
line-heightsetting for the site. - Creating basic styles for forms.
- Creating a few CSS classes I always use, such as
.hide(where I set the display value to none) and.mute(which I set to a smaller type size and sometimes a lighter color).
There are more interesting possibilities, too. Many web designers find themselves using the same basic grid structure over and over again. Why not move it into its own stylesheet and structure it in a way that is flexible enough to be used on multiple sites? Yahoo has done this, with their YUI grids component. When we built our CSS framework at the Journal-World, we looked at Yahoo’s implementation first. We decided it wasn’t quite what we wanted, but it served as a nice functional example and gave us lots of ideas on how to construct our own. We settled on a 16-unit grid, which is flexible enough that we should be able to use it on every one of our properties’ sites, even though every site looks and feels quite a bit different from the next.
Also, most sites share common widgets, like drop-down menus, navigation tabs, buttons, etc. These are prime candidates for abstraction, as well. Beyond that, you may have common content display idioms, such as a list of photos that appear as thumbnails. You could standardize on a CSS class name like “thumbnail-list,” so that all you need to do is add that class to get your thumbnails working.
Another possibility is to extract hacks and workarounds (such as those that accommodate older browsers) into their own external stylesheet modules. I’ve tried this myself, but found that ultimately hacks and workarounds tend to be too site-specific to pull out into a generic framework. But your mileage may vary.
What’s the real world benefit?#section5
The real beauty of having a framework like this is getting off to a fast start. You can create a new (X)HMTL document, include your framework, and be off to the races with reset padding and margins, good typography, clean forms, a layout grid, working widgets, and more.
Obviously, though, you’ll want to customize the look and feel for each site. To accomplish this, all you’ll need to do is overwrite and add to the default styles as necessary. For example, if your framework sets up basic-looking horizontal navigation tabs for any ul with the class “tabs,” and they are grey with a black border, you can easily customize them to match the look and feel of your site with just a few lines (Line wraps marked » —Ed.):
ul.tabs li {
border: none;
background-image: url('/images/tabs/ »
site-specific-tab-look.jpg');
} All the work of floating the list items the to the left and making the links inside them display as blocks (also floated to the left) with the text centered in the middle—ad nauseam—has already been done for you. You are left to focus on what is unique and interesting about the specific site you’re working on, rather than writing the same CSS you’ve written a million times before.
How should a CSS framework be built?#section6
There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets:
reset.css—handles the mass reset.type.css—handles the typography.grid.css—handles the layout grid.widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons.base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.
We then store the framework in a single location and have every site pull it in from there. Then, of course, there are also site-specific stylesheets for each site which overwrite and add to the framework’s default as necessary.
A word of caution#section7
This method works quite well, but there is a valid concern to be raised: it adds to the number of HTTP connections needed to render each page. On large, high-traffic sites, adding five more HTTP connections to every page view may result in angry system administrators. Two possible solutions to this are:
- Include everything in a single file, rather than breaking it into modules. The problem here is that you lose the ability to include only certain parts of the framework, and you also make maintenance more difficult.
- Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well. Using my example framework above, this dynamic process could occur when
base.cssis requested, but not whentype.css,grids.css, etc. are. This way, the individual components are still available, but the entire framework is available in a flattened version, as well.
In the end, it’s important to keep in mind that the goal isn’t making things as abstract as possible so that you can impress your friends. Rather, the goal is to get you off to a fast start and make your design process more efficient. It is definitely possible to over do it. If you abstract too much, things start to get confusing, and you end up hurting your website’s performance with too many HTTP requests.
Remember: a good framework should never make things harder or more complex than simply starting from scratch.
In conclusion#section8
The bottom line is that we web designers, just like our friends in the programming world, tend to repeat ourselves often. We find ourselves resetting the browser default styles, setting up a baseline grid and writing CSS for navigation tabs over and over again—on almost every project. Taking a bit of time out to abstract some of these idioms into a framework that you can utilize on every site you build will get you off to a faster start, make for easier maintenance, and help the other designers on your team understand the decisions you made. With a bit of care, these benefits can be realized without adding bloat or hurting the performance of a website.
Excellent article, Jeff. I think that the other frameworks get covered often (JS and Rails, Django, Cake) – but the Y!UI library and others don’t seem to get as much exposure. I think design has a completely different need, but the same principles apply (just as you said you didn’t use Yahoo due to specific needs). I like to keep it simple, as you have shown, then override where necessary (same as if you were using any other framework).
Thanks for sharing some insight into your construction. I would be interested to see more on the baseline grid for your typography – do you include all block level elements, or target specific ones to set the margins/line height? I’ve found this to be tricky when you have images that can be different dimensions – but I love how the grid comes together and everything lines up.
Larger web development companies benefit from centralized framework more in updating hundreds of sites in a hurry. Updating CMS or other functionality in dozens of sites at once might be a recipe for catastrophe. Centralized frameworks in templates and css can make this process a lot more straight forward and orderly.
With new browser versions popping up now than maybe ever before, the need for stable process is lifesaver for site managers.
Frameworks also help getting new employees up to date with company’s development standards fast.
Unless you are dealing with a really large stylesheet, handling everything in a single stylesheet is the preferred method. Switching between files is a hassle – working with one file is easier for everyone.
A good way to divide sections within the single stylesheet is naming your sections and putting an equal to character in front of your sections, so you can easily check your sections by querying “=”, or “= footer” if you wanted to get to the footer section.
The reason you want all your declarations in a single css file is that am element might have two different declarations in two css files, causing confusion about the inheritance. If you have a single stylesheet you have a clear view which element inherits the properties you defined.
If you can deal with inheritance, and have a text editor that supports searching in multiple files at once, multiple stylesheets may be the way to go, but then again there’s stil the disadvantage of multiple HTTP requests.
I work with 4 stylesheets: screen.css, print.css, ie6.css and ie7.css (last two included with conditional comments).
The framework strategy is mainly useful when you’re dealing with multiple sites all under one roof. With a project that is unique in design and its’ goals, the markup usually differs from a previous project (or your “framework”).
What you can reuse most of the time are actually just a few browser reset rules. If you take a “vertical rhythm”:http://24ways.org/2006/compose-to-a-vertical-rhythm into account, setting default white-space doesn’t make much sense, since it heavily depends on font sizes and line heights of various content units across the page (you are not using the same font family and font sizes over and over, right?).
Sometimes overriding rules leads to a bloated CSS file of more than 2000 selectors. However, if you have to develop another web site within the same brand, creating a framework is actually worth spending time.
“How should a CSS framework be built?”
Method that You describe works quite well i know that it adds to the number of HTTP connections needed to render each page but I agree that large, high-traffic sites, adding five more HTTP connections to every page view may result in angry system administrators so thanks for some solutions on that.
Good article, Jeff.
I’ve been working a lot lately on social media site projects using the Drupal core and modules. It takes some digging to find Drupal themes with minimalist markup, good semantics and something resembling your CSS framework.
I’ve found that the Foundation theme, available in Drupal’s theme library, is a good “starter kit.” It isn’t cruft-free but it’s close, and very easy to shape as a UI designer sees fit.
I’ve also found Drupal has a handy feature — the ability to combine and cache multiple CSS files into one server call per page, much as you describe. It does save a few ticks, and that kind of functionality would be handy alongside your CSS framework.
I’d love to see a Drupal theme developed with your CSS approach. Maybe someday, in my alleged spare time…
Great stuff, Jeff, this technique will surely make it more enjoyable to create CSS files.
Maybe you should release a version of LJWorlds framework as a sort of light-weight alternative to the Yahoo package, which is quite bloated? 🙂
I hope I’m not stating anything dreadfully obvious here on the whole optimize vs organize subject, but you could import your sheets as one flat sheet with PHP, no fancy script required:
In base.css:
This should dump the content of all your sheets in your base sheet verbatim. If I understand correctly (programming is not my forte) this should reduce the HTTP connections to your single sheet. Maybe some more knowledgeable folks could enlighten us to possible caching issues/solutions?
Thanks to (“fiftyfoureleven”:http://www.fiftyfoureleven.com/weblog/web-development/css/css-php-organized-optimized for confirming my suspicions.)
One more note, if your server won’t parse a CSS file as PHP, just name it base.php and import it as such into your XHTML.
The entire article could be summarized like this:
bq. “Frameworks are good, don’t repeat yourself, save some time, make your life a bit easier. It’s what I do.”
Great, now how about giving those new to the notion of design frameworks something they can actually use? I agree with the use of frameworks for design, but I think it would be far more valuable to the reader if you offered deeper examples and previous successes.
These ALA fluff pieces are absurd.
Two things.
1. Folks, no need to point out that extra CSS files increases HTTP connections – that was mentioned and addressed in the article. If your offering solutions, (Gordon) then that’s awesome. But to the others, no need to be snitty.
2. @Michael: I agree that a more in-depth look at examples would have helped, but you have to take into account how much space this guys has. He can’t write a book on the subject.
This could make a great website – a listing of frameworks – anyone know one? I’m actually interested in a list of them for some odd reason.
I’ve been really successful at using this kind of technique, this is agile work with CSS. To my knowledge, there could be no inheritance issue, since each CSS file serves a different purpose (e.g. layout, typography, colors, etc.), the rules each file contains are then dedicated to serve their corresponding purpose. Find _the logic that works for your case_, organize & name your files accordingly, push the Start button — there is nothing else to worry about.
As for the HTTP requests issue, yet the PHP approach used by Drupal works, it always requires server-side processing time for PHP instructions. The HTTP protocol has all the features needed to create a “rock-solid cache control mechanism”:http://www.sitepoint.com/article/effective-website-acceleration/3 and every system administrator knows that.
Given that websites put in production are bug-free, or even if some space is left for bug fixing at release, you can easily define a set of cache control policies that considerably reduce the amount of HTTP requests and does not require server-side processing. This is the exact same logic as with DNS caching, avoid mixing application- and network- layers logic is a best practice.
We’ve moved to a CSS framework here at work. It has increased our site delivery time in measurable ways – which is always good for the bottom line. As the creative lead I’m often knee deep in front-end markup, but I’m also trying to bring a framework tool-set into the actual design process. We have a lot of crossover in our designs, which would lend itself to a framework. The key is to balance the framework with the creative process – I hate seeing the light fade in my design team when they see the amount of work that needs done – we’re hoping this will give us some breathing room.
@ “Johan”:http://www.alistapart.com/comments/frameworksfordesigners?page=1#3
His example is not throwing random styles in random stylesheets. There is a structure to everything. Just as you use ‘=’ (which is a good thing, even if you use multiple sheets) – you can also separate things into different files. I usually do reset.css, layout.css, typography.css, and color.css. Each of these sheets only contains declarations related to their name. So I won’t have a style inside of color.css that overrides a layout element. All layout elements are inside of layout.css.
However, this also gives you room to create a foundation with these elements – and then have a site specific sheet that can override certain elements, spacing, typography, etc. Just as with a programming (js or other language) framework you are inheriting from base classes to complete your tasks. The base classes house the mundane and the magical, and all you have to do is extend them and build on top of them. That is the goal here.
If you are worried about requests, it is a trivial process to have them combined and compressed at runtime into one stylesheet.
@ “Gordon”:http://www.alistapart.com/comments/frameworksfordesigners?page=1#8
That method will work, but you will need to set a ‘Content-type: text/css’ header so the browser will render it properly. There are other similar techniques that will combine, as well as compress – then actually cache the file until you update one of the other CSS files. This way there is no programming overhead each time your stylesheet is requested, you combine everything into one request, and it will be slimmer than your original.
It is a tradeoff. I use default.css as my base, and use @import to bring in my styles (as listed above).
@ “Neil”:http://www.alistapart.com/comments/frameworksfordesigners?page=1#10
bq. I agree that a more in-depth look at examples would have helped, but you have to take into account how much space this guys has. He can’t write a book on the subject.
As stated in his bio, Jeff has done just that – written several books (co-authored). They are worth checking out as they will give you more context to what he is saying in this article.
Guess I should have looked above the text box, I apologize for the links/blockquote in previous comment.
If you want to see real world examples, just visit his sites. If you want to see the actual code: view source. It’s not that hard. here, i’ll even make it dead simple for you:
* “http://www.ljworld.com”:http://www.ljworld.com (one of the author’s sites)
* “http://www.getfirebug.com”:http://www.getfirebug.com
Now just install that plugin in FF, visit the site and view all the CSS.
The following article may be of interest to you.
It is an article outlining a system to dynamicly combine css or javascript files together into a single file to speed up download times. It includes caching to lighten the load on the server…
Great stuff, thanks Rakaz!
“http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files”:http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
You really can use frameworks for most anything involving code. I’ve got a site building framework that has pre-built HTML (basic page structure, some empty meta tags, link and script tags to stylesheets and JS files, and Validator links in the footer), CSS, Javascript, and PHP and a shell script that puts it all together for me.
Since we’re talking about CSS framework here’s mine in a nutshell:
# structure.css – starts off with margin and padding reset, has a couple commented lines to enable static center layout, and then some predefined selectors that match my basic HTML framework layout (header, content, footer, etc). I then add in all the structural layout code in that file (columns, positions, etc)
# utilities.css – contains a collection of pre-defined classes that I can apply all around the site. I make a point to never directly modify this file in a project and just override/add to the styles here in my third CSS file.
# styles.css – This is the file that is actually linked to in the HTML page. It starts off with 2 @import lines to pull in structure.css and utilities.css (in that order) and then contains a bunch of pre-defined selectors for global default styling and all the remaining styling
# iehacks.css – the obligatory “IE sucks” stylesheet, linked in the HTML with a conditional comment.
All-in-all, the framework I have cuts off at least half an hour on any given site I build. I am working on reorganizing the CSS but that’s for another time.
(wow… long comment for my first one on ALA)
Another benefit of using a framework approach is the reduction in “˜CSS bloat’ that occurs as a large site continually grows. It’s all too easy to just add another class or two to the CSS for each new page which over time results in a massive & unwieldy style sheet. Another way to look at the framework concept is to think of it as a library of reusable code. So instead of
.myclass{padding: 5px; border: thin solid #000000; background: #FF0000;}
You can use:
. padding_small{padding: 5px;}
. border_thin{border: thin solid #000000;}
. styling_red{background: #FF0000;}
So now when you create a new page you can piece together elements from your library instead of creating new classes.
@”Nate”:http://alistapart.com/comments/frameworksfordesigners?page=2#13
bq. As stated in his bio, Jeff has done just that — written several books (co-authored). They are worth checking out as they will give you more context to what he is saying in this article.
Sorry, I may have written that a little wrong. I didn’t literally mean write a book on the subject. I was simply trying to explain that Jeff can’t possibly write enough the cover every framework and have in-depth examination of several. He only has 1000 or so words (I don’t feel like counting.)
Are they going to built a snowman with 2 noses? 🙂
Just wanted to say thanks to everyone — glad you’re liking the piece! Keep up the great discussion. 🙂
such as “YAML”:http://www.yaml.de/index.html ?
@Michael: I don’t know about you, but I’m smart enough to be able to take what is written here and run with it; not everything needs to be a how-to manual. Sometimes even a little bit of (gasp) _theory_ goes a long way.
This actually is very timely for me. During my recent performance evaluation, my manager said I needed to get better about “recycling code”. I told him to go jump in a lake, that what I do doesn’t lend itself very well to recycling. After all, it’s not like I’m writing functions…But now I’m rethinking. In fact, I’m excited about putting the main idea into action. I’m curious to see how the rest of my team likes it as well.
The title of the article reminded me of “Templation”:http://templation.websaviour.com/. The HTML/CSS templating system I developed several years ago to solve the problem of managing a site with hundreds of HTML pages mixed with a variety of PHP applications. It really is a “framework for designers” in the sense that it is primarily concerned with managing HTML and doesn’t throw a lot of cruft your way.
These days everyone wants a content management system, but if you ever work on sites with static content, or that integrate several different PHP apps, Templation is a very slick way to DRY out your HTML. If your CSS framework contains some boilerplate HTML you can set this all up as a generic template that is accessible to all sites on your server, but can be overriden on a per-site or per-directory basis.
Ack!
The web development community as a whole used to be as cohesive and civil as the css community — then frameworks reared their ugly heads, and now you’re either rails or django, prototype or yahoo, tomato or tomaaahto, and never the twain shall meet.
Web development is now *a house divided*, and with your article, the quiet little corner of CSS will soon follow down that sad, misguided path —You can see it in the comments already!
Please, for the love of all that is holy, REMOVE THIS ARTICLE!
/* actually, don’t…it’s a great idea */
Didn’t see this mentioned in any of the comments after a quick scan, but Rails 2.0 (or whatever it will be called) will have baked in functionality to take a set of CSS files and essentially concatenate them into a single file to save on HTTP connections.
The basic syntax is something like:
stylesheet_link_tag :all, :cache => true
which will take all your CSS files and send them to the browser as a single file named all.css.
First, thanks for the article on frameworks. It was good to read as I have been seeing this word tossed around quite a bit lately but I didn’t really grasp the the specifics of it.
As it turns out, I guess I’ve been using “CSS Frameworks” for myself for a while, without directly knowing it. Overtime this process just evolved into a framework. However, after reading the book “Transcending CSS” by Andy Clarke (edited by Molly e. Holzschlag and a preface by Dave Shea), I used the recommendation to setup 5 CSS files.
* layout = the ‘reset’ code, template and page specific layouts (margins, paddings, widths, heights, positions, displays, etc)
* type = font size, type, decoration, etc
* color = font colors, background colors/images, etc
* ie-fixes = a style sheet that’s included only with IE (via conditional comments)
* master = this calls all other style sheets (except IE which is called via conditional comments to only be included in IE browsers)
Though, as you pointed out in the end of your article, I do worry that this number of HTTP connections can start to get absurd. What I wanted to do is also extract the “reset” code into it’s own style sheet, and after reading your article, I’d love to set aside code for a “horizontal list menu” that I find myself using *ALL* the time. Do so, would mean I wouldn’t have to go back and open out old CSS files to find the code I used and how I used it (though, I’ve used it enough it doesn’t take very long, but there’s also Javascript code that goes with it, which came from an ALA article!)
Usually, my thoughts turn to “caching”. So what if I have to open up 5-6 HTTP connections just for CSS files? Isn’t the point of CSS files the ability for browsers to cache said file and avoid an HTTP connection all together? Along the lines of images? Maybe my networking knowledge is light, but does this not make sense? Are there still HTTP connections opened to check file dates and if file refreshes are required?
I would also appreciate more general ‘intro’ articles about frameworks in general. Frameworks on the server-side (Ruby, PHP, JSP, ASP, etc). What are some good ones? What are the general designs behind them? Are there any good books?
Cheers,
Joh
John-
Thanks for the long, thoughtful comment. The sort of framework I’m writing about in this piece is reused. That is to say, you would use the *exact same stylesheets* from project to project. I’m not sure if you’re doing this or not, but you inclusion of a “layout” sheet made me wonder. You say it includes page-specific elements, which leads me to wonder if it’s actually reused from site to site (or even page to page). Same with “color” — this isn’t likely to be the same from site to site, is it? If it is, then by all means, abstract it and reuse it! But, at least for me, it’s rare that the layout and color are the same from site to site.
There is some browser-level caching of stylesheets, but that doesn’t change the fact that five stylesheets equals more HTTP connections than one. 🙂
As for server-side frameworks, everyone knows I have an affinity for Django.
You hit on a lot of good points and it is a great starting place for anyone wanting to create their own specific framework depending on specific user requirements they might have. I know personally that by using a framework based approach I have been able to cover all of my bases in order to create a comprehensive user experience without having to do too much redundant thinking and getting right to work on particulars. Lately I’ve been using WYMstyle – It is pretty huge, but I grab what I need depending on my project thereby standardizing various aspects of my workflow. Like I said, it is huge, but definitely well worth looking at.
Peace.
http://www.wymstyle.org/en/
I’ve worked with a few designers in a similar “framework” manner recently, though I think we may have pushed things too far. We didn’t only share the overall layout and branding for a few sites, we also shared the same “widget” styling (think page navigation, header, footer, list of user names, form layout, etc).
Some times that would work really well since the hard cross-browser work of one person was applied to many pages, but things got very hairy when you nested these CSS widgets inside one another (especially when you added your own page specific tweaks here and there). The problem was that we couldn’t use the ‘>’ operator to select a child element (stupid IE) and had to make rules too general.
We were trying to make clean CSS selectors with as few class names as possible (think ul.tagcloud li a), but when you nest rules like that you get all kinds of crazy overlap from overly generic element selectors.
I still think that our effort was useful, but consistent CSS implementations would make this much easier.
Given that the article leads off by saluting the (fantastic) YUI along with other front-end engineering frameworks, I’d like to direct your readers’ attention to the Yahoo Design Pattern Library (http://developer.yahoo.com/ypatterns/). The YUI and YPL are closely related and we are working on making them even more useful for designers, developers, and hybrids.
This is a great article, and very relevant to what I’m working on right now. It seems like I learn something new after every new site produced to come closer to the subject of this article, but I don’t have the luxury of working on a mega-site like Yahoo yet to cooperate with frameworks that really make a difference.
What I do know is that this pursuit makes production much easier to keep things simple, clean and as standardized as possible so engineering can program exactly what we intended. However, the designs I produce tend to be so pixel-precise and intricate with multiple font decorations per line and slight alterations designers love to include. My pursuit of standards and frameworks break down by the time we launch because of all the little page-level tweaks to keep things pixel-perfect. Do sites that focus on less highly-designed Web content have less trouble adhering to standards and frameworks?
I really enjoy the articles on this site, and am still amazed how the internet can give you access to so many cool people. I live in Charlotte, NC and am having trouble hooking up with other people to discuss this stuff.
Anyway, one thing I started doing is using the code completion in my text editor to write my standard css files for me. Think of custom textmate bundles for writing certain parts of your css file. (I’m on windows at the moment, so I use http://www.e-texteditor.com/, but it works the same more or less).
So if you are going to use left navigation, maybe you create a shortcut named xxleftnav or xxrightnav for right navigation and so forth. If you’re like me when you work on new sites you tend to have the same layout structures which lend themselves to a library of css layout templates. Enjoy, Brian
Great article, I think it would be a good idea for me to make a CSS framework.
You rightly mention that multiple stylesheets can have a significant impact on performance, and that one stylesheet it a solution, but say this is inconvenient to update. I don’t think it would be as bad as you make it out to be, and in my opinion this would be best if the stylesheet was well commented.
Hey Alex, thanks for your comments! I think it’s simply personal prefer as to whether people like maintaining one long CSS file or a handful of shorter ones. I like breaking them out, but I definitely know people who like one long one better. So, to each his own.
The other downside of one long file, though — besides maintenance — is that you can’t include only bits of the framework, you always have to include the whole thing. Depending on the framework you create, this may or may not be an issue, but it’s something to think about.
I think the ideal solution is to allow for multiple files but have a server-side process that concatenates them together and sends only one long file to the browser.
Hey all,
After reading Jeff’s article, I put together a simple framework using paradigms I’ve found helpful in most of my projects (I’d been thinking about it for a while, but the article convinced me to bite the bullet).
I’m releasing it under GNU in hopes it might be useful to others too. I’m calling it Taffy (Every framework needs a cute name, right?). Hope it helps out, if not as a framework, at least as another example.
Check it out here: “Taffy Framework”:http://www.gordonbrander.com/taffy-framework
I’m not a web designer, just some idiot who has time to much around with her own site. But, this is something I was looking for two years ago when people started talking about CSS and XHTML and having sites that were accessible. I’m glad to see someone thinking about it who actually knows what they are doing. I’d love to have a frame. Especially right now as I have still not fixed my code, mainly because I’ve had less time and less patience and after all it is just my pet project. Hardly anyone but me knows about it. 🙂
I have seen many design teams using framework and specially offshore team, in order to keep them not to far from what was required we suggest framework. Armand Rousso
A clean usable set of code to do header, menu, 2 and 3 col body, and footer available in a forum is doable. Someone who has asked needs to take and volunteer to moderate it and we can tean to create content. 1ho volunteers? ((-:
5ale on my blkbry in Oceans 13
If you create a frameworks of multiple CSS files and concatenate them in one long file, server-side, you are saving the HTTP requests and lightening the load on your server; but you are creating a scenario where you are potentially creating many different on-the-fly, unique css files that are long and different page by page. In other words, the client must download them each time because they will not be recognized as cached (even though they are using the same chunks of frameworks). On top of that, for every unique sheet that’s not seen as being cached, the client will download all those bits and bytes again—more tax on your server.
If you use the individual framework components as separate files, you are taking advantage of caching in the client, but then you are creating a server load as the clients tax the server with HTTP requests to see if their cached versions have been updated on the server or not.
Seems like the server-side solution could be a good one as long as you limit the number of permutations of unique files that the server-side solution would serve up.
While this is a great article, it could use more examples. I really hate to see the multiple http request problem not solved. I would just create in PHP (or your language of choice) one file that includes all the others (e.g. using php’s include function) – at least that will reduce the network overhead.
In the past I have merely copied, pasted and modified working CSS from past sites when designing new ones with a similar layout, so moving to a framework is a logical step. Thanks for bringing Yahoo’s UI library to my attention, too – it looks incredibly useful. I look forward to cutting out time working out issues like why my div is 2 pixels to the left in IE and having fun getting back to actually designing!
If you use “TextMate”:http://macromates.com/ , you can specify the default content when creating new files types. For example, you can edit the template that creates new XHTML Strict 1.0 documents to already have the structure you prefer (like including YUI CSS links, etc…).
I then use “Snipplr”:http://snipplr.com/ and their “TextMate Bundle”:http://snipplr.com/extras/textmate/ to easily pull in my own code snippets or favorite code snippets. The bundle saves those snippets offline in TextMate, which is useful if I’m coding offline. The combination of TextMate and Snipplr _is_ my framework.
Good article, this is something that I’ve been thinking about quite a bit recently. Most of it seems like common sense, but then all the best ideas do. I agree with Jon Henshaw above with regard to ‘implementing’ this framework.
I have a few core CSS files that I always start a site with:
* reset.css (from Eric Meyer)
* IE_only.css (to sort out the misbehaving children)
* styles.css.
The last one will eventually have all the main styles in, but it starts with some basics that I always use (styles for links, setting font size to 62.5% etc) and then I build on this.
Any common code that I often use is saved as snippets for use with the Scribes text editor. For example I have a nice snippet that creates a tabbed navigation bar within a few keystrokes – it makes development much quicker.
Yes!
*This si a text grabbed from my guidelines*
Site-wide blocks like sidebars, navigations and complex forms included after the content section. My ideal positions of the code blocks in the
are as follows:1. *Header* — contains logo (image) and concise slogan (text) of the site. Header can also contain few links to the most important navigation sections of the site (2-5 links) and breadcrumb trails. It is important to keep this information first for branding and accessibility. This also tells the search engine which pages are the most important.
2. *Content* — starts with heading 1 and continue with the copy paragraph text, headings (2, 3″¦), unordered and ordered lists”¦ If the content contains semantic blocks, these should be wrapped in a div. Example: information about one product in a group of products should be enclosed in a
. This
can contain heading with the link to the product page, image of the product and paragraph text with the product description. More information about the content and copywriting has been in the copywriting guidelines document.
3. *Secondary content* — if you have one, it is usually the non-site-wide navigation specific for the current section
4. *Sidebars* — should contain site-wide-navigation and all the site—wide search forms and similar stuff. The ideal structure of the navigation is unordered list
or nested unordered list
Section
Subsections
another subsection
in case you have sub sections. If the sections contain many other sub-sections, you should put this in a separate list to the secondary content. See “”http://css.maxdesign.com.au/listamatic/”:http://css.maxdesign.com.au/listamatic/ to find out how to give your list-based navigation the look you need.5. *Footer* — contains the most generic information. Footer may contain information about author/owner of the page enclosed in the
tag. The
should contain full address, e-mail and telephone number. You may want to add more semantics here using VCARD format. To include an address is espacially important for local business sites to make the page rank for local terms: “Type of the business and name of the location”? (E.g.: Travel agents Swindon, PPC Warrington) and ensure user can easily find contact details. Footer can also contain link to T&C, Site-wide sitemap and copyright/licence information.
6. *Wrapper* – Everything is wrapped in the wrapper to make it easier to create which has its
position:relativeto make the layouts easier withposition:absoluteEvery layout style sheet than looks like:
*{margin:0;padding:0}
body{}
#w{}
#h{}
#c{}
#s2{}
#s{}
#f{}
.class1{}
.class2{}
...
#c p{}
#c ul{}
...
#s ul{}
#s li{}
#s ul ul li{}
Colours and backgrounds are often separated in the stylesheet called theme.css
If anyone fancy I’ll write an article about my field tested madular CSS/XHTML strategy.
This is a good article. Thank you.
My main concern is that how are we going to communicate the existing styles to the other designers for reuse? More often than not, the styles do not get reused simply because they are hard to find. Should we create some sorts of documentations (e.g. screenshots) for every major style?
This is a great article to get us thinking. I really like the idea of standardizing our approach to CSS.
To your list of 5 basic style sheets I might add one for microformats since there are some basic styles I generally end up applying to them and the classes are 100% predictable.
I worry that class names like “tabs” aren’t semantic. I haven’t played around with it myself (I have a full time day job maintaining one site) but I’m wondering what your thoughts are on starting with a predictable basic XHTML layout that has common semantic class/id names in it like a header area with a nav list in it by default and then grabbing an applying different basic style sheets (or parts of sheets) depending on how you want those formatted.
Vox wrote a server-side solution to concatenate all their .js and .css files into one each for the client.
http://www.slideshare.net/miyagawa/how-we-build-vox
Start at slide 47. Not much on the detail side, though. Wouldn’t be very difficult, though.
Vox wrote a server-side solution to concatenate all their .js and .css files into one each for the client.
http://www.slideshare.net/miyagawa/how-we-build-vox
Start at slide 47. Not much on the detail side, though. Wouldn’t be very difficult, though.
I really enjoyed this article, and immediately wanted a solution for concatenating all my css files. Basically I wish @import had less side effects.
So I wrote one, and made it public for anyone else who wants to use it:
http://www.georgehuger.com/cssAutoLoad
10KB PHP file and 2 lines of .htaccess, and you’re off to the races. Supports caching, basic compression, and even a little debug.
I’d like to hear feedback, as I’m new to this sort of thing. Thanks again for the inspiration.
Cheers,
George
On HTTP connections vs. stylesheet size, what’s wrong with using @import in a CSS 2.0 world? Cascading is supposed to be a core feature — it’s the ‘C’ in CSS after all.
For the framework I built for our developers, there is a basic.css. More advanced stylesheets @import the BASIC.css. Some have multiple @imports to other css ‘modules’, for example, TOOL.css imports BASIC and GRID (GRID imports TABLE), while GUIDE.css which doesn’t need GRID only imports BASIC and TABLE.
As long as you keep the functionalities simple and nested, developers only see a few choices (TOOL, GUIDE), and the cascade logic takes care of the rest, while giving me the ability to add new modules or styles only where needed without steadily increasing BASIC.
I’m sure some more advanced folks will let me know why this is bad somehow, but it has worked here for a few years in our (admittedly homogenous) environment (an intranet).
As many others, I really like to keep it minimal. But even at minimal, I tend to use at least three CSS files. Basics, IE fixes and then the rest. I’ve never used a framework and probably never will. Good article tough, many points i’ve not know of. Thanks!
I know it’s been a while since you’ve written this article, but I wanted to tell you thanks for taking the time to share your experience. We have been getting a lot of requests for larger MVC sites that are very complex from a GUI perspective (not to mention the programming aspect), and we are definitely seeking an optimal approach with our CSS and designs, as we’ve been spending a lot of time looking at each other’s CSS and going, “huh?” and “what the …”.
Your article is just what I was looking for.
You said:
Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well.
Actually Google Pagespeed project supplies code that can be used to flatten and minify your css into a single request.