Category: Feature

Bootstrap Web App Design for Xiao Blog Engine

Tags: Bootstrap 3 Feature Grid Layout Responsive Ui

Bootstrap Web App Design for Xiao Blog Engine

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 comparison: vs. Foundation vs. Skeleton.

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:
    • Bootstrap has lengthy doc pages with example code excerpts in each of three areas: CSS, JS, and Components
    • Over 100,000 Stackoverflow conversations on the topic. If you get stuck, chances are you'll find somebody else has solved the problem and published the solution online.
  • 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:

    grunt dist-css

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.

Next Steps

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

Welcome

Welcome to the Xiao Blog engine website. Take a look around to find out how Xiao Blog can help you quickly get your blog up and running. Check out the code and use the Feature posts to walk through your own Node JS Express tutorial.

Connect with Us
Feature Posts
Xiao Blog Engine Markdown Editor

Category: Feature

Node.js MVC Example Implementation with Xiao Blog Engine

Category: Feature

The Markdown Editor: Markdown-to-HTML for Blog Posts

Category: Feature

Bootstrap Web App Design for Xiao Blog Engine

Category: Feature

Disqus Comment System Node.js Integration