Navbars and Icons
The "img" directory contains two images: one for all of the white-on-black icons that Bootstrap provides and another for all of the black-on-white versions of those same icons. The icons are all on one image, because they take advantage of CSS sprites, a technique that makes it possible for your browser to download a single image and then selectively display parts of that image independently. Thus, if you have a download link on your site and you want to have a download icon, you can add:
<p> Now, here's the thing you might notice about the icons: they're using the <i> tag, which normally is for italics. But, the text that accompanies the icon doesn't go inside the tag. Rather, it goes next to the tag. The only reason for <i> is that it allows CSS to pull up a sprite as the background image. The icons are a great start for many of the things you'll want on a site. </p>
I've been doing Web development for a while and thought I had seen rapid adoption of technologies before. But, Twitter Bootstrap has beaten them all from what I can tell. It's popular, of very high quality, adheres to standards, works across platforms and languages, and is easy to use.
The only negative I can think of is fairly minor—namely that it uses LESS rather than SCSS, which means that integration is a tiny bit more complex with Ruby on Rails. But, even that integration is a no-brainer. Ruby gems exist that solve this problem in a number of different ways.
I've adopted Bootstrap in my own work and expect to adopt it on future projects as well. Bootstrap doesn't solve all the problems with CSS, but it solves so many of them and makes them so accessible, that it allows even someone like me to create an attractive site. And, after years of having to give excuses when my simple, prototype sites didn't look very attractive, I now have a way to ensure that they'll at least be minimally aesthetically pleasing.
The home page for Twitter Bootstrap on GitHub is http://twitter.github.com/bootstrap. The documentation as well as numerous links to examples are there.
More information about LESS is at http://lesscss.org. Full documentation as well as program binaries are available there.
If you're interested in using Bootstrap with Rails, I suggest watching the "Railscast" screencast on the subject, which both introduces Bootstrap and demonstrates how to integrate it with a Rails application: http://railscasts.com/episodes/328-twitter-bootstrap-basics.
Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.
Webinar: 8 Signs You’re Beyond Cron
On Demand NOW
Join Linux Journal and Pat Cameron, Director of Automation Technology at HelpSystems, as they discuss the eight primary advantages of moving beyond cron job scheduling. In this webinar, you’ll learn about integrating cron with an enterprise scheduler.View Now!
Web Development News
|New Linux Based OS Brings Internet of Things Closer to Reality||May 27, 2015|
|Non-Linux FOSS: All the Bitcoin, None of the Bloat||May 26, 2015|
|Dr Hjkl on the Command Line||May 21, 2015|
|Initializing and Managing Services in Linux: Past, Present and Future||May 20, 2015|
|Goodbye, Pi. Hello, C.H.I.P.||May 18, 2015|
|Using Hiera with Puppet||May 14, 2015|
- New Linux Based OS Brings Internet of Things Closer to Reality
- Dr Hjkl on the Command Line
- Initializing and Managing Services in Linux: Past, Present and Future
- Non-Linux FOSS: All the Bitcoin, None of the Bloat
- Using Hiera with Puppet
- Goodbye, Pi. Hello, C.H.I.P.
- Gartner Dubs DivvyCloud Cool Cloud Management Vendor
- Infinite BusyBox with systemd
- It's Easier to Ask Forgiveness...
- Urgent Kernel Patch for Ubuntu