Twitter Bootstrap, HTML5 Boilerplate, 52Framework, and 320 and Up take the sting out of building websites for both large and small screens
Originally developed by Twitter as a framework for its own GUI, Bootstrap has been released as an open source project under the Apache License 2.0. Its success, and value, is reflected in the sheer number of sites that have made use of it (the developers maintain a gallery of "Bootstrapped" sites), as well as the galaxy of third-party themes and templates built with and on top of it.
Bootstrap's basic page layout is a 12-column grid, 940 pixels wide by default; all widths are adjustable properties. Elements can be defined by how many columns they take up by default, but can also respond dynamically as the browser is resized. Narrow the browser window or launch a Bootstrapped site on your phone, and everything reformats itself to fit.
The default top bar, for instance, normally contains space for menu elements. Narrow the viewport and those elements are hidden from sight, but can be revealed with a click. For further tweaking, Bootstrap provides CSS classes such as
.visible-desktop to allow elements to hide or be revealed when your site is opened on different devices and at different screen resolutions. Bootstrap can take advantage of the
@media attribute in CSS for further formatting hints as well.
A big part of Bootstrap's appeal is the number of commonly used UI elements that are already defined in the framework: buttons and toolbars, alerts, progress bars, typography controls, and so on. It's a great timesaver. You don't have to build them from scratch or even expend the effort to make them look consistent.
Most of those UI elements are easy to implement since they're just variants of existing HTML elements. Drop-down navigations, for instance, are nothing more than items in an unordered list (the
<UL> tag) with class markup and one or two custom attributes. This means you can use many stock HTML editing environments (such as Dreamweaver) to produce Bootstrap templates without too much trouble.
Bootstrap is built around a few open source third-party components you might already be using. Most prominent is LESS, a stylesheet-extension system for CSS that allows the use of variables, rule nesting, and a number of other powerful features not available in vanilla CSS. Also noteworthy is a slew of plug-ins that use the ever-popular jQuery to add functionality like content carousels, advanced button behaviors, type-to-search functions, and many more.
There are a number of ways to get started with Bootstrap. You can download a full package that contains all the components and some demonstration pages, which can be customized by hand as needed. You can also download a custom Bootstrap package that contains only the pieces you need, if you're trying to keep things slender. And if you're a programmer looking to extend Bootstrap under the hood, you can fork a copy of the project from GitHub and work on it that way.
This weekend's Windows 10 upgrade has users angry, and it's unclear if the ploy will continue
Here’s the best of the best for Windows 10. Sometimes good things come in free packages
Speaking at the O'Reilly Fluent conference, Eich also endorsed the Service Workers mobile app...
Spoiler alert: There probably isn't. But that shouldn't cause anyone to panic aside from Wall Street...
Oracle says Java EE 8 will be equipped for cloud deployments, microservices, containers, and...
IoT will soon permeate every aspect of our lives -- the very definition of sprawl. How will we derive...
Git was made for distributed teams, but long distances introduce special challenges