Interface Design

WK3: Web Frameworks + Grids + Web Publishing

Frameworks + Boilerplates

Up until now you have been designing and developing sites entirely from scratch. But a number of tools exist that are intended to help you set up the basics of your site without hassle. These tools aren’t always appropriate, depending on what you want to achieve in a particular site design, but they can be useful in a lot of contexts as well.

Boilerplate code is code that can be reused over and over in different contexts. In web development, boilerplate code is essentially a template or starting point that makes it easier to start building your own sites.

HTML5 Boilerplate

“HTML5 Boilerplate is a professional front-end template that helps you build fast, robust, adaptable and future-proof websites. Spend more time developing and less time reinventing the wheel.”

HTML5 Boilerplate contains files that help you easily create websites that will work across different browsers and devices seamlessly, without requiring you to do a lot of work. It contains a CSS file (called normalize.css) that attempts to make styles apply more consistently across different browser types, as well as commonly used Javascript libraries, jQuery and Modernizr. The result is that a site designed with HTML5 boilerplate at its core will give the developer easier access to common tools and already includes many commonly applied CSS styles and fixes.

Checkout HTML5 Boilerplate

Grid Frameworks

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. A grid system is a grid design which has been designed in such a way that it can be applied to several different uses without altering it’s form. An example of this would be a grid system for a book whereby you have many different page types – part-opening, title, half-title etc. – and would need only one grid to use on all the page types.

– Mark Boulton, Five Simple Steps to Designing Grid Systems

Grid based designs provide a clear structure for organising content and creating cohesive designs. Using grids to layout design elements goes back to far before the web, but recently a number of frameworks have been created to make it easier to apply grid-based layouts to web pages.

A fluid grid uses percentages rather than fixed widths so can form a part of responsive design.

Some History Of Grid Systems

960 Grid System

An older popular grid system. It is based on a standard layout width of 960 pixels which is a nice number that would fit would fit on all desktop screens (as they all generally used to be around 1024px wide) and is very flexible in terms of factors (mathematics-wise). It isn’t dynamic but is only suited to quickly creating desktop websites.

Unsemantic

The successor to the 960 grid system. Instead of using fixed pixel widths, it uses percentages to define layout elements. It does use pixels to define margins, however.
Unsemantic is used by including their CSS file and then adding unsemantic classes to your objects.

It includes media queries for mobile devices so you can easily change the layout of your site between desktop and mobile.

Twitter Bootstrap

Front-end web design framework, with a focus on making it easy to implement various user interface components. This makes it very useful for rapid prototyping. It also contains a grid system to make it easy to lay out content.

Bootstrap is implemented through the use of CSS classes that are applied to HTML elements and uses media queries and floats to create a very consistent grid system. However, like most grid systems, the breakpoints are predefined based on common device widths.

Most UI elements are automatically styled in bootstrap – meaning you can quickly create a polished looking website, but if you want to apply your own aesthetic style you have to edit and override many of Bootstrap’s existing styles. What does this mean in terms of the worth of Bootstrap? Remember, every line of code you add to your website, including frameworks such as Bootstrap, is extra data and likely another resource a user has to download. This can add a lot of bloat to your site for little return, and the problem is even greater if you’re adding all these styles for buttons and components and then you have to add your own code to override these styles.

Some other interesting links regarding creating responsive layouts and grids with floats

Modern Grids – Welcome to Flexbox

Grids and layouts used to be pretty painful things to produce with CSS. Nowadays, CSS3 provides us with awesome tools to make creating layouts easy. Welcome to flexbox! Flexbox is a powerful new feature of CSS that gives designers and developers a much more robust set of tools to align, justify, and wrap elements/content to create much more robust and dynamic layouts than was previously possible (at least without some hacking, or at time, using Javascript!).

More specifically…

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

– Mozilla Developer Network

To understand what’s possible with flexbox, let’s start with a parent div that has five children divs.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
.parent {
  border: 3px solid #f92672;
}
.child {
  font-size: 20px;
  border: 3px solid white;
  font-family: sans-serif;
  background: #5c5ce2;
  text-align: center;
  color: white;
  padding: 20px;
  width: 60px;
}

See the Pen Flexbox – No Flex by Michael (@michaelschmidt_) on CodePen.0

Display Flex

By setting out parent container to the flex display mode, our children elements no longer conform to their previous display mode. Instead, they appear to act similar to floated and inline elements. However, with flexbox we have a lot more control of their behaviour.

.parent {
  display: flex;
}

See the Pen Flexbox – Display Flex by Michael (@michaelschmidt_) on CodePen.0

Justify-Content

Similar to the way text-align on an element can set the horizontal justification of children elements, so can the justify-content property on a flex parent. However, what you couldn’t do before is literally justify elements / distribute elements horizontally with equidistant spacing.

Your options here are:

Note we talk about aligning to the start and end of the row or parent, not to the left or right, as this can change direction! More on this later.

.parent {
  display: flex;
  justify-content: space-between;
}

See the Pen Flexbox – Justify Content by Michael (@michaelschmidt_) on CodePen.0

Align-Items

Flexbox also makes vertically centering elements a breeze – saving web designers and developers from all the painfully hacky alternatives that were used prior. All you need to do is apply the align-items property to your parent. Naturally, your parent will need to have a fixed height that’s taller than your elements. By default, if your parent is taller than its children, the children will stretch to match its height.

Your options for this property are:

.parent {
  display: flex;
  align-items: center;
  height: 300px;
}

See the Pen Flexbox – Align Items by Michael (@michaelschmidt_) on CodePen.0

Flex-Wrap

By default, if elements within a flex container have a combined width greater than their container they will adjust their widths proportionally to ensure they all fit. This behaviour might be nice in some situations, however can be adjusted with the flex-wrap property to allow elements to wrap onto subsequent lines. This behaviour is similar to the way inline and floated elements will wrap within their parents, but combined with other flexbox properties the posibilities are much greater than what was previously possible.

Your options with flex-wrap are:

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  width: 25%;
}

See the Pen Flexbox – Flex Wrap by Michael (@michaelschmidt_) on CodePen.0

The flex-wrap property is what gives us most of what we need to create responsive layouts. All we need to do is set our elements to wrap and then adjust the width of the children at various breakpoints. This is done with media queries as below. These act as conditional blocks of CSS that only activate if the media ‘query’ is true. In these examples, the media queries check the width of the browser, and if the width is below the given max-width the styles will apply. Multiple media queries can be used and generally the last will take precedence. Try re-sizing your browser down and watch the above CodePen adjust its layout.

@media (max-width: 768px) {
  .child {
    width: 50%;
  }
}
@media (max-width: 500px) {
  .child {
    width: 100%;
  }
}

Flex-Direction

Flexbox also gives us awesome control over the order and direction in which our HTML elements appear on the screen. This is an incredibly powerful feature especially when it comes to achieving a specific layout without compromising the order in which our elements appear in our HTML page as order is important for SEO and other robots; headings should appear before their respective content in HTML source, hence the name. This can get a little confusing however, as it works in combination with all other flexbox properties, meaning you might forget which way is up!

The flex-direction property allows us control of the direction of flow of elements within our parent. By default our elements organise themselves into rows in the natural reading direction. However, there are other options.

The options for flex-direction are:

.parent {
  display: flex;
  flex-direction: column;
}

See the Pen Flexbox – Flex Direction by Michael (@michaelschmidt_) on CodePen.0

Item Order

Flexbox is even powerful enough to let you control the order of elements on an item-by-item basis! By default every child element element in a flex context has an order value of 0. We can change any individual element’s position apparent position in the flow of the document by changing this value accordingly. If items have the same order value then their original order in the HTML source will take priority.

.child:nth-child(1) {
  order: 1;
}
.child:nth-child(2) {
  order: 1;
}
.child:nth-child(4) {
  order: -1;
}

See the Pen Flexbox – Order by Michael (@michaelschmidt_) on CodePen.0

Want to learn more?

That’s the basics of Flexbox. It is very powerful and has even more features! Here are some resources to extend your flexbox skills:

Flexbox Frameworks

As with Bootstrap and all the other frameworks of the past and present, flexbox brings with it a plethora of new frameworks and tools to make creating responsive layouts ‘easier’. However, as with other frameworks, we recommend caution about relying heavily on using them to avoid learning raw CSS skills and using them when they are not completely necessary. In these circumstances using a framework can cause you more trouble than good later down the track if you do not understand how its CSS rules govern its functionality, and they can also add unnecessary bloat to your website. The key is to remember why we use frameworks at all: for consistency and efficiency. If using a framework sacrifices these at any point then the use of the framework becomes counterproductive!

If you are however, interested in flexbox frameworks, here are a few:

Hosting

Web server. You’ve probably heard this term before and it might create some pretty fancy ideas in your head. So what is a web server? Its just a computer. In fact, your everyday computer is likely able to be used as a web server, but it just isn’t configured in a way that allows it to ‘serve’ up website files to other computers who request files over an internet connection. Configuration and setup is the key difference between your home laptop and a web server.

A web server must also be connected to the internet 24/7 over a decent connection to be able to serve up your website, and it also needs to have some decent specs to be able to handle and respond to as many requests for your website files as are needed. For websites with high traffic volume, this often means having a very powerful web server, or even multiple web servers to be able to handle the traffic.

It’s likely you probably don’t have a computer that you can dedicate to be a web server, or you don’t have a fast enough or reliable internet connection. This is where hosting companies come in. Hosting companies rent computer space to customers to use to serve up their websites. An entry level account with a web hosting company will provide you with a portion of a web server that you can use to do whatever you want with and an allocation of computer resources (for example disk space, CPU usage and memory) that you are allowed to use for your website.

There are many hosts out there, so make sure you shop around and read reviews. Many cheap shared hosting accounts will also provide you with a free domain for the first year, and this can be pretty convenient and is perfect for beginners as it means you won’t need to worry about configuring a domain’s ‘DNS’ settings to connect your domain to your host. Some commonly recommended hosts include, VentraIP, Siteground and BlueHost. Your tutor will be able to share their experience with various hosts and can recommend a host to you if you are unsure what host to go with.

WATCH: Get hosting on Siteground

Exercises

Flexbox Exercise Files Style The Exercise Files to Look Like This!