Bootstrap

What is Bootstrap?

Wikipedia:
 

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.

Bootstrap is the second most-starred project on GitHub, with more than 107,000 stars and 48,000 forks.

How does it work with PyroCMS?

The PyroCMS works by defining in the background templates for web pages.  This includes some basic structure and theme which then has the page content from the Page Editor inserted at the appropriate place.  Support files for Bootstrap are always automatically included in every page.

Normally Bootstrap requires elements of a page to be coded directly in HTML to produce the required results.  The Page Editor in PyroCMS has now been amended to understand the Bootstrap layouts so that it can show the page structure as it will appear on the actual web page - just what you expect from a WYSIWYG editor!

Note:  The editor show by default, a series of grey boxes overlayed on the page that indicate the underlying code structure.  While this helps to understand that layout it can be toggled on/off using the "Show Blocks" editor button (See Page Editor) for a clearer view of the page.

 

What do I need to know?

Although the Page Editor will do most of the work for you, you need to have a basic understanding of how page layouts work with Bootstrap.  That doesn't mean you need to be fluent with HTML or other computer languages, just you understand the concept of the structure and then embrace "classes".  Any element in a web page can have a class or many classes associated with them.  The class contains a definition of attributes that should be applied to the HTML element.  This can be as simple as a colour, font size or a complex definition that makes a picture resize itself automatically.  The Page Editor will present a dialogue pop-up when creating most elements on a web page. In that dialogue there is an entry for the classes to be associated with the element. You simply need to know the names of a few classes and what their action will be.

 

Here you can see the dialogue for adding an image to the page.  Switching to the Advanced tab shows the Classes entry box.  This image has the class "img-responsive" which ensures the image size automatically adjusts to fit within any size of viewing screen. See Images for full image information.