The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Jul
28
PBS 59 of X — More Bootstrap Breakpoints
Filed Under Software Development, Computers & Tech | Leave a Comment
In the previous instalment we met the bootstrap breakpoints. We learned that Bootstrap is mobile-first, so it has an implicit breakpoint of extra small (xs), followed by small (sm), medium (md), large (lg), and extra-large (xl). The sizes refer to the width of the window the page is being displayed in, AKA, the viewport. We used these breakpoints to interact with the Bootstrap grid (see instalment 57), allowing us to specify different layouts for different viewport widths.
The important points to remember are that breakpoints apply to a given viewport width, and greater, and that larger breakpoints override smaller ones.
Bootstrap does not just use breakpoints within the grid though. Some of the Bootstrap utility and content classes also have breakpoint support. In this instalment we’ll circle back and re-visit some of these. Note that only some utility and content classes have breakpoint support, not most, let alone all.
You can Download this instalment’s ZIP file here.
Jul
14
PBS 58 of X — Bootstrap Breakpoints
Filed Under Software Development, Computers & Tech | 3 Comments
We’ve now been introduced to two and a half of the four aspects of the Bootstrap web API. We’ve had our first look at the Bootstrap CSS utility classes, we’ve also looked at many of the CSS classes Bootstrap provides for styling standard HTML elements (content in Bootstrap jargon), and we’re now about half way through our look at Bootstrap’s layout CSS classes. So far in terms of layout we’ve met the Bootstrap grid and learned about how it breaks your page into container that contain rows that contain columns, and how column widths are expressed as twelfths of the container width. In this instalment we’ll take our first look at Bootstrap’s support for responsive design by looking at how the Bootstrap grid layouts can be altered depending on the viewport width.
There’re more to Bootstrap’s support for responsive design than just the grid, so in the next instalment we’ll look back a little and discover that many of the bootstrap utilities and content classes also support responsive design. After that we’ll be ready to move on to the fourth and final aspect of Bootstrap, its collection of non-standard but commonly needed HTML elements, or components in Bootstrap jargon.
You can Download this instalment’s ZIP file here.
Jun
30
As we’ve learned in previous instalments, there are four distinct aspects to Bootstrap, a collection of utility CSS classes, a collection of styles for controlling built-in HTML elements like headers, figures, images, and tables (which Bootstrap refers to as content), page layout functionality, and a collection of re-usable components that don’t exist in native HTML. We started by looking at the utilities, then moved on to styling the standard HTML elements, and now we’re ready for our first look at layout.
Bootstrap’s layout functionality is designed from the ground up to be responsive, that is to say, to allow you to control the layout of a page differently depending on the size of the viewport. For example, you can create a single layout that shows as a simple single column when viewed on a small phone screen, two columns on a tablet, and three on a device with a larger screen.
Going from zero to responsive design would be a big leap, so we’re going to break it down into two distinct parts. In this instalment we’re going to confine ourselves to creating layouts that work on larger screen devices like desktops, laptops, and large tablets. Once we can lay things out at one size, then we’ll add in responsiveness in the following instalment.
You can download this instalment’s ZIP file here.
Jun
16
PBS 56 of X — More Bootstrap Content
Filed Under Software Development, Computers & Tech | 1 Comment
In the previous instalment we got our first look at the functionality the Bootstrap documentation groups together under the heading Content. These are opt-in additional styles for standard HTML elements. Last time we looked at headings, paragraphs, quotations and lists. This time we’ll finish our overview of this aspect of Bootstrap with a look at styling images, figures, and tables.
In the next instalment we’ll move on to the most powerful aspect of Bootstrap, layout. This will take us a few instalments to cover, but when we’re done we’ll have learned how to use Bootstrap to arrange content on a page, and, better yet, to make our layouts responsive. That is to say, we’ll learn how to use Bootstrap to make our pages look right on any screen, from the smallest phone to the largest desktop!
You can download this instalment’s ZIP file here.
Jun
2
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.
May
19
PBS 54 of X — More Bootstrap Utilities
Filed Under Software Development, Computers & Tech | 1 Comment
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.
May
5
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.
Mar
31
PBS 52 of X — Introducing Bootstrap 4
Filed Under Software Development, Computers & Tech | 1 Comment
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.
Mar
3
PBS 51 of x — Cellular Automata Wrap-up
Filed Under Software Development, Computers & Tech | 1 Comment
This instalment will be the last before we go on hiatus for a few weeks while Allison goes off exploring Europe. When Allison comes back we’ll be changing gears and switching for focusing on JavaScript to focusing on HTML and CSS. We’ll learn about the free and open source Bootstrap 4 CSS library. This library provides many useful features, but we’ll start simple. Firstly, the library providers modern and elegant default styles for all the HTML elements we already know and love. It also provides a handful of simple CSS classes for defining page layouts (columns, rows, that kind of thing), and thirdly, it provides simple CSS classes for creating so-called responsive web pages, i.e. pages who’s layout changes automatically depending on screen size.
As this is the last instalment before the hiatus we’ll use it to wrap up our work on the Cellular Automata prototypes. We’ll start with a sample solution to the challenge from the previous instalment, and finish with a worked example where we use our prototypes to create three distinct CAs.
The final code for the worked example is included in this instalment’s ZIP file which you can download here.
Feb
18
PBS 50 of x — A Worked Example (Object Explorer)
Filed Under Software Development, Computers & Tech | 1 Comment
In this very special 50th instalment I share my screen with Allison and we build up a simple web app together. We start with the scariest thing of all, a blank screen, and take it from there.
The web app we build up together is an object visualiser. Our simple web app consists of a text area into which we can enter JavaScript code to define an object, a <div> into which we will render a representation of the object, and a button to trigger the rendering.
Using a Screen Reader? click here.
Just about everything we use in this little exercise is revision, with one exception — we meet JavaScript’s eval() function for the first time. The eval() function takes as an argument a string, and executes it as JavaScript code. For more details, see the MDN documentation.
You can download the final code here.