Want your site to look good, even though you're not a designer? Try a design framework.
For as long as I can remember, I've known how to use a pencil. I can write with it, and I even can draw with it—although in my case, saying I can draw is something of a sad exaggeration. I might know how to use a pencil and thoroughly understand its technology, but that technical knowledge doesn't mean I can draw something aesthetically pleasing.
I mention this because I always think of my poor drawing abilities when I work with CSS. I understand the technology and have used it for many years. I'm comfortable working with and modifying stylesheets, and using complex selectors. And yet, any Web application that I create on my own looks ugly. Despite all of my technical knowledge of CSS, I'm generally unable to make a nicer, more pleasing design.
Fortunately for people like me, a new type of framework exists to help with such problems. Just as server-side frameworks like Ruby on Rails and Django make it easy to create Web applications, and client-side frameworks like Backbone.js and Knockout.js make it easy to create in-browser applications, design frameworks make it easy to decorate and design your applications.
Now, when I first heard about design frameworks (sometimes known as CSS frameworks), I wondered how they could possibly help. After all, I already know CSS; what could they contribute? The answer is: a great deal. By embracing a design framework, you gain a number of CSS classes and IDs that make it very easy to lay out your page. By choosing the right classes, you can make a site look more than reasonable, even if you have my graphic design skills. Using a design framework means that even if you don't have any design skills, you can make a site that looks fairly pleasing. If you do have design skills, the framework will allow you to do more with less effort.
In this article, I describe some of the leading design frameworks, leading up to the latest and most interesting one, Twitter's Bootstrap. In my next article, I'll look more closely at Bootstrap and why it has taken the world by storm.
The first design framework I'm aware of was (and is) Blueprint. The idea behind Blueprint is pretty simple. You download and refer to Blueprint's three CSS files: one for the screen, one for print and one with special definitions for Internet Explorer:
<link rel="stylesheet" href="css/blueprint/screen.css" ↪type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" ↪type="text/css" media="print"> <!--[if lt IE 8]> <link rel="stylesheet" href="css/blueprint/ie.css" ↪type="text/css" media="screen, projection"> <![endif]-->`
By including these stylesheets, Blueprint resets the CSS values for the user's browser, removing any defaults that might have been set elsewhere for margins, padding and borders.
Blueprint also resets the defaults for typography, ensuring that your headline and paragraph tags look better, and more consistent, than the defaults defined by each browser. Again, even without any additional effort on your part, Blueprint ensures that your typography is a bit more in line with established principles of design. As the Blueprint Web site says, these principles predated the Web and still are relevant in our electronic age.
The real magic of Blueprint, however, is in its layout. Blueprint offers a "grid layout", which in practical terms means it provides you with CSS classes that let you indicate how wide a particular element should be, from one column across to 24 columns across. Do you want to display two divs, side by side, with the left-hand div taking up two-thirds of the space? No problem—just define them as follows:
<div class="container"> <div class="span-16">This is the left-hand div</div> <div class="span-8 last">This is the right-hand div</div> </div>
By using these CSS classes, the divs automatically will take up the right amount of space on a user's screen. Moreover, because the content is inside a div named "container", the width of the screen (and of the divs) will adjust automatically according to the width of the user's browser window.
Before Blueprint, Web designers would do all this work themselves, implementing and re-implementing such columnar layouts on their own, specifically for each site. The advantage of Blueprint's 24-column grid is that you have enormous flexibility in the layout of your pages, letting each element extend across however many columns you think are appropriate. So long as the span-* classes add up to 24, and the final element on each row has the "last" class, the layout will look pretty good. This is far better, in every way, from what many people would do to ensure a certain layout, namely the use of tables. Tables are great, but not for laying out a page. I can't tell you how many times I've seen tables triple-nested inside other tables, just to get the layout to work appropriately.
Another advantage of Blueprint is that it has tried and tested these CSS definitions on a variety of browsers. You no longer need to worry about whether things will work on Chrome, Firefox, IE and Safari, because Blueprint has taken care of that for you. The special IE-only CSS file ensures that Internet Explorer also will work correctly, even if your users are running an old version.
Of course, because Blueprint is a bunch of CSS files, you always can change it to suit your needs. And indeed, much of the (extensive) Blueprint documentation describes how you can customize not only the layouts, but also the CSS itself.
The biggest criticism of Blueprint is that its class names violate the spirit of CSS. Sure, you can have classes named "span-5" and "span-10" to indicate that you want text to extend across five or ten columns of your 24-column layout. But, wasn't CSS supposed to free you from such calculations, allowing you to think more in terms of semantic names? My response is that, yes, this is a good point, but Blueprint's layouts are so useful and so easy to understand, it's unhelpful to focus on the original intent of CSS's designers.
Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.
Until recently, IBM’s Power Platform was looked upon as being the system that hosted IBM’s flavor of UNIX and proprietary operating system called IBM i. These servers often are found in medium-size businesses running ERP, CRM and financials for on-premise customers. By enabling the Power platform to run the Linux OS, IBM now has positioned Power to be the platform of choice for those already running Linux that are facing scalability issues, especially customers looking at analytics, big data or cloud computing.
￼Running Linux on IBM’s Power hardware offers some obvious benefits, including improved processing speed and memory bandwidth, inherent security, and simpler deployment and management. But if you look beyond the impressive architecture, you’ll also find an open ecosystem that has given rise to a strong, innovative community, as well as an inventory of system and network management applications that really help leverage the benefits offered by running Linux on Power.Get the Guide
|Fancy Tricks for Changing Numeric Base||May 29, 2016|
|Working with Command Arguments||May 28, 2016|
|Secure Desktops with Qubes: Installation||May 28, 2016|
|CentOS 6.8 Released||May 27, 2016|
|Secure Desktops with Qubes: Introduction||May 27, 2016|
|Chris Birchall's Re-Engineering Legacy Software (Manning Publications)||May 26, 2016|
- Tips for Optimizing Linux Memory Usage
- Working with Command Arguments
- Secure Desktops with Qubes: Introduction
- Download "Linux Management with Red Hat Satellite: Measuring Business Impact and ROI"
- Secure Desktops with Qubes: Installation
- Fancy Tricks for Changing Numeric Base
- CentOS 6.8 Released
- Linux Mint 18
- The Italian Army Switches to LibreOffice
- Chris Birchall's Re-Engineering Legacy Software (Manning Publications)