Style the site.

In this tutorial we will learn how to change the way Simple looks by transforming basic theme into color blocks theme. To do this, we'll mainly work with CSS, but there will be a couple changes in HTML files too. Tutorial is intended for beginner-level web designers.

CSS file structure: Mobile first approach.

We will be working with basic-style.css (it is in CSS folder). The most important thing to understand about Simple CSS is the Mobile First approach. This approach dictates the way CSS file is structured and "read" by the browsers. Traditional CSS structure is one where you have all your desktop styles at the beginning, and then eventually tweak them by adding media queries. Mobile first is - as you probably guessed - the other way around. The benefit of mobile first approach is that you can control what is served to mobile devices, reducing the traffic on slow mobile connections.

This is how basic-style.css will look if you strip all the declarations, leaving only the media query structure (commented). Media queries are highlighted with green.

/* BASE (MOBILE) SIZE These are the mobile styles. It's what people see on their phones. Remember, keep it light: Speed is Important. */


/*

  LARGER MOBILE DEVICES

  This is for mobile devices with a bit larger screens.

  */

  @media only screen and (min-width: 481px) { 

  } 
/*

  TABLET & SMALLER LAPTOPS

  The average viewing window and preferred media query for those is 768px.

  But I think that some more breathing space is good:)

  */

  @media only screen and (min-width: 920px) {

}
/*

  DESKTOP

  This is the average viewing window. So Desktops, Laptops, and

  in general anyone not viewing on a mobile device. Here's where

  you can add resource intensive styles.

  */

  @media only screen and (min-width: 1030px) {

  } 
/*

  LARGE VIEWING SIZE

  This is for the larger monitors and possibly full screen viewers.

  */

  @media only screen and (min-width: 1240px) {

  } 
/*

  RETINA (2x RESOLUTION DEVICES)

  This applies to the retina iPhone (4s) and iPad (2,3) along with

  other displays with a 2x resolution.

  */

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),

  only screen and (min--moz-device-pixel-ratio: 1.5),

  only screen and (min-device-pixel-ratio: 1.5) {

  } 
/*

  iPHONE 5 MEDIA QUERY

  iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)

  */

  @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
  

  }
/*

  PRINT STYLESHEET

  */

  @media print {

  }

As you see, there is no media query at the beginning. Styles defined at the beginning of the style sheet will be served not only to the smallest mobile devices, but actually to ALL devices. This is a very important concept to understand. Only when it fully sinks in you will be able to plan your project well.

Let's see things in action. Open your index.html in the browser and resize browser window to aprox. 320 pixels wide. To check the width you can activate Google Chrome dev tools (press F12 in Chrome). If you use other browser, or don't know how to use dev tools, you can use this Screen ruler.

Let's pick 3 elements:

Logo
Navigation bar
Hero area

and see what happens to them while you resize the browser window. Logo will float left when the window is large and get centered when window (imaginary screen) gets small. Navigation bar will turn into toggle menu on smaller screen. Hero area will have same color and borders. Hero area texts will look the same, but Flexslider will disappear when the screen gets smaller.

How are those transformations reflected in CSS?

Logo styles are declared from the very start: #banner{ text-align:center; }. And then in 920 media query more properties are added, while text alignment is changet to left: #banner{float:left; text-align:left; margin-bottom:0px;}

Toggle menu styles are at the beginning of the sheet. They are quite different from the navigation bar styles, which appear only in the 920 px media query. The declaration setfor toggle menu, naturally, is much shorter than for the navigation bar, because on small screens we don't have the drop down menus that require a lot of styling.

Hero area styles are also appearing soon enough at the top of the CSS file. Flexslider is set to display:none. Observe how hero area styles are only declared once at the top, and not repeated in any of the media queries. This is because hero area is supposed to look the same on screens of any size. Flexslider, on the other hand, will appear when screen gets up to 920 px width. Predictably, you find .flexslider{ display:block; [...]} and a bunch of theme styles in 920px media query. Note: most of the slider styles live in a separate file. It is not optimal for performance, but easier to deal with for beginner-level web designers.

We hope you already got a decent understanding of what is going on in mobile-first CSS. You can exercise more: pick an element and watch it while resizing the browser window. Then look into CSS code to "link" what you see with style declarations.

A couple more words about media queries and we'll move on to the fun stuff.

Simple media queries have following breakpoints: 481px / 920px / 1030px / 1240px / Retina displays / iPhone5 / Print. Not all of them are filled with styles! It is up to you if you want to fill them or leave them blank. Also, you can, of course, change the width breakpoints to anything you like. You can also change the way elements appear and disappear on smaller screens. E.g., if you want Flexslider to be visible on screens of any size, delete .flexslider{ display:none;} from the beginning of the stylesheet and move Flexslider styles from 920px media query to the top.

Fun stuff: Colors, fonts, etc.

Open colorblocks.html from the original archive in the browser and compare it to your index.html. Themes have a bit different colors, fonts and some layout differences. We will start with fonts.

Changing fonts

Find this line of code in the <head></head> section of index.html: <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu' rel='stylesheet' type='text/css'>. This is a stylesheet from Google Web Fonts CDN. After "family" you have names of the fonts, which are used throughout the basic theme we've built our site with. Fonts are Droid Serif and Ubuntu. Ubuntu is used for body text, Droid Serif for headers. Now, we will use Droid Serif for body text and Oswald font for headers. Go to http://www.google.com/fonts and type Oswald in search field. When you get the font, click ADD TO COLLECTION button. Then do a search for Droid Serif and add it too. You now have 3 buttons at the bottom right corner of the screen: Choose, Review, Use. Click USE. Check 300 and 400 checkboxes for Oswald (those are font weights), and 400, 700, and 700 italic for Droid Serif. You will now have a newly generated link at the in the"3. Add this code to your website:" box that reflects your choices. Copy it and paste instead of the old link. Now you will have this line of code in your head section: <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Oswald:400,300' rel='stylesheet' type='text/css'>. Lastly, go into the CSS file and change body font to Droid Serif. Also change h1- h6 font face to Oswald and font-weight to 400. Refresh index.html to check if the updates work correctly.

Changing colors

Let's start at the top. First element where colors will change (in CSS) is the navigation bar/toggle menu. In basic-style.css we have #0099ff blue top level links, also :hover state and current items have #0099ff blue background. We will be changing top level links color to dark grey and backgrounds to #5ec79e green.

In basic-style.css find set of declarations after /*MAIN MENU*/ comment. Inspect them. Find .srt-menu li a {[...]} and add this line: color:#666;. Now links are dark grey, instead of being blue like all other site links. Now let's change all the backgrounds. First element with blue background is the menu toggle button in ON state. Find .menu-toggle.toggled-on{ background:#0099ff;} and change background HEX value to #5ec79e. Then read on and change every occurence of background:#0099ff; into background:#5ec79e;.

After you're done with toggle menu styles, scroll down to 920px media query and find /*** DEMO1 SKIN ***/. These are navigation bar styles. Do the background swap for them too. Check results in the browser, don't forget to resize the window to check out the toggle menu.

While we are at it, let's go back to the top of the CSS file and find /*SECONDARY MENU*/, and do the background swap for secondary menu as well.

Next element that we will be updating is call to action buttons. They sit after text in the hero area. Now they are blue in normal state and grassy-green on hover. We will be changing them to our new trendy green and violet on hover. In /*colors and backgrounds*/ section find a.buttonlink and do the familiar background swap. Then in a.buttonlink:hover{ background:#8dbc01;} change the background HEX value to #887dc2.

Adding large sections with colored backgrounds. Colorlocking.

If you look at the colorblocks.html in the browser you'll see two large areas with green and violet backgrounds. Sections with those backgrounds have classes .greenelement and .violetelement. Let's declare those classes in the /*colors and backgrounds*/ section of CSS:
.greenelement{ background:#5ec79e; color:#fff; } .violetelement{ background:#887dc2; color:#fff; }

Now we will apply the new classes to the index.html sections. Add new <section>blah</section> right after the #main div closing tag (</div>). Add class .greenelement and class .clearfix (prevents background from spilling where it shouldn't) to the new section. Now you have <section class="greenelement clearfix">blah</section>. Check how things look in the browser. The green section has appeared right above the footer. But, unlike in the clolorblocks.html, the text inside it is glued to the left margine of the screen, also there's no padding. To center all the elements that will eventually go into the green section and add padding, we will wrap or "blah" in <div class="wrapper">. You should get <section class="greenelement clearfix"><div class="wrapper">blah</div></section>. Now everything looks nice, padded and centered. If you want a violet section under the green one, copy/paste green section below and change .greenelement class to .violetelement. Add content to those sections, behold - how pretty:).

After you've made those changes, all the internal pages are good to go - changes apply to them too.

Last thing you may want to do is to get rid of the Flexslider white borders. But now you should be able to do it all by yourself:)