Building Bootstrap From Source

As I redesigned my site, kyledinh.com, I decided to write a custom template this time instead of using one from https://wrapbootstrap.com. They have a lot of great themes for sale, and some I’ve used for clients to great success. But for my taste, the themes came with too many unneccessary Javascript widget and animation. I ended paring down and eliminating. So this go around, I decided to build a responsive Bootstrap theme from the source.

I used the Less Source from http://getbootstrap.com/getting-started. It requires NPM, Grunt and Less to compile.

Setup

• Edit the package.json to your project settings
• Edit less/variables.less
• Add less/custom.less for my custom css
• Edit less/bootstrap.less to add an import directive
• You can see how this is mapped in Gruntfile.js . To compile, use the grunt dist command and your output will be in the dist/ directory.

less: {
   compileCore: {
     options: {
       strictMath: true,
       sourceMap: true,
       outputSourceFiles: true,
       sourceMapURL: '<%= pkg.name %>.css.map',
       sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
     },
     src: 'less/bootstrap.less',
     dest: 'dist/css/<%= pkg.name %>.css'
   },
   compileTheme: {
     options: {
       strictMath: true,
       sourceMap: true,
       outputSourceFiles: true,
       sourceMapURL: '<%= pkg.name %>-theme.css.map',
       sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
     },
     src: 'less/theme.less',
     dest: 'dist/css/<%= pkg.name %>-theme.css'
   }
},       

// CSS distribution task.
grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'autoprefixer:theme', 'usebanner', 'csscomb:dist', 'cssmin:minifyCore', 'cssmin:minifyTheme']);

// Full distribution task.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'copy:html', 'copy:img', 'dist-js']);     

In the less/variables.less, I included the imports for the Google Fonts and set variable for their font-family names. For a color palette, I created a few new variables, then reference those through this file and custom.less. There’s setting for shades of grays, but I was happy with the defaults..

//== Colors
//            
@color-primary: #a2b69a;       // 162, 182, 154 taupe
@color-secondary: #8e8055;     // 142, 128, 85  olive
@color-tertiary: #aacba2;      // 170, 203, 162 green-blue
@color-quaternary: #000;       //
@color-quintary: #000;         //
@color-accent: #ff4000;        // orange
@color-highlite: #f3e7ba;      // 243, 231, 186 cream

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#428bca, 6.5%);
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

The Less system is very well organized and it was easy to edit and customize the styles. I stuck to simple layout of containing content into section tags and created a simple and responsive template. It was quite a pleasure to work with.

You can see my color palette as the 4 squares (swatches) next to the website logo. As I change the colors in the variables.less file. It would update in the CSS.

div#swatches div {
  float: left;
  width: 10px;
  height: 10px;
}

div#swatches div:nth-child(1) { background-color: @color-accent; }
div#swatches div:nth-child(2) { background-color: @color-primary; }
div#swatches div:nth-child(3) { background-color: @color-secondary; }
div#swatches div:nth-child(4) { background-color: @color-tertiary; }