[how to get your ex back](http://getyourextips.com/ “how to get your ex back”)

by [John Williams](http://www.searchdiscovery.com/about/team/john-williams/), Creative Direc­tor

Build­ing the new site for Atlanta Ballet provided a lot of fun learn­ing expe­ri­ences and some really cool chal­lenges to tackle. One issue was the perfor­mance calen­dar. Since our focus was on making the site acces­si­ble on a broad range of devices and screen sizes, it was impor­tant that we created a calen­dar that scaled well on mobile devices, but still presented like a tradi­tional calen­dar on desktop screens.

Most calen­dar plugins are devel­oped using tables. It makes sense seman­ti­cally, it’s all tabular data. But tables are very rigid in how they’re rendered. It’s diffi­cult to change the shape with just CSS.

Our solu­tion was to create a calen­dar using an unordered list as the struc­ture. If you think about it, a calen­dar is just a list of days, so it still makes seman­tic sense. Lists are also much friend­lier to style with CSS. It also makes sense to present the calen­dar as a verti­cal list of days rather than a grid since screen width is so scarce on mobile devices. So here’s what we came up with.

## **Markup**

First, we’ll wrap the whole thing in a container div. We also need one list to handle the day of the week labels

- Sunday
— Monday
— Tuesday
— Wednes­day
— Thurs­day
— Friday
— Satur­day

Now we’ll add some week­days to the mix. Inside each list-item, we’ll put some markup for the actual date. You’ll notice that the day of the week is repeated inside each list-item. That markup will be hidden on the desktop version. You’ll have the days at the top like a normal calen­dar. When all the days display as a verti­cal list on mobile, you’ll need the day in the cell.

  • Sun,Dec 1

Now we’ll need to add some events to the cells. We want the whole area to be click­able, so the container will be an anchor tag. Inside the anchor, we’ll add some divs for break­ing up the data.

  • Sun,Dec 1

    Atlanta Ballet’s Nutcracker
    7:30 pm
    Fabu­lous Fox Theatre


Now that we have all our markup in place, we can start styling. I’m only cover­ing the crucial parts in this tuto­r­ial. You can see the full style in the demo.

  1. We’ll start with the desktop view. The calen­dar

    needs to be 100%. This will create a fluid layout that expands to fill what­ever container we put this in. We also need to get the — behav­ing. Change the display to block and float them left. That will cause them to line up left to right. The heights will look wonky if they’re not all completely equal. We’ll deal with that later wit

    h some javascript. Each cell needs to be 1/7th width. That comes out to 14.2857142857%. We want percent­ages so that we keep an fluid layout. To keep the padding from adding to the overall width, use the CSS3 prop­erty “box-sizing: border-box;”. We’ll also need to adjust the margins on the bottom and right. Why? When we add a border to the cell, some of the sides will double up and create the illus­tion of a thicker border. To combat this, just set a nega­tive margin and the borders will overlap rather than butt up side-by-side.

.calen­dar ul{ list-style: none; padding: 0; margin: 0; clear: both; width: 100%; } .calen­dar li{ display: block; float: left; width: 14.2857142857%; padding: 5px; box-sizing: border-box; border: 1px solid #ccc; margin-right: ‑1px; margin-bottom: ‑1px; }


There’s a nifty little jQuery script called equal­Heights that simply looks at all of a spec­i­fied element, and calcu­lates the height based on the tallest one. This is crucial because we want out calen­dar in desktop view to have uniform cells. Take a look at the script here. You can specify a min and max height as well as other options, but it’s basic config­u­ra­tion is all we’ll need for this project.


*Mobile *

Here’s the good stuff. Like I said earlier, a grid based calen­dar is rather sub-optimal for a mobile device. The screens are much better suited for a list view. Since we’re using media queries, we don’t have to change the markup at all. It’s just a few new CSS rules.

First thing we’re going to define our screen size. We decided to make the break­point for mobile devices at the 768px mark, basi­cally an iPad in portrait orien­ta­tion. Land­scape orien­ta­tion still provides enough space to show the grid style

@media only screen and (max-width : 768px) {  /* mobile styles go here */ }

Next we need turn off the week days that run across the top of the calen­dar. They won’t make sense for mobile. We also turn on the days of the week in the indi­vid­ual cells. And the last thing we’ll do is hide the “out of range” dates. These are dates that show up from the previ­ous and follow­ing months on a tradi­tional calen­dar to square off the grid prop­erly. These days are just clutter in a list view.

@media only screen and (max-width : 768px) { .calen­dar .week­days{ display: none; } .calen­dar li{ height: auto!important; border: 1px solid #ededed; width: 100%; padding: 10px; margin-bottom: ‑1px; } .calen­dar li .day, .calen­dar li .month{ display: inline; } .calen­dar li.outofrange { display: none; } }

This gives us a lovely list view on mobile devices. When you load the calen­dar on your computer or iPad in land­scape, you’ll get the default grid view. Win-Win!

If you’d like to see this live with all the bells and whis­tles, visit the Atlanta Ballet’s calen­dar here!