Building a single page theme with WordPress and Bootstrap

Reference


Bootstrap

getbootstrap.com The bootstrap home site.
fontawesome.io The creators of the bootstrap font and glyph icons
Download The Source Package  to get the framework files plus examples and documentation.

Find examples in the source package in the /docs/examples folder :

bootstrap_examples

 


Bootstrap Themes, Templates and Starter Kits

These terms are used interchangeably and generally describe a pre-configured bootstrap CSS and HTML files available for you to download. The Themes/Templates/Kits can  include modified CSS, HTML templates, or both.

 

Flat UI Provides a standard bootstrap CSS file with custom colours and icons. The Kit provides a revised colour palette and typography over the default bootstrap theme but no HTML  layouts.

 

Start Bootstrap Provids a number of A bare bones HTML layouts  with a  grid setup in a particular way. Uses the standard Bootstrap CSS unchanged.

 

bootswach.com   and getbootstrap.com Provide  a complete set of css and layouts with images and other assets for a specific website design.

 


Bootstrap Customisers / Theme Generators

Customisers are online User interfaces  for modifying a basic bootstrap theme. You can then generate a customised version of the standard bootstrap CSS with your very own settings.

getbootstrap.com customiser

bootstrap-magic

style bootstrap.info

customising-bootstrap Smashing Magazine tutorial provides a guide.


Online Editors

Online Sandbox Tools provide  an in-browser CSS/HTML and Javascript editor that instantly renders the code you write in a separate window. They have bootstrap baked in so you can write CSS with bootstrap classes and see the results instantly.  It allows you to mess around with HTML and CSS ideas to try things out without having to wire all the files up on your desktop and use your editor. Also community contributed solutions and scripts are all there for you to browse.

Boot ply

sassmeister.com

codepen.io.

bootsnipp.com

 


Desktop Apps and Editors

Bootstrap Studio is a Desktop app that allows you to create bootstrap layouts using a drag and drop interface.

See Koala SASS compiler also..

 


Bootstrap Cheat Sheets

Bootstrap 4 Cheat Sheet site

Cheatography Bootstrap Cheat Sheet site

Bootstrap cheat sheet downloadable PDF

fontawesome cheatsheet


Bootstrap Grid Basics

Specify the number of columns you want using the following structure :

.col-[collapse breakpoint type] – [number of columns]

collapse breakpoint types allow you to specify the breakpoint at which your columns will collapse i.e. start stacking on top of each other.

xs:  Grid never collapses (or collapses at less than 544 – not sure!)
sm : Grid Collapses when screen width is less than 768px
md : Grid Collapses when screen width is less than 992px
lg   : Grid Collapses when screen width is less than 1200px
xl : Grid Always collapses.

e.g.

.co-md-4  gives you four boxes that will stay horizontally aligned until the screen size is reduced to less than 992px. Then, the boxes will  stack underneath each other.

Bootstrap Grid Reference  : getbootsrap.com

Bootstrap Grid Nesting  : best practices for nesting grids on getbootstap.com

Bootstrap Grid Explained  : tutorial explaining grid classes on w3schools.com

Understanding Bootstrap’s Grid System  : tutorial explaining grid classes on sitepoint.com

# Media Query Break Points on scotch.io

# Different Grid Columns at Different Device Sizes  on scotch.io describes how you can get a whole extra level of control out of your grid breakpoints.


Responsive Visibility

in addition to the grid responsiveness above special classes can be applied to show and hide content.

Responsive utilities : list of classes that will hide / show at breakpoints on get bootstrap.com


Responsive Text

Bootstrap does not have built in functionality to responsively rescale text. You have to roll your own :

example on bootply


Bootstrap and SASS

Bootstrap employs SASS to make it easier to modify styles quickly. SASS is the same as CSS – with extra commands that make it easier to handle and edit giant CSS stacks like bootstrap. Browsers don’t know what the hell SASS is, so you need to convert SASS to CSS before your browser gets it. This is done with a “Precomiler” app that translates the code. This does not happen ‘on the fly’ like PHP – there is no “SASS Server” on your web server. You have to do this step manually. It’s like saving a PSD file as a JPG before using the image in your web page.

sass-lang.com Official SASS site.

Converting  SASS to CSS  is known as ‘precompiling’ or sometimes ‘transpiling’ and is achieved  using a UNIX command line script (preferred by developers) ,  or a Desktop Application (Designers) or an online tool (good for testing every now and again).

Koala Desktop App


Bootstrap and WordPress  Navigation

Bootstrap can be used with wordpress, but needs a customised piece of code to get the bootstrap navigation bar playing nicely with the wordpress menu system.

wp-bootstrap-navwalker Source code

How to Make Bootstrap Navigation Work with WordPress Tutorial


Bootstrap CDN

A CDN (content delivery network) provides a public url for serving bootstrap css and js files, so you don’t have to. Great as it reduces bandwidth from your host AND faster as your client will download bootstrap from the CDN in parallel (simultaneously) with the HTML and assets from your host. CDN FTW!

www.bootstrapcdn.com