Gumby CSS framework
How to write efficient CSS? Part of the answer is to not to write CSS directly but use a more powerful (and elegant) language such as SASS, which extends CSS and addresses it's inadequacies, such as lack of variables, nesting, partials, mixins and so on. The other part of the answer is to learn from and use an existing framework. Gumby allows for both SASS and is an excellent framework and our aim here is to setup and become familiar with it's main components.
If the final site ends up looking like the example page of a framework, then it has stiffled creativity and the framework has not been used effectively. Arguably, this site is an example! it uses Gumby.
To use the Gumby CSS styles; all that is needed is a single CSS file, gumby.css. The User Interface components requires Gumby JS and it's dependent JS, Modernizer and the JQuery library.
Exercise – Gumby setup
- Visit the Gumby framework site and download Gumby. Unzip the downloaded file.
- From the unzipped Gumby-master directory, drag the ui.html file into Firefox and briefly view the main components. Recognise any of the styles? They are the same as the previous exercise and use the same selector names. In using any framework, a main task is to become familiar with the naming convention and the selector names; and to see how CSS declarations have been organised and the CSS properties used.
To use Gumby in the wd project.
- Save a copy of the Gumby-master directory in the wd directoy and rename it, gumby.
Consider the following code:
<!doctype html> <html lang="en"> <head> <title>Gumby template file</title> <!-- Include meta elements here! --> <!-- Gumby CSS --> <link rel="stylesheet" href="gumby/css/gumby.css"> <!-- Gumby uses Moderniser JS --> <script src="gumby/js/libs/modernizr-2.6.2.min.js"></script> <!-- Application custom CSS --> <link rel="stylesheet" href="custom.css"> </head> <body> <p>TODO: Replace this with document content </p> <!-- Gumby JS includes --> <script src="gumby/js/libs/jquery-2.0.2.min.js"></script> <script gumby-touch="gumby/js/libs" src="gumby/js/libs/gumby.min.js"></script> </body> </html>
- In the wd directory, save the code above in a file named, gumby_template.html. Use a copy of this file as a starting point for any new page using Gumby.
Points to note in the code:
- By being included after the gumby.css file, the CSS rules in custom.css will over-ride the Gumby CSS rules.
- Refrain from modifying the Gumby files, for example, to change a Gumby background colour, overide the declaration by including the same property with your own value in the custom.css file. By keeping the changes seperate, upgrading Gumby is made much simpler. The exisiting Gumby directory can be replaced with any new version without any changes, as your custom changes are kept seperate in custom.css.
- As browsers process HTML and CSS in parallel with any JS being downloaded, the Gumby and JQuery JS are inserted at the end of the file for performance reasons. To save bandwidth, minified (tabs and spaces stripped out) versions of the code is used.
Gumby is well written code and very organised in it's use of selectors. As with any framework, a starting point is to become familiar with the type, class and id selectors. The CSS necessary tutorial introduced Gumby by considering a range of type selectors and their CSS declarations from Gumby. This had an added adavantage of seeing common CSS properties used in an organised and efficient manner.
To become further familiar with Gumby, review the componenets in the ui.html file in the Gumby-master directory or the Gumby website and try out the styles and components using the template file above. The following are examples to start you off.
Gumby CSS is incremental
Many CSS declarations are built incrementally, for example an alert box can have classes alert or danger or success add to it.
<p>This is class <span class="alert default">alert default </span> and this is <span class="alert info">alert info </span> and this <span class="alert success">alert success </span> and this <span class="alert danger">alert danger</span> style.</p>
This is class alert default and this is alert info and this alert success and this alert danger style.
Similarly, these classes can be combined and the styles are added incrementally.
<button class="small danger pretty btn">Click me!</button> <button class="medium secondary metro btn">Click me!</button> <button class="large primary pretty btn">Click me!</button> <button class="medium success metro btn">Click me!</button> <button class="small default pretty btn">Click me!</button>
Grids are a primary reason for using frameworks. Layout is always a tedius and error prone exercise. Grids provide a solution; each design should start with the structure of the page defined in a grid followed by each division of the grid being completed with content.
Consider a page layout with a header, a left content column and a right navigation column in the same row above a footer. The header has a logo column adjusted to the left. The left content column has three main rows. Here is the code:
<!-- Header Row --> <div class="row"> <!-- Left logo Column --> <div class="three columns"> … </div> <!-- Right header Column --> <div class="nine columns"> … </div> </div> <!-- Content and Navigation Row --> <div class="row"> <!-- Left Content Column --> <div class="eight columns"> <div class="row"> … </div> <div class="row"> … </div> <div class="row"> … </div> </div> <!-- Right Navigation Column --> <div class="four columns"> … </div> </div> <!-- Footer Row --> <div class="row"> <div class="twelve columns"> … </div> </div>
nine columns - header
eight columns - content
Content row - 1
Content row - 2
Content row - 3
four columns - navigation
twelve columns - footer
To define grids, the page layout is seen in rows; for example, header row, content row and footer row. Note the three
divdefiining the three rows.
For each row, define the
divs for each column in the row. For example, the header row has two
divs representing the two columns. Note they are proportioned three and nine. Gumby implements a twelve column desing, hence 3 + 9 = 12.
- Note the content row is divided into two columns with widths of eight and four, again adding up to twelve.
The left eight content column has nested within it three
divs representing the three row. The widths are defined as percentages, hence it is possible to embed a row within a column.
- Convince yourself the code represents the layout in the diagram.
It is good practice to include comments for the layout, once code for the content is inserted and the file becomes larger, it is difficult to keep track of each
Components using JS
Navigation is a significant design part of any website. Gumby for provides a range of options including navbars that use JS. Consider the following navbar, hover over Portfolio and CSS menu options to see the drop down menus.
Here is the code:
<div id="demo_navbar"> <div id="main_nav" class="pretty navbar row"> <a href="#" gumby-trigger="#main_nav > ul" class="toggle"> <i class="icon-menu"></i></a> <h1 class="four columns logo"><a href="#">my site</a></h1> <ul class="eight columns"> <li><a href="#">Portfolio</a> <div class="dropdown"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a> <div class="dropdown"> <ul> <li><a href="#">Selectors</a></li> <li><a href="#">Common CSS</a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#">Website project</a></li> </ul> </div> </div>
There are no signs of DHTML event attributes such as onClick to trigger an event, instead this is implemented with unobtrusive JS using selectors. How does this work?
- The browser monitors the cursor movement continually checking if any particular element has an event handler for the event such as hover or click on an element. If so, control is passed to the JS code that handles the event.
- For example, a hover event over the Portfolio element would pass control to a JS function that has already been interpreted by the browser. You can see this assciation with the DOM inspector in the developer tools.
- The JS function then modifies the DOM to, in this case, make it's child
class="dropdown"visible (by modifying the z-index property). On the cursor leaving the element, another event is detected and a JS function modifies the z-index to make the
divappear invisible again.
- This means, the JS function will only work with the particular HTML element structure (
ulnested in the same way) and their id and class values that is used by the JS code; hence, these values should not be changed. This doesn't include the layout attributes. In most cases you can guess which attributes are required, in this example they include,
dropdownbut you can change the layout attributes such as four and eight columns or include an image for the logo. If in doubt refer to the Gumby documentation.
In practice, the modifications you are likely to make are to the menu items and the CSS for the look and feel of the nav bar
- Modifying the menu items is to change the unordered list items and for a nested sub-menu a
class="dropdown"that contains an unordered list.
- For chane to the style, the layout classes can be changed (remember each row needs to add up to twelve for the Gumby 12 column grid). For other CSS changes, note the additional
id="demo_navbar". This can be used in any CSS rule to seperate it from the Gumby CSS definitions (see the setup section).
- Modifying the menu items is to change the unordered list items and for a nested sub-menu a
We have not mentioned the purpose of the first hyperlink with the
gumby-trigger="#main_nav > ul", note the value is a selector (the ul child of it's parent div) and it has a class
toggle. To see this in action, reduce the width of the browser window; below a minimum length, control is passed to a JS function that uses the attributes and modifies the DOM to hide the navbar menu and replace it with the hyperlink with the menu icon, . This hyperlink will use the same HTML unordered lists but displays them with different CSS and JS for a smaller width. A good example of responsive design.
Exercise – Gumby
- Follow the instructions in the setup section and create a gumby_template.html file. Take a copy and name it, test_gumby.html
- Implement the above examples in test_gumby.html
- From your portfolio, review the index.html page and apply your further knowledge of CSS and Gumby and produce the final version of the index page. This will be your main home page.
- From your portfolio, review the cv.html page and apply your further knowledge of CSS and Gumby and produce the styled version of an online CV.
Exercise – Site Development
You have now reached a point where you should feel confident in developing a realistic project.
Consider a small three to five page website. It may be for a local business, a charity organisation or revamping an existing site such as a sports club, a tourism site, a learning site, and so on. Something that is likely to enthuse you to take your development further.
- In the wd directory, create a folder named, website.
- Design the layout of each page of your site, three to five pages should suffice. Apply the Gumby grid and save each page in the website directory (name each file relevant to the content of the page; follow the naming convention, lowercase letters and underscores only).
- For each page, insert relevant sample data in each div in the layout. Validate the pages.
- Review the steps in the Common CSS tutorial and consider typography, colour scheme, graphics and navigation. Reuse any material from your portfolio. Implement and save the CSS in a file named, custom.css and update any necessary changes to the HTML code.
- Valid your code regularly.
- Design is cyclical and so is implementation. Take regular backups of your development as reference points. Validate and pulish your site for testing.
- Final touch, insert a link in your main index.html file to point o the home page of your website.