Bootstrap is a popular frontend framework for building responsive web app UIs. How much value do employers put on its usefulness? Evidently, quite a bit. The figure below from the jobs site indeed.com shows the exponential growth of Bootstrap over the past three years, with orders of magnitude domination over its competitor frameworks Skeleton and Zurb Foundation.
Bootstrap provides predefined HTML components, CSS styles, and supporting JS code. Examples of some of the functionality it provides are:
- Responsive grid layout for quickly templating headers, main content area, sidebars, and footers
- Navigation bars that collapse to dropdowns on small screen widths
- Pagination links having enabled/disabled states
- Form and Form Groups for normal, inline, and horizontal layouts.
- LESS CSS pre-processor support. LESS can be used to override Bootstrap CSS variables and mixins, making CSS maintenance faster and less error prone. For example, overriding the Bootstrap default link color with the @link-color variable in a LESS file will automatically change the link color in all CSS classes, saving you from having to repeate the value everywhere it's used in a custom CSS stylesheet.
Why Xiao Blog Engine uses Bootstrap
- Reusable components: The Bootstrap components can be treated as easily invoked boilerplate code. They offer a consistent naming convention and can be used independently on the same page without clobbering each other.
- Built-in responsive design: Breakpoints for different resolutions are baked into the code with media queries. At smaller resolutions, say tablet widths between 768 and 992px, the website's right sidebar will stack below the main content column, as you might expected.
- Easy extension/overriding: The DRY (don't repeat yourself) principle applies here. CSS properties can be set and applied globally by changing only one pre-processor variable. This makes experimenting with different color or layout schemes a rapid process.
- Well documented:
- Well Supported: the GitHub bootstrap project is an source code repository having issue tracking that is actively maintained.
What Bootstrap Features are used by Xiao Blog Engine
The main Bootstrap features that Xiao Blog uses are the responsive grid layout, LESS CSS pre-processing, and Forms/Form Groups. Many other miscellaneous are used but not covered here.
The header, main content, sidebar, and footer all use Bootstrap's row-column grid layout. All these elements are within the Bootstrap container, which is has a responsive width (default 1170px desktops) and is centered on the screen. The header and footer span the full 12 column grid, while the content and sidebar are 8 and 4 columns wide, respectively. Screens below 992px will render Xiao Blog with the navbar collapsed and the sidebar stacked below the main content column. An example of the responsive layout below widths of 992px is given in the featured image of this post.
The source code for Xiao Blog comes with a top-level less directory. This directory contains the Bootstrap default LESS files as well as the Xiao Blog custom
app.less file. The
app.less file defines the variables, mixins, and classes necessary build the Xiao Blog theme. You can change or extend the customization by editing the file, then running the following command:
The above command will process your changes, build the custom xiao-blog.css and xiao-blog.min.css files, and place the output in the public/css directory of the web application.
All Xiao Blog forms utilize the Bootstrap form and form group classes. Additionally, form pages take advantage of the Bootstrap alert helper classes so that error or success messages can be rendering with read or green colored backgrounds.
Xiao Blog exercises some the main features of Bootstrap. Why not checkout the source code from GitHub and experiment with it yourself?
git clone https://github.com/bobbrady/xiao-blog-engine.git npm install