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 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
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.
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
Cheatography Bootstrap Cheat Sheet site
Bootstrap cheat sheet downloadable PDF
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 :
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!
Comments by Dave
Interactive Video and Audio
thank you Octavian appreciate it!