Bootstrap

Creating and editing your Bootstrap website

Before we begin…

A quick refresher on HTML:


Read this primer if you want a summary of HTML/CSS  file structure:

The following guide seeks to breakdown the process for building a website using Bootstrap. In it, you will learn how to mock up a prototype, structure your folders/files, manually edit CSS code, and upload your completed website.

Prototyping


First, we’ll build our core pages so that we have an idea of what the content will be and how it will be organized. For this, we’ll use a Bootstrap-based prototyping tool, Pingendo.

  1. Go to http://pingendo.com/ to download this prototyping application.
  2. After installing Pingendo, open it and create a new document.
  3. You’ll see a blank document, and:
    1. On the left side, a column with Sections and Components. Drag and drop into the blank page to visually organize elements. These are the core structure of your page, sections and places for content like text, headings, and images. Don’t forget that Bootstrap is organized in a grid to make it easy to keep track of content (grids also allow for responsive websites). Make sure that you are comfortable with the grid layout principles before adding content to your Boostrap page.
    2. On the right side column, you’ll see Page and Selection. These are for managing metadata (information about these elements). Use this to give your site a name that appears in bookmarks and on tabs. You can select an element and assign it to a class or ID for working with CSS. All elements of the same class will follow a consistent rule that you create in your stylesheet.
    3. In the centre you’ll see the sandbox area for dragging and dropping your elements. At the bottom here, you’ll see options to switch from HTML and Less/CSS view. This will show you the markup that your drag and drop creates, and you can add/change aspects of the code in here.
    4. At the top you’ll have options for quick save and edits such as bold and italic. You’ll also see options to preview your page from different types of screen.
  4. Organize and prototype your page and save it as index.html in a folder you create (call it MySite, or whatever you like, this will need to be in the main folder once you upload to the web).
  5. Repeat for all the subpages in your site.
    1. For example, if you have an About page, select all the code in the HTML tab (cmd/ctrl+A), open a new empty document, and paste into the HTML tab again. This will make a duplicate of your original page.
    2. Make your changes (your about page would be a bit different than your index, but would also have a lot of the same features) and save your document. Save it as About.html.

Note: Pingendo is a great tool for getting the general layout of your content, but you’re still going to need to go in and make changes yourself. Consider that any WYSIWYG (what you see is what you get) editor is going to have its quirks and bugs, and the best way is to always check the written code.

Setting up your files and folders


We’re going to be developing the site offline on our computer, so we can upload a mostly complete site when it’s ready to go live. It’s important to keep your files structured and organized as if they were going to be uploaded straight to the web.
Below is an example of how your site might be laid out:

http://sites.procomblogs.ca/ Username Your pages:

Index.html

About.html

Contact.html

etc.

Bootstrap files:

/css/

/fonts/

/js/

Note: since we are using the hosted version of boostrap via a CDN (Content Distribution Network), these folders won’t be necessary, but it’s important to locate your files here if you’d like to host/control boostrap in your website folder.
/Images/ logo.png

header-image.png

CEO-portrait.png, etc.

Note: your folders working on your computer should resemble the last two columns (highlighted in grey)

We advise that students stage (read: develop) their websites using Google Drive (follow this tutorial).

For steps on how to upload your final site from the Ryerson campus, check out this guide.

Adding your own CSS

Bootstrap will cover most of the complex styling you’ll need, but you’ll want to customize colours, fonts, sizing, and maybe override or resize an element that isn’t quite working.

For this we’ll create an additional stylesheet that will take priority over Bootstrap whenever the two conflict.

  1. Create a new document with TextWrangler and name it style.css – this will be our override stylesheet. Save it in the same folder as index.html and other root pages.
  2. Inside your pages, you’ll see code between <head> </head> tags. This is where we import fonts, stylesheets, javascript, etc. For example, if you were using Google Analytics, you’d paste the code they give you here.
  3. Find the “link” codes that include rel=”stylesheet” – this is how we import CSS files. Right now these will both point to CSS files hosted somewhere on the web.

    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet" type="text/css">
     <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
  4. We want to add a third <link> to a stylesheet, for one will will create ourselves:
<link href=”style.css” rel=”stylesheet” type=”text/css”>
  1. Note that instead of using a long url it’s just style.css. This only works if your stylesheet is in the same folder as the HTML file you’re adding this to. If you’ve got your stylesheet in a folder (ie. MySite/Style/style.css) then make sure to include a proper link: href=”/Mysite/Style/style.css” that accounts for the folder structure.
  2. Repeat this for each page in your site. You will need to link to your stylesheet in the <head> of all your pages.

Tips for editing content and CSS

Text editor

All the ProCom machines have TextWrangler, a great and simple text editing program to modify code. There are a number of other great platforms if you’re on your own machine or running windows. Adobe Brackets and SublimeText or NotePad++ are all great options.

NEVER use Microsoft Word, Pages, or Google Docs for web development. They are rich text formats with extra hidden code that will mess up your site.

Inspect element

Available on Chrome (right click on anything in a page and choose inspect element), this is your best friend for playing around with and learning CSS. Find sites you like, inspect the elements, and play around with them. You can make and preview live changes in your browser to get a feel for how things look before committing to them.

For Mozilla Firefox users, Firebug is a powerful addon to help you develop sites.

CSS reference

Bookmark http://www.w3schools.com/cssref/default.asp. This is the ultimate reference guide for CSS, and you can look at any property and see what the options available are.

Overriding Bootstrap styles

!important is extremely useful if you’re trying to change CSS and it’s not showing up. Sometimes, you need to force your browser to prioritize your styling. This goes inline with the CSS before the semicolon that closes it.

Example: h1 {color:#fff;} becomes h1 {color:#fff!important;}

Bootstrap Tutorial

The following tutorial documents how you can implement the above steps (everything from folder structure to CSS customization): http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp.

Additional Resources

About Bootstrap and all its elements: http://getbootstrap.com/css/. What do they do? Why are 4,000 lines of code already there!?