This post is part 55 of 92 in the series Programming by Stealth

In this instalment we’ll continue our exploration of Bootstrap, making a start on the second of the four main aspects of Bootstrap — content. This is the word the Bootstrap team have used to describe Bootstrap’s styling of regular HTML tags for things like headers, paragraphs, lists, tables, etc.. In the previous two instalments we looked at the first of the four aspects, the utility classes, and when we finish with the content aspect we’ll move in to look at the third aspect — layout.

It’s going to take us at least two instalments to look at Bootstrap content. We’ll make a start in this instalment by focusing on the most important classes related to the HTML elements Bootstrap’s documentation (somewhat confusingly IMO) bundles together under the sub-heading Typography (under Content). Specifically that means headings, paragraphs, block quotations, and lists.

You can download the ZIP file for this instalment here.

Read more

Tagged with:

This post is part 54 of 92 in the series Programming by Stealth

In the previous instalment we started our exploration of Bootstrap with a look at some of its commonly used utility CSS classes. We’ll finish that off in this instalment by looking at some more utility CSS classes. That will finish out our initial look at the utilities. We’ll then be ready to move on to the next major component of Bootstrap, the CSS libraries it provides for enhancing existing HTML content.

The ZIP file for this instalment can be downloaded here.

Read more

Tagged with:

This post is part 53 of 92 in the series Programming by Stealth

We’ll start this instalment with a very quick look at my sample solution to the previous instalment‘s challenge. Then, we’ll really get stuck into Bootstrap.

As we learned last time, Bootstrap can be thought of as consisting of four separate chunks of functionality — layout, content, components, and utilities. Because utilities are universally useful, that’s where we’ll be start our journey. In this instalment we’ll meet our first few Bootstrap utility CSS classes.

You can download the ZIP file for this instalment here.

Read more

Tagged with:

This post is part 52 of 92 in the series Programming by Stealth

In this first instalment back after our month-long hiatus we change tack completely, moving away from JavaScript altogether, and diving right back into HTML and CSS.

One of the golden rules of programming is not to waste your time needlessly re-inventing the wheel. This is the driving motivation behind the development of many open source libraries. The aim is to give programmers a leg up by providing pre-built foundations for them to build on. The best example of this approach we’ve seen so-far in this series is jQuery. Today, I’m going to introduce you to another one, Bootstrap.

Out of the box, all versions of HTML, even HTML 5, have some significant short-comings:

  • The default style is just plain ugly!
  • There are no simple tags for creating complex page layouts.
  • There are no simple tags for facilitating responsive design (same page displayed differently depending on screen resolution).
  • Some basic elements and behaviours common to many web pages are not provided.

Bootstap aims to solve all these shortcomings using a combination of mostly CSS combined with a little JavaScript.

Read more

Tagged with:

« go back