Responsive css only carousel

A while ago I looked at some methods to create css only carousels. Since then new css features have become widespread allowing us to do more. Here i'm revisiting the css carousel to see what we can achieve with very simple code!

Wordpress, Timber & Twitter Bootstrap

Wordpress is one of the most popular CMS blogging platforms on the internet today, with the latest updates it's really improved in terms of user experience for the admin user. However there is still one massive pain for developers in the template system....where there isn't really one!

Responsive and adaptive images using focus points

Devices and computers come in millions of shapes and sizes it's very hard as a web developer to make your images fit and look good at every size. In this post i'm going to look at a second solution which uses focal points to tell the browser what should be on screen.

Responsive images using css only

One of the biggest challenges on responsive sites is handling images across different size screens and resolutions. Here we are going to look at the future support for it and also a simple method to solve this problem using css only.

Improving the AngularJS app starter template

AngularJS is a very powerful front-end library which allows you to build apps and prototypes quickly, without getting bogged down in browser inconsistencies. However when you look at the documentation and examples you will find that they vary massively and there are several ways to write, organise and build an app.

I've built a few projects using AngularJS & Twitter Bootstrap, and have now settled on a structure which feels easy to maintain and understand. I will attempt to explain it here with examples.

Responsive cross browser lightbox using only html and css

There are many great lightbox plugins out there, however lots of them rely on jQuery or other libraries. Also another negative aspect is that they use JavaScript for the resizing and other parts which really isn't needed. So how can we make our own css only efficient lightbox overlay, which works cross browser IE8+?

Responsive mobile dropdown navigation using css only

When building a fully responsive site the layout should adapt to different screen sizes, from mobile to tablet and desktop. Navigations are usually complicated as the space is limited, and functionality can differ between mobile and desktop.
Here we will look at a css only solution to a responsive dropdown navigation!

Responsive magazine using Turn.js

Creating a page turn effect is hard...very hard! There are lots of solutions that exist, but many of them miss the small details which make the turn animation look good. Here is a look at how to achieve it using the Turn.js plugin.

Full page site with vertical centering using css only

One of the big trends on the internet is the full page site. It consists of a single page site with multiple sections which you can scroll through. The trick of this is to have each section fill the screen and to centre the content inside.

Responsive youtube video player using css

One of the most frustrating things about video players is keeping the aspect ratio in responsive designs. Luckily there is a workaround using css which retains a ratio. you will need to give the player 100% height and width and add surrounding div container.

Improved cross browser responsive css grid layout

After creating an awesome percentage based layout, I implemented it on several sites and found it to speed up development and be the most important tool I use. However there where some issues with my previous implementation.

Object Oriented Css - Simplified

Object oriented coding can sometimes be hard to understand. When working with other people I usually use this metaphor to explain oocss.

We want to create a list of books, that sit on a shelf within a library. As html it would look something like this:

<ul>
    <li>Book 1</li>
    <li>Book 2</li>
    <li>Book 3</li>
</ul>

The wrong way
The common (but very wrong) way is to apply specific class names to each level, combining structural and visual styles together under a single class e.g.

.library {
    margin: 0px auto 0 auto;
    width: 980px;
    background-color: #ffcc00;
}

.shelf {
    padding: 20px;
    background-color: #333333;
}

.book {
    display: inline-block;
    width: 100px;
    margin: 0px 10px 0px 0px;
    background-color: #ccff00;
}

The object oriented way
Separate structure/layout from style/theme. So in our example that would be:

Layout/Structure:
1) library - the bricks and mortar of the building
2) shelves - the shelves attached with hinges to the brick, x amount
3) book - the items containers with content inside them, x amount

Style/Theme:
1) library - The decoration on the walls, how it looks and is painted
2) shelves - the wood effect, shadows borders, spacing
3) books - whether the books are big blue hardbacks, or small red paperbacks

Layout

We can identify the common structural elements and give them their own name-spaced class:

.layout .row {
    max-width: 980px;
    margin: 0 auto 10px auto;
    overflow: auto;
}

.layout .row .row {
    margin: 0 -10px;
}

.layout .col {
    float: left;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

So how would our html look with the structural css class names?

<div class="layout">
    <ul class="row">
        <li class="col">Book 1</li>
        <li class="col">Book 2</li>
        <li class="col">Book 3</li>
    </ul>
</div>

Theme

Then identify the common visual/styling elements and give them their own name-space class:

.light {
    color: #333333;
    background-color: #ffffff;
}

.light .c1 {
    color: #333333;
}

.light .c2 {
    color: #2989D8;
}

.light .bg1 {
    background-color: #ffffff;
}

.light .bg2 {
    background-color: #eeeeee;
}

Now how would our html look with these style/theme classes?

<div class="layout">
    <ul class="row light">
        <li class="col c1 bg1">Book 1</li>
        <li class="col c1 bg1">Book 2</li>
        <li class="col c1 bg1">Book 3</li>
    </ul>
</div>

Now we can reuse our classes and even move the theme around to theme just a single row if we want or even add a second theme for that row of items:

<div class="layout">
    <ul class="row light">
        <li class="col c1 bg1">Book 1</li>
        <li class="col c2 bg1">Book 2</li>
        <li class="col c1 bg2">Book 3</li>
    </ul>
    <ul class="row dark">
        <li class="col c1 bg1">Book 1</li>
        <li class="col c2 bg1">Book 2</li>
        <li class="col c1 bg2">Book 3</li>
    </ul>
</div>

.dark {
    color: #ffffff;
    background-color: #111111;
}

.dark .c1 {
    color: #ffffff;
}

.dark .c2 {
    color: #2989D8;
}

.dark .bg1 {
    background-color: #111111;
}

.dark .bg1 {
    background-color: #333333;
}

To see a real-world example check out my simple responsive template on github:
https://github.com/kmturley/alley

Responsive, cross browser, object orientated

I thought it might be useful to share some tips and learnings I've gathered when building sites in html and css. In particular I am going to focus on:
- cross browser resets
- responsive html/css
- namespaced object orientated css

1) First we need to start with some basic html

index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Example</title>
  <link href="css/reset.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

2) Then inside the body tags we can add some example content of a navigation and information panel

index.html
<div>
  <ul>
     <li><a href="#">Donec id</a></li>
     <li><a href="#">Elit</a></li>
     <li><a href="#">Non mi portas</a></li>
     <li><a href="#">Gravida</a></li>
    </ul>
</div>
<div>
    <img src="images/landscape.jpg" alt="image" />
    <h1>Donec id elit non mi porta gravida at eget metus.</h1>
    <p>Donec sed odio dui.</p>
    <p><a href="#">View details &raquo;</a></p>
</div>
<div>
    <p>&copy; kmturley 2012</p>
</div>

3) We need to reset some styles so that any layout or theme we apply on top will all react in the same way. You can use a reset stylesheet such as css reset or normalize. However I prefer to only reset certain elements, so lets create a file called reset.css and only put css targeted at elements.

reset.css

body {
    margin: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p {
    font-weight: normal;
    margin: 0;
    padding: 0;
}

a {
    outline: none;
    text-decoration: none;
}

iframe, img {
    border: 0;
}

ul {
    list-style-type: disc;
}

form, input, textarea, select, fieldset {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

5) Looks a bit neater with some resets! For a site with a grid of rows and columns we need some building blocks which are standardised, so lets define a layout.css

layout.css

.container {
    max-width: 980px;
    margin: 0 auto;
}

.row {
    margin-right: -20px;
    overflow: auto;
}

.col {
    float: left;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

6) we can also add some responsive rules to work for modern browsers IE9+ which will resize our rows and cells accordingly.

layout.css



/* width percent */

.w1of1 { width: 100%; }
.w1of2 { width: 50%; }
.w1of3 { width: 33.33333%; }
.w2of3 { width: 66.66666%; }
.w1of4 { width: 25%; }
.w3of4 { width: 75%; }
.w1of5 { width: 20%; }
.w2of5 { width: 40%; }
.w3of5 { width: 60%; }
.w4of5 { width: 80%; }

/* 20em = 320px */

@media (max-width: 20em) {
    .flow-xs.col,
    .flow-xs .col {
        width: 100%;
    }
}

/* 30em = 480px */

@media (max-width: 30em) {
    .flow-s.col,
    .flow-s .col {
        width: 100%;
    }
}

/* 48em = 768px */

@media (max-width: 48em) {
    .flow-m.col,
    .flow-m .col {
        width: 100%;
    }
}

/* 64em = 1024px */

@media (max-width: 64em) {
    .flow-l.col,
    .flow-l .col {
        width: 100%;
    }
}

/* 80em = 1280px */

@media (max-width: 80em) {
    .flow-xl.col,
    .flow-xl .col {
        width: 100%;
    }
}

7) We now need to update our html to use the new row and cell classes also adding a couple of extra divs and the layout stylesheet.

index.html

<div class="container">
        <div class="row">
            <div class="col w1of1">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1>Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a href="#">View details &raquo;</a></p>
            </div>
        </div>
</div>

8) Now you can resize your browser and see the responsive rules in action! Lets add some extra cells inside each row to see the percentage rules working effectively

index.html

<div class="container">
        <div class="row">
            <div class="col w1of2">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1>Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a href="#">View details &raquo;</a></p>
            </div>
            <div class="col w1of2">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1>Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a href="#">View details &raquo;</a></p>
            </div>
        </div>
</div>




9) All very nice but that's only the elements reset and the layout working responsively. Lets create a theme/skin/style for the site now. As always we need to namespace our styles so we don't conflict with anything else so lets create themes.css which will contain our default theme:

themes.css

.default {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.875em;
    color: #444444;
    background-color: #ffffff;
}

.default h1 { font-size: 3em; }
.default h2 { font-size: 2em; }
.default h3 { font-size: 1.5em; }
.default h4 { font-size: 1.286em; }
.default h5 { font-size: 1.143em; }
.default h6 { font-size: 1em; }

.default p {
    line-height: 1.429em;
    padding: 0 0 0.715em 0;
}

10) After setting the defaults for the entire site we can create specific themes which we can choose to apply to a certain section or elements so it's important to use classes only (never ever use id's or dom elements as selectors)

themes.css

.light {
    color: #333333;
    background-color: #ffffff;
}

.light .c1 {
    color: #333333;
}

.light .c2 {
    color: #2989D8;
}

.light .c2:hover {
    color: #71A8D6;
}

.light .bg1 {
    background-color: #ffffff;
}

.light .bg2 {
    background-color: #eeeeee;
}

.light .bg3 {
    background-color: #aaaaaa;
}


11) we can now apply the theme stylesheet and classes to the html

index.html

<div class="container">
        <div class="row light">
            <div class="col w1of1">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1 class="s1">Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="c2" href="#">View details &raquo;</a></p>
            </div>
        </div>
</div>

12) Now we have themes up-and-running you can switch the light theme class name to switch the theme on an entire section without needing to change the classes below. Lastly we need to make site specific changes such as aligning the nav items. guess what? we should be namespacing this too!

modules/nav.css

.nav li {
    display: inline-block;
    margin: 0 0 5px 0;
}

.nav a {
    padding: 5px 10px 5px 10px;
}

So there we have it, a finished working cross-browser responsive site. In older browsers what will happen?

IE8 supports percentages but not responsive css, so it will retain the cell layout whatever the width of the users browser. If you would prefer you can move the max-width attribute to a responsive rule so IE8 will stay a fixed width site no matter what.

You can download and view the final code on my github account at:
https://github.com/kmturley/alley

Hope that helps you get a responsive site working faster!