5个真正有效的CSS Boilerplates(样板)和框架

Bootstrap

Bootstrap, like most frameworks, provides the means to organize your website with a nice appearance that draws in the viewer. It relies on a 12-column responsive grid system that resizes to meet various requirements. Bootstrap’s attention is on presentation: to create something appealing with little work on the developer’s part. With this goal in mind, Bootstrap includes items such as themes, navbars, jumbotrons, and visual grids. (If you find these terms confusing, make sure you check out the well-designed Bootstrap examples.)

Yes, you can use other packages with Bootstrap, such as jQuery, but the emphasis is on making things simple, rather than flexible. That makes it ideal for a developer who needs to produce results quickly, but who lacks design experience. It is meant as a one-stop solution for quick and presentable (albeit somewhat simple) results.

I reviewed the 3.1.1 version of Boostrap, which is actually quite different from earlier versions I tried. Every version brings some major changes and this version includes a Content Delivery Network (CDN) option that makes Bootstrap incredibly easy to use. Instead of having to download a whole bunch of code, you simply include these three links to use Bootstrap in your application.

<!– Latest compiled and minified CSS –>
<link rel=”stylesheet”
      href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”> <!– Optional theme –>
<link rel=”stylesheet”
      href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css”> <!– Latest compiled and minified JavaScript –>
<script src=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js”></script>

Bootstrap is designed to work equally well on both desktop and mobile devices. In fact, you deliberately have to disable the functionality that resizes content for smaller displays. However, unless you really want to make your site look old fashioned and less useful, you probably want to keep Bootstrap’s native functionality in place.

Don’t get the idea that Bootstrap forces you to use a limited number of layouts and special features. It’s actually quite flexible. If you’re willing to download a copy of Bootstrap, rather than use the CDN version, you can even customize your setup to meet certain goals using the Customizer. The Customizer page makes quite a few options available, including the selection of colors, fonts, and other layout variables, so that you can control the appearance of your site. So, you can choose to use Bootstrap to create what appears to be a unique site without a lot of hassle.

Type: Framework

Demo: http://getbootstrap.com/getting-started/#examples

Download: http://getbootstrap.com/

Documentation: http://getbootstrap.com/getting-started/

Foundation

Foundation has the most to offer, among the frameworks and boilerplates I discuss here. Foundation is a full-fledged framework environment complete with a host of tools, documentation, examples, and even videos. In fact, there really isn’t any way to do this particular package justice in a short overview; I’m quite impressed.

That said, with functionality comes complexity. Foundation is also the most complex package in this article. It offers a lot, which means it takes a while to learn. Fortunately, Foundation also enjoys a level of community support few other products can offer. An entire page is devoted to Foundation tools developed by third parties.

Foundation has full support for browser-based application development, including controls for forms and responsive design. You also get special effects, such as Off Canvas, a menu system where the menu resides outside the viewport until needed, when it slides into place so the user can see it.

As with many full-featured products, Foundation supports CDN so that you don’t actually have to download it. To access Foundation from your browser-based applications, you include links for the CSS and JavaScript like this:

<link rel="stylesheet"        href="http://cdn.foundation5.zurb.com/foundation.css">  <script src="http://cdn.foundation5.zurb.com/foundation.js"></script>

Type: Framework

Demo: http://foundation.zurb.com/learn/website-examples.html

Download: http://foundation.zurb.com/develop/download.html

Documentation: http://foundation.zurb.com/docs

Goldilocks

The product name should give you some idea of the approach it takes: a middle-ground view of browser-based application development. The vendor describes it as a best practices approach and that’s really an honest way to look at this product. Goldilocks relies on four measures: ems, max-width, media queries, and pattern translations to provide three levels of resolution for your site pages (full column, narrow column, and single column). The concept is to make the design device-independent so that it can adapt to devices that aren’t even on the market yet. Whether Goldilocks can actually meet that goal remains to be seen; hardware vendors are always coming up with something that throws a monkey wrench into the best software designs.

Unlike many competitors, Goldilocks doesn’t rely on a grid; it relies on resizing the content to meet specific device needs. It’s hard to label, too. In some respects, Goldilocks could be considered a kind of framework in that it doesn’t provide elements such as controls, forms, or other items that you can use to build a site. On the other hand, it also lacks the flexibility and the customization that are offered by true frameworks. What Goldilocks really provides is the responsive design element found in other boilerplate products, such as Skeleton (reviewed later in this article). In short, this is just part of a solution—albeit an incredibly important part of the solution considering the need to accommodate so many different device types in today’s market.

Type: Boilerplate

Demo: http://goldilocksapproach.com/demo/

Download: http://goldilocksapproach.com/

Documentation: Provided with the download.

Less Framework

The Less Framework provides an adaptive fixed width grid system that outputs pages in four sizes: 992px, 768px, 480px, and 320px for devices with various-sized displays. The use of fixed-width grids means that your page looks the same on a particular device class, even if there are differences in the actual display area. A fixed-width grid makes it easier to create presentations where each element must present itself at a specific size in order to look nice.

The lack of CDN support means that you must download the framework to your server and use it there. In addition, this framework is designed to make creating a page fast, rather than easy. To use it properly, you need a knowledge of CSS because it has little hand holding and few support tools.

However, because the Less Framework is less intrusive than others reviewed in this article, it also means that you have a great deal of flexibility. Think of it as providing a basic structure on which you can add any specialization elements you need in order to create a unique presentation.

Of the frameworks I reviewed, this is least likely to break when used with older browsers. It simply scales itself back to use whatever functionality the Web browser can provide. So, if your site is visited by people who haven’t updated their browser in years (and have no intention of doing so now) the Less Framework may provide just what you were looking for.

Type: Framework

Demo: http://lessframework.com/#how

Download: https://github.com/jonikorpi/Less-Framework

Documentation: Provided with the download.

Skeleton

Making browser-based applications work on both desktop computers and mobile devices (and everything in-between) is important because business users rely on a wide range of devices to perform work. However, it’s not just a matter of getting the application to work, but also a matter of making it look nice on every device. In addition, the application must present a compatible appearance across all devices so that an organization won’t incur additional training costs.

The main purpose of Skeleton is to provide a number of controls and other display elements that look and work similarly across all devices. It consists of a number of pre-coded items that you plug into your application to accomplish specific tasks.

You can combine Skeleton with other software to create an interesting and usable interface for any browser-based application. For example, if your framework lacks a grid system, Skeleton can help you add one to your application. Grids make it a lot easier to create applications that scale to differing display sizes.

I think it more likely that you’ll use Skeleton’s other features. You can use it to control typography, add buttons and forms, and perform media queries. The media query feature is probably the most important: It does a great job of telling you the capabilities of the host device so that you can modify your application appearance as needed.

Unfortunately, you must actually download this product to use it—there is no CDN option (as you would get from something like jQuery). I found Skeleton easier to use, but a little less capable than products such as jQuery. It does offer a broad range of device support that includes:

• Chrome (newer versions on Mac/PC)
• Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
• Safari (newer versions)
• Internet Explorer versions: IE9, IE8, IE7
• iPhone (Retina)
• Droid (Charge/Original)
• iPad

Type: Boilerplate

Demo: http://www.getskeleton.com/#examples

Download: http://www.getskeleton.com/#download

Documentation: Provided with the download.