Portfolio

Carl James Trelfa

Bootstrap

Bootstrap is a useful technology for creating responsively designed web sites that are mobile-first.  It's a really handy framework with some cool features.

Responsive Design

The original design for the site uses a combination of PHP and Javascript to detect the device you are using and adjusts itself to work better on small screens. Responsive design is a different way of achieving the same effect.

We can use media queries in our CSS to enforce certain rules for different screen sizes. The template I made for v2 of this site (links below) will adjust on-the-fly if you resize the browser. The resulting web page is much more modern looking and light-weight for mobile devices. On the original design I actually detect the device in my .htaccess file and redirect to a different set of CSS files that are tailored to smaller or larger screens and with some PHP and JS I can make the site behave slightly differently - all of this is totally unnecessary with Bootstrap.

Responsive design is also possible without Bootstrap - I'm perfectly happy working with pure CSS3, HTML5 and JS to build a completely bespoke design if that's what is needed.

CSS Media Query Example

.indentedContentHolder {
    background: $mainColourLight;
    @include border-styling;
    border-width: 2px 2px 2px 2px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    @include box-shadow;
    border-top-right-radius: $outerBorderRadius;
}

@media only screen and (max-width: 991px) {
    .indentedContentHolder {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media only screen and (min-width: 992px) {
    .indentedContentHolder {
        padding-left: 25px;
        padding-right: 25px;
        margin-left: 25px;
        margin-right: 25px;
    }
}

The above media query changes the blue panel used throughout the site so the indent is reduced on smaller screens. The size used isn't just for mobile, but fits in with the sizes used by Bootstrap and reacts along with the rest of the page to make the indenting comfortable on smaller screen laptops as well.

The Design

I'm guessing you have noticed that I haven't updated the whole site to the new responsive design yet. The reason is because the old site has a lot of bespoke design elements that I wanted to keep as a demonstration of the kind of things that can be done and it also leaves me free to design some more templates in the future to practice other design principles.

Here's what the v2 template looks like:

When you open the template, resize the window to see the responsive design in action. Under a certain size, the indenting on the blue panels is reduces and smaller still, the nav bar will collapse and the header with change appearance.

This really is only scratching the surface of what is possible with Bootstrap - we could have a left-side navigation column that disappears when the screen is too small for example and it also has some handy stuff like carousels, jumbotrons, alerts, progress bars etc.

I'm thinking of expanding on the design when I finish working on the Laravel section as that will be a separate micro-site anyway so it's an ideal opportunity to use a different design template in a live setting.

Home > Technical Skills > Bootstrap