Lately, “framework” is kind of a buzzword in internet growth. With JavaScript frameworks just like the Yahoo Person Interface library, jQuery, and Prototype getting a whole lot of consideration and internet software frameworks like Rails and Django getting much more, it looks like everyone seems to be utilizing some form of framework to construct their websites. However what precisely is a framework? And are they solely helpful to programmers, or can we internet designers profit from the idea, as effectively?
Article Continues Beneath
What’s a framework?#section2
In order that we’re all on the identical web page, let’s agree—no less than throughout this text—on this definition of “framework”: a set of instruments, libraries, conventions, and finest practices that try to summary routine duties into generic modules that may be reused. The objective right here is to permit the designer or developer to give attention to duties which can be distinctive to a given challenge, relatively than reinventing the wheel every time round. Typically talking, that is the strategy taken by the aforementioned JavaScript and internet software frameworks.
To be clear, we’re not essentially speaking about one thing that’s constructed, packaged, and launched to the general public. Somewhat, a framework could also be solely for you or your workforce.
A framework for designers#section3
Likelihood is, you may profit from an identical abstraction of CSS code in your internet design course of. Those that can profit most are designers who work on a number of websites of an identical nature. Moreover, designers engaged on a workforce with different designers have lots to realize from a framework strategy. For instance, I work for a newspaper firm, and all the 20+ websites in our steady have lots in widespread. Just by advantage of being information websites, they are usually extra comparable than they’re completely different. However, even a solo internet designer who works on initiatives that are all fairly completely different on the floor can most likely discover items which can be appropriate for abstraction right into a general-purpose CSS framework.
On the Lawrence Journal-World, the place I work, we’ve just lately constructed a CSS framework and located it to be an enormous effectivity booster. Certain, it took us a couple of days to create the framework itself, however as soon as that was completed, the pace at which we will put collectively high quality web page designs is super. What’s extra, since each designer on the workforce is now utilizing the identical framework, when one goes to make edits to a different workforce member’s work, they don’t need to spend 20 minutes attempting to grasp why issues had been constructed the way in which they had been. They will simply dive proper in.
What types of issues might be abstracted?#section4
Once you bounce into placing collectively a CSS framework, you’ll need to search for issues that you just are inclined to do time and again on each challenge. The objective is to consolidate these items into one central location, following the Don’t Repeat Your self (DRY) coding methodology. This makes upkeep lots simpler, and also can save on bandwidth prices.
A number of issues I tài khoản for within the CSS of virtually each single challenge I work on are:
- A “mass reset” of default browser types. For instance, setting
marginandpaddingto 0 on all components, turning off borders on framesets and pictures, and many others. - Aligning the kind to a constant baseline. This consists of issues like setting the margins on block degree components like paragraphs, headers, and lists to the identical worth as (or some a number of of) the bottom
line-heightsetting for the positioning. - Creating primary types for types.
- Creating a couple of CSS lessons I at all times use, comparable to
.cover(the place I set the show worth to none) and.mute(which I set to a smaller kind dimension and generally a lighter coloration).
There are extra attention-grabbing potentialities, too. Many internet designers discover themselves utilizing the identical primary grid construction time and again. Why not transfer it into its personal stylesheet and construction it in a approach that’s versatile sufficient for use on a number of websites? Yahoo has completed this, with their YUI grids part. Once we constructed our CSS framework on the Journal-World, we checked out Yahoo’s implementation first. We determined it wasn’t fairly what we wished, nevertheless it served as a pleasant purposeful instance and gave us plenty of concepts on the best way to assemble our personal. We settled on a 16-unit grid, which is versatile sufficient that we should always have the ability to apply it to each considered one of our properties’ websites, although each website appears and feels fairly a bit completely different from the following.
Additionally, most websites share widespread widgets, like drop-down menus, navigation tabs, buttons, and many others. These are prime candidates for abstraction, as effectively. Past that, you might have widespread content material show idioms, comparable to an inventory of photographs that seem as thumbnails. You may standardize on a CSS class title like “thumbnail-list,” so that each one it’s worthwhile to do is add that class to get your thumbnails working.
One other chance is to extract hacks and workarounds (comparable to those who accommodate older browsers) into their very own exterior stylesheet modules. I’ve tried this myself, however discovered that finally hacks and workarounds are usually too site-specific to tug out right into a generic framework. However your mileage might fluctuate.
What’s the true world profit?#section5
The true magnificence of getting a framework like that is getting off to a quick begin. You possibly can create a brand new (X)HMTL doc, embody your framework, and be off to the races with reset padding and margins, good typography, clear types, a structure grid, working widgets, and extra.
Clearly, although, you’ll need to customise the feel and appear for every website. To perform this, all you’ll have to do is overwrite and add to the default types as needed. For instance, in case your framework units up basic-looking horizontal navigation tabs for any ul with the category “tabs,” and they’re gray with a black border, you may simply customise them to match the feel and appear of your website with just some strains (Line wraps marked » —Ed.):
ul.tabs li {
border: none;
background-image: url('/photographs/tabs/ »
site-specific-tab-look.jpg');
} All of the work of floating the checklist objects the to the left and making the hyperlinks inside them show as blocks (additionally floated to the left) with the textual content centered within the center—advert nauseam—has already been completed for you. You’re left to give attention to what is exclusive and attention-grabbing in regards to the particular website you’re engaged on, relatively than writing the identical CSS you’ve written 1,000,000 occasions earlier than.
How ought to a CSS framework be constructed?#section6
There are a number of doable methods to go about constructing a framework, however the most typical and arguably probably the most helpful is to summary your widespread CSS into particular person stylesheets that every cowl a selected a part of the entire. For instance, you might have a stylesheet that units up the typography and one other that handles the mass reset. The fantastic thing about the strategy is the flexibility to selectively embody solely the types that you just want. It’s possible you’ll find yourself with six or seven completely different stylesheets in your framework, but when a selected challenge doesn’t want one or two of them, they don’t need to be included. The framework we created in our workplace has 5 stylesheets:
reset.css—handles the mass reset.kind.css—handles the typography.grid.css—handles the structure grid.widgets.css—handles widgets like tabs, drop-down menus, and “learn extra” buttons.base.css—consists of all the opposite stylesheets, in order that we solely have to name base.css from our (X)HTML paperwork to make use of all the framework.
We then retailer the framework in a single location and have each website pull it in from there. Then, in fact, there are additionally site-specific stylesheets for every website which overwrite and add to the framework’s default as needed.
This technique works fairly effectively, however there’s a legitimate concern to be raised: it provides to the variety of HTTP connections wanted to render every web page. On massive, high-traffic websites, including 5 extra HTTP connections to each web page view might end in offended system directors. Two doable options to this are:
- Embrace every thing in a single file, relatively than breaking it into modules. The issue right here is that you just lose the flexibility to incorporate solely sure components of the framework, and also you additionally make upkeep tougher.
- Have a server-side course of that dynamically flattens the person information right into a single response. I’ve not seen this completed, nevertheless it may very well be very environment friendly if completed effectively. Utilizing my instance framework above, this dynamic course of might happen when
base.cssis requested, however not whenkind.css,grids.css, and many others. are. This fashion, the person parts are nonetheless obtainable, however all the framework is obtainable in a flattened model, as effectively.
Ultimately, it’s necessary to take into account that the objective isn’t making issues as summary as doable with the intention to impress your mates. Somewhat, the objective is to get you off to a quick begin and make your design course of extra environment friendly. It’s positively doable to over do it. In case you summary an excessive amount of, issues begin to get complicated, and you find yourself hurting your web site’s efficiency with too many HTTP requests.
Bear in mind: a great framework ought to by no means make issues tougher or extra complicated than merely ranging from scratch.
The underside line is that we internet designers, similar to our pals within the programming world, are inclined to repeat ourselves usually. We discover ourselves resetting the browser default types, establishing a baseline grid and writing CSS for navigation tabs time and again—on virtually each challenge. Taking a little bit of day trip to summary a few of these idioms right into a framework you can make the most of on each website you construct will get you off to a sooner begin, make for simpler upkeep, and assist the opposite designers in your workforce perceive the selections you made. With a little bit of care, these advantages might be realized with out including bloat or hurting the efficiency of an internet site.