Advertisement
CMS

Uber Aesthetics and Responsiveness

by

Welcome to the final part of our Ghost theme design tutorial series! In the previous two parts of this series we worked on the first half of styling our theme and laid the groundwork for responsive behavior. This fifth and final part finalizes our styling and completes the task of making our theme fully responsive.

By the end of this part, your theme's design and development will be fully complete.


Aesthetic Styling

There are no hard and fast rules for this part of the process, except perhaps for one: everything you add to your theme should have flexible dimensions to ensure scalability and in turn responsiveness. Always consider how any addition you make will have the ability to stretch and shrink to suit any possible viewport or content size.

In place of fixed width background images, use CSS3 techniques and tiling images. And in place of px values, you should ideally use em, rem and % values.

Other than that, it really all comes down to your personal artistic style as a designer.

I'll step you through my own series of design choices for this theme, (many of which are a result of trial and adjustment), and as we go along you'll see some of the great ways you can approach the coding aspect of design for maximum efficiency, stability and scalability.


Blog Title and Description

Let's begin by centering and adjusting the title and description.

Step 1:

In your "layout.less" file, add a text-align: center; rule to your .header_uber class, then save:

.header_uber {
	.HeaderColor;
	text-align: center;
}

This will center everything contained inside the header, not only the blog title and blog description, but also the logo if a theme user decides to add one.

Step 2:

In your "typography.less" file, locate the following classes:

h1.blogtitle_uber, h1.blogtitle_uber a {
	text-decoration: none;
}

p.blogdescription_uber, p.blogdescription_uber a {
	text-decoration: none;
}

...and replace them with:

h1.blogtitle_uber, h1.blogtitle_uber a {
	font-size: 4.5rem;
	margin: 0;
	font-weight: 700;
	text-decoration: none;
}
p.blogdescription_uber, p.blogdescription_uber a {
	font-size: 1.313rem;
	margin: 0;
	text-decoration: none;
}

Step 3:

Save your "typography.less" file.

This makes the blog title larger than the default H1 size as well as increasing the weight. It also makes the blog description smaller than the default H2 size. These are purely aesthetic choices for font size on these two elements.

The code also removes the default margins on both tags, leaving spacing to be handled purely by the line-height of each heading.


Header and Articles

We'll now alter the margins and padding for our header and articles.

Step 1:

In your "layout.less" file, add the following code to your .header_uber class:

.header_uber {
	.HeaderColor;
	text-align: center;
	padding-top: 1.5 * @golden + 0em;
	padding-bottom: 3 * @golden + 0em;
	margin-bottom: 0.25em;
}

Note: You're adding the last three lines of the above to the already existing .header_uber class.

This adds some padding above and below the header content, and creates a small space between the header and the first article.

Step 2:

Still in your "layout.less" file, replace your .article_uber class with the following code, then save:

.article_uber {
	.ArticleColor;
	padding: 0 @add_padding + 0em @add_padding + 0em @add_padding + 0em;
	margin-bottom: 0.25em;
}

Previously, the padding on articles was set to the value of the variable @add_padding on all sides. But we don't need that amount of padding at the top of the article. The new padding rule sets the top padding to zero while keeping the other three sides at their original @add_padding value.

The margin rule sets the space between articles to the same amount we just set to have appear between the header and first article.

Step 3:

Refresh your site, which at this point should look like:

GhostTheming_MarginPaddingAdjusted

Add Texture

Next let's add some texture. This will lend extra personality to the design, delivering more cues to help orient decisions on what to do for the rest of the aesthetics.

When I set out at the beginning of the styling process I had something papery or sandy in mind for the texture.

To find something suitable I used the amazing Subtle Patterns plugin for Photoshop, which gives you access to a few hundred patterns you can deploy very easily into your designs.

You can access the whole Subtle Patterns library for free from http://subtlepatterns.com/ but the plugin just makes it quick and easy to try out multiple textures before settling on one.

I created a canvas with the same background color as the body, then experimented with pattern overlays and blending modes until getting one I felt looked right. I then did the same to create a second texture for the post title. I exported both images from Photoshop as jpegs.

You can download the background images directly from here (right-click, save as):

bodybg
posttitlebg

Step 1:

Copy and paste the "bodybg.jpg" and "posttitlebg.jpg" image files into the "assets > images" folder of your theme.

Step 2:

In the "colors_and_bgs.less" file, adjust the .BodyColor() to add background-image: url(../images/bodybg.jpg);:

.BodyColor () {
	background-color: @color_01;
	background-image: url(../images/bodybg.jpg);
	color: @color_05;
}

This will make the orange background image fill the whole window.

Step 3:

Still in the "colors_and_bgs.less" file, adjust the .PostTitleColor() to add background-image: url(../images/posttitlebg.jpg);:

.PostTitleColor () {
	background-color: @color_03;
	background-image: url(../images/posttitlebg.jpg);
	color: white;
	a, a:link, a:visited {
		color: white;
		text-decoration: none;
	}
	a:hover, a:focus {
		color: @color_01;	
	}
}

Step 4:

Save the "colors_and_bgs.less" file. This adds the blue background image to your post titles.


Borders and Wrapper Spacing

Step 1:

In the "layout.less" file, replace the .wraper_uber class with the following, then save:

.wrapper_uber {
	width:100%;
	max-width: @readable_width + 2 * @add_padding;
	margin: 0.25em auto 0 auto;
	padding-bottom: @add_padding / 2 + 0em;
}

This adds the padding-bottom rule so there will always be space below the footer, and footer content will never sit flush against the bottom of the window.

Step 2:

In the "colors_and_bgs.less" file, add border property rules to the .HeaderColor, .ArticleColor and .PostTitleColor mixins as follows:

.HeaderColor () {
	background-color: white;
	border: 0.063rem solid darken(@color_01, 10%);
}

Here we are adding a border declaration to the header, creating a darkened orange border on all sides.

The width is set at an em equivalent to approximately one pixel, but by using an em value the width of the border can scale to suit any overall size.

You'll also notice the use of the darken() function. This is a super handy function built into LESS that will create a variation of any color. We're using it to generate the perfect border color for the header, by having it darken the color used in the background by 10%.

This creates a look more like that created by natural light and natural shadow, where the color of a real object under reduced light would simply appear darker.

It also means that, should we change the value of our original color variable, the border color will automatically change along with it.

.ArticleColor () {
	background: white;
	border: 0.063rem solid darken(@color_01, 10%);
	a, a:link, a:visited {
		color: @color_03;
	}
	a:hover, a:focus {
		color: @color_02;	
	}
}

Here we add another copy of the same border rule, adding the same darkened orange border on all sides of each article.

.PostTitleColor () {
	background-color: @color_03;
	background-image: url(../images/posttitlebg.jpg);
	border: 0.063rem solid darken(@color_03, 10%);
	color: white;
	a, a:link, a:visited {
		color: white;
		text-decoration: none;
	}
	a:hover, a:focus {
		color: @color_01;	
	}
}

In the above we are again adding a border rule, only this time because the border will apply to the post titles, we are using a darkened version of its background color; @color_03.

Step 3:

Save the "colors_and_bgs.less" file.


The Post Title

Let's now make the post title bolder and make it protrude over the side edges.

Step 1:

In the "variables.less" file, add the following new variable after the @add_padding line, then save:

@posttitle_overflow: 9;

We're creating this variable because we're about to code in an effect that will make the edges of the post title protrude outside of the white article space.

This variable is going to represent the number of ems we want to expand the width of the post title by on each side.

Step 2:

In the "typography.less" file, replace the h1.posttitle_uber class with the following, then save:

h1.posttitle_uber {
  .PostTitleColor;
  font-weight: 700;
  position: relative;
  margin-left: -@posttitle_overflow + 0rem;
  margin-right: -@posttitle_overflow + 0rem;
  padding: @golden / 2 + 0rem @posttitle_overflow + 0rem;
}

You can see where we used the @posttitle_overflow we just created, on the margin-left and margin-right rules.

You'll also notice that each variable has a - sign in front of it, turning it into a negative value. If we had set margins to a positive value that would have pushed the left and right edges of the post title inward. Instead, the negative value means the edges will pull themselves outward, creating our protruding title effect.

After setting the left and right negative margins, we've also set the post title's left and right padding to a positive value in the same amount. So after the negative margins pull the edges out, the positive padding pushes the text inside back to its original width. In the same line, we've set the top and bottom padding of the post title to half the golden ratio.

Another point to be aware of is that in this case we are using the unit rem. This is just like using an em value, except instead of being relative to the element it is applied to, a rem or "root em" is relative to the base font size of the whole document.

Because we're working on a h1 tag that has an enlarged font-size, if we were to use an em unit here it would behave as a multiple of the size of the heading. Then if the size of the heading were changed later it would throw out the post title layout. So instead we use rem units so the layout will remain consistent.

Finally, you'll also see we've set the font-weight to 700, another aesthetic choice. And we've added position:relative;, something done in preparation for the next step we're about to take in styling the post titles.

Step 3:

Refresh your site; it should now look like:

GhostTheming_TakingShape

A Cool CSS3 Ribbon

The following steps will turn the post title into an attractive ribbon.

Step 1:

In the "colors_and_bgs.less" file, replace the .PostTitleColor() mixin with:

.PostTitleColor () {
	background-color: @color_03;
	background-image: url(../images/posttitlebg.jpg);
	border: 0.063rem solid darken(@color_03, 10%);
	color: white;
	a, a:link, a:visited {
		color: white;
		text-decoration: none;
	}
	a:hover, a:focus {
		color: @color_01;
	}
	&:before {
		z-index: -2;
		content: '';
		border: 0.063rem solid darken(@color_03, 10%);
		background-image: url(../images/posttitlebg.jpg);
		width: 2rem;
		height: 100%;
		position: absolute;
		top: @golden / 2 + 0rem;
		left: -1.25rem;
	}
	&:after {
		content: '';
		border: 1px solid darken(@color_03, 10%);
		background-image: url(../images/posttitlebg.jpg);
		width: 2rem;
		height: 100%;
		position: absolute;
		top: @golden / 2 + 0rem;
		right: -1.25rem;
		z-index: -2;
	}
}

Note: You are adding the entire &:before {...} and &:after {...} code segments.

What we're doing here is using the awesome :before and :after CSS pseudo-elements. If you've never used these before, they are essentially like adding an extra div before or after an element without actually having to add any extra html. You can learn more about pseudo-elements by following: Building Icons With a Single HTML Element.

In the above, we're adding an extra rectangle both before and after the post title, with the same height, color and border. We're then using absolute positioning and z-index to set those rectangles behind the protruding edges of the post title, and a little lower. This generates the effect of extra lengths of the "ribbon" we're creating, folded in behind the main post title rectangle.

You'll see what I mean shortly when you refresh after completing a few more steps.

Step 2:

Still in the "colors_and_bgs.less" file, above the .PostTitleColor() mixin, add the following new mixin, then save:

.PostHeaderColor () {
	&:before {
	z-index: -1;
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -@posttitle_overflow + 0.063rem;
	top: 100%;
	border-width: (@posttitle_overflow - @add_padding) / 2 + 0rem;
	border-style: solid;
	border-color: darken(@color_03, 10%) darken(@color_03, 10%) transparent transparent;
	}
	&:after {
	z-index: -1;
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: -@posttitle_overflow + 0.063rem;
	top: 100%;
	border-width: (@posttitle_overflow - @add_padding) / 2 + 0rem;
	border-style: solid;
	border-color: darken(@color_03, 10%) transparent transparent darken(@color_03, 10%);
	}
}

In the previous step we created two rectangles that would look like extra pieces of "ribbon". The code above will be used to generate little triangular pieces that will look like shadows, and make the main post title rectangle look connected to the extra rectangles we just created.

Again we're using :before and :after CSS pseudo-elements to create two triangle "shadows", and the triangles themselves will be created via the border settings.

Creating triangles with borders is somewhat common these days, so feel free to check out Quick Tip: Drawing and Using CSS Triangles for more detailed information.

Again we're using absolute positioning and z-index to position the triangle "shadows" for the desired effect. This code will be applied to the as yet unstyled .postheader_uber class that wraps our date and post title.

Step 3:

In the "layout.less" file, below the .header_uber class, add the following new class, then save:

.postheader_uber {
	.PostHeaderColor;
	position: relative;
	display: block;
	text-align: center;
	z-index: 0;
}

This code applies the triangle "shadow" mixin we just created, and the rest of the rules in this class are to enable those in the triangle "shadow" mixin to function properly.


Style the Post Date

Step 1:

In the "colors_and_bgs.less" file, add the following new mixin at the end of the file, then save:

.DateColor () {
	background-image: url(../images/bodybg.jpg);
	border: 0.063rem solid darken(@color_01, 10%);
	color: white;
	.border-radius(@golden + 0em);
	&:before {
		content: '';
		background-image: url(../images/bodybg.jpg);
		width: 0.063rem;
		position: absolute;
		left: -0.063rem;
		height: 0.25em;
		top: @golden - 0.125em;
	}
	&:after {
		content: '';
		background-image: url(../images/bodybg.jpg);
		width: 0.063rem;
		position: absolute;
		right: -0.063rem;
		height: 0.25em;
		top: @golden - 0.125em;
	}
}

Step 2:

In the "typography.less" file, below the h1.posttitle_uber class, add the following new class, then save:

.date_uber {
  .DateColor;
  font-weight: 700;
  font-size: 0.8em;
  display: inline-block;
  text-align: center;
  padding: @golden / 3 + 0em @golden + 0em;
  position: relative;
  top: -@golden - 0.25em;
}

This new mixin and class are doing some tricky stuff. What I'm setting out to do is make the date look like it is sitting in a rounded section that has been cut out in between each article.

It's not possible to "cut out" sections of these elements however, so we have to create the illusion that this is the case.

In the .DateColor() mixin, I have started by setting the background of the date to the same as the main body, and I've given it the same darkened orange border used on the articles. I've also rounded the corners.

Then in the .date_uber class I have called in the .DateColor() mixin, and set the display, position and top values so that the date will be centered and pulled upwards to rest directly over the top of the gap between articles.

This is almost the right effect, however the darkened orange border goes all the way around the date, making it still look like the date is sitting over the gap between posts, rather than being inside a "cut out".

To overcome this, I've added :before and :after pseudo-elements to the mixin, with each one adding a tiny rectangle that covers over the border at the left and right edges of the date. This effectively blends the date with the gap between articles, making it all look connected and creating the desired "cut out" effect.

Step 3:

Refresh your site; it should now look like:

GhostTheming_RibbonAdded

Rounding Corners

Step 1:

In the "colors_and_bgs.less" file, replace the .HeaderColor() mixin with the following:

.HeaderColor () {
	background-color: white;
	border: 0.063rem solid darken(@color_01, 10%);
	.border-radius(2em 2em 0 0);
}

In this step we're using the .border-radius() mixin to round the top left and top right corners of the header. This mixin comes from the LESShat library that we fetched earlier via Bower, which handles writing cross browser CSS3 with all the required vendor prefixes and fallbacks.

Step 2:

Still in the "colors_and_bgs.less" file, replace the .BodyColor() mixin with the following, then save:

.BodyColor () {
	background-color: @color_01;
	background-image: url(../images/bodybg.jpg);
	color: @color_05;
	overflow-x: hidden;
	background-attachment: fixed;
	&:after {
	content: ' ';
	width: 100%;
	height: 50%;
	background-color: darken(@color_01, 10%);
	.transform(~"skew(-20deg) rotate(-20deg)");
	left: 0;
	top: 30%;
	.opacity(0.5);
	position: fixed;
	}
}

Here we are using an :after pseudo-class applied to the body to first create a large rectangle at the full width of the browser window and half the height, with a background color the same as the darkened orange we've been using on several borders.

We're then using the transform() mixin from the LESShat library to do two things. First, we are skewing the rectangle by -20 degrees in order to give it a parallelogram type of shape. Then we are rotating it by -20 degrees so it runs diagonally across the screen.

We set its position to left: 0; and top: 30%; so that it runs from the bottom left corner to the top right corner of the screen. We then reduce its opacity to 50% so it's not too bright, using the .opacity() mixing from LESShat.

At the moment the stripe is wider than the browser window, so it will create a horizontal scrollbar. To correct this we add overflow-x: hidden; to the main .BodyColor() mixin.

Finally, in order to make the textured background and stripe stay still on the screen when people scroll, we add background-attachment: fixed; to the main .BodyColor() mixin, and position: fixed; to the :after pseudo-class section.

Step 3:

In the "layout.less" file, add position: relative; and z-index: 1; to the .wrapper_uber class:

.wrapper_uber {
	width:100%;
	max-width: @readable_width + 2 * @add_padding;
	margin: 0.25em auto 0 auto;
	padding-bottom: @add_padding / 2 + 0em;
	position: relative;
	z-index: 1;
}

There's one final problem with the stripe we created above; it's sitting squarely on top of the site's content.

Fixing this is just a matter of bumping the .wrapper_uber class up so it is above the stripe by adding the rule z-index: 1;.

Step 3:

Save the "layout.less" file and refresh your site, it should now look like:

GhostTheming_BGStripe

Style Footer and Pagination

Step 1:

In the "colors_and_bgs.less" file, add the following new mixins at the end of the file, then save:

.FooterColor () {
	color: white;
	a, a:link, a:visited {
		color: white;
		font-weight: 700;
		text-decoration: none;
	}
	a:hover, a:focus {
		color: @color_04;
	}
}

.PaginationColor () {
	background-color: white;
	color: @color_05;
	border: 0.063rem solid darken(@color_01, 10%);
}

This code is more simple than that of the last few steps. All we're doing here is setting the colors of text, links and hovers in the footer, and setting the background, text color and border of the pagination.

Step 2:

In the "layout.less" file, add the following new class below the .article_uber class, then save:

.postcontent_uber {
	padding-top: 0.5em;
}

.footer_uber {
	.FooterColor;
	margin: @add_padding / 4 + 0em 0;
}

.pagination_uber {
	.PaginationColor;
	text-align: center;
	padding: @golden / 2 + 0em @golden + 0em;
}

In the above we're adding a little extra space between the title and the post content via the new .postcontent_uber class. We're also applying the .FooterColor() mixin to the site's footer and adding some top and bottom padding to it. We're then applying the .PaginationColor mixin to the pagination, setting its text to center, and adding some padding.


Add Icon Fonts

Aside from the background images, this theme does not use any other images. We'll be creating icons next, but they'll come by way of fonts, not images.

There are several fonts that have sprung up of late that offer icons as their character set rather than letters. The beauty of using these fonts instead of images is that they are fully scalable just like any other font.

Step 1:

Go to the "casper" theme (which you'll find in the same themes folder as your "UberTheme") and copy all the font files from the "casper > assets > fonts" folder into your "UberTheme > assets > fonts" folder.

Step 2:

In the "typography.less" file, add the following new classes at the end of the file, then save:

//**
// Icon fonts
//**

@font-face {
    font-family: 'icons';
    src:url('../fonts/icons.eot');
    src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icons.woff') format('woff'),
        url('../fonts/icons.ttf') format('truetype'),
        url('../fonts/icons.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon-ghost:before, .icon-rss:before, .icon-twitter:before, .icon-gplus:before, .icon-facebook:before {
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}

.icon-twitter:before {
    content: "\e002";
    font-size: 1.1em;
    margin-right: 1em;
}
.icon-gplus:before {
    content: "\e003";
    margin-right: 1em;
}
.icon-facebook:before {
    content: "\e004";
    margin-right: 1em;
}
.icon-rss:before {
    content: "\e001";
}
.icon-ghost:before {
    content: "\e000";
    margin-right: 0.5em;
}

.hidethis_uber {
	display: none;
}

The above code tells the theme to use the font files you just copied into your theme wherever it sees a font-family property set to the value 'icons'.

We then set the font-family to 'icons' for all these classes: .icon-ghost:before, .icon-rss:before, .icon-twitter:before, .icon-gplus:before, .icon-facebook:before

The subsequent code tells the theme which character out of the icon font to use where is sees each class.

The final class .hidethis_uber is used to hide anything it is applied to.

You may remember in the template file creation stage we added some markup to social sharing and footer links that used these ".icon-*" classes, and that the text inside those links used the ".hidethis_uber" class.

The CSS you just added will now display font icons where all those ".icon-*" classes were used, and will hide the text wherever the ".hidethis_uber" class was used, effectively replacing the text with icons. You'll see this in action when you refresh in just a moment.


Style the Tags

..and while we're at it, we'll also style the "Share this post" and post author area.

Step 1:

In the "colors_and_bgs.less" file, add the following new mixins at the end of the file, then save:

.SharePostColor () {
	background-color: @color_01;
	border: 0.063em solid @color_02;
	color: white;
	a, a:link, a:visited {
		color: white;
		font-weight: 700;
		text-decoration: none;
	}
	a:hover, a:focus {
		color: @color_04;
	}
}

.AuthorImageColor () {
	background-color: @color_01;
	border: 0.063em solid @color_02;
}

This new .SharePostColor() mixin sets the background, border, text and link styling to the social sharing box that appears at the bottom of each single post.

The .AuthorImageColor () mixin sets the background and border color that will be applied to the author's image of themselves, which will also appear (if available) at the bottom of each single post.

Step 2:

In the "layout.less" file, add the following new classes at the end of the file, then save:

.posttags_uber {
	margin-top: 2 * @golden + 0em;
	font-style: italic;
}

.sharepost_uber {
	.SharePostColor;
	margin: @golden + 0em 0 2 * @golden + 0em 0;
	padding: @golden + 0em;
}

h4.share_uber {
	margin: 0 0.5em 0 0;
}

.share_uber {
	float: left;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
}

.authorimage_uber {
	.AuthorImageColor;
	float: left;
	line-height: 0;
	margin-right: @golden + 0em;
	padding: 0.25em;
	.border-radius(50%);
	img {
		.border-radius(50%);
	}
}

h4.authorname_uber {
	margin:0;
}

.postfooter_uber {
	position: relative;
}

/* CLEAR - for modern awesome browsers */
.sharepost_uber:before,
.sharepost_uber:after,
.postfooter_uber:before,
.postfooter_uber:after {
	content: "";
	display: table;
}
.sharepost_uber:after,
.postfooter_uber:after {
  clear: both;
}
/* CLEAR - for IE 6/7 (trigger hasLayout) */
.ie .sharepost_uber,
.ie .postfooter_uber {
	zoom: 1;
}

The above code adds some space above any post tags displayed as well as italicizing them. It also applies the two new mixins we just created to the appropriate locations.

It also sets the positioning, size and spacing of the text, icons and images that appear in the social sharing box and author info box.

In the .authorimage_uber class we use the mixin .border-radius(50%); to round the outside of the image so it will appear completely circular.

Lastly, because we are floating the author image and social sharing buttons to the left, we apply a series of rules to their parent container that will clear that float, ensuring the containers display at the proper height.

Step 3:

Click the post title of the default "Getting Started" post to go to single post view, then scroll to the bottom. It should look like this:

GhostTheming_PostBottom

Horizontal Rules and Blockquotes

Step 1:

In the "colors_and_bgs.less" file, add the following new mixins at the end of the file, then save:

.HRColor () {
	border: 0;
	border-top: 0.063em solid @color_02;
}

.BlockquoteColor () {
	background-color: @color_03;
	color: white;
	border: 0.063rem solid darken(@color_03, 10%);
}

These new mixins set the colors to apply to all hr tags and blockquote tags.

Step 2:

In the "layout.less" file, add the following new code towards the top of the file (after the img style), then save:

hr {
	.HRColor;
	.box-sizing(content-box);
	height: 0;
	display: block;
	margin: @golden + 0em 0;
	padding: 0;
	font-size: @golden + 0em;
}

Here we apply the color mixin we just created to the hr style, and set its sizing and spacing.

Step 3:

In the "typography.less" file, add the following new code after the h6 style, then save:

blockquote {
	.BlockquoteColor;
	margin: 1.563rem 0;
	padding: 1.250rem;
	font-style: italic;
	font-size: 1.2em;
}

Here we apply the color mixin we just created to the blockquote style, and set its sizing and spacing, plus its font-size and font-style.

Step 4:

In the "normalize.css" file, comment out the hr style on lines 152 to 156 and save.

We comment out these style lines as they are no longer needed now that we have our own styles for these elements.

Your blockquote and horizontal rule should now look like:

GhostTheming_BlockquoteAndHR

Responsive Media Queries

Because of the way we have built this theme from the ground up it is already responsive in many regards.

All we need to do now is make sure that as the browser window decreases in size we preserve the highest level of readability possible.

Step 1:

In the "typography.less" file, add word-wrap:break-word; to the body style, then save:

body {
 	.BodyColor;
	margin: 0;
	font-family: @default_font;
 	line-height: @golden + 0em; //set the regular line height to the golden ratio
 	font-weight: 300;
	word-wrap:break-word;
}

This will prevent any particularly long words or long hyperlinks from overflowing outside the content area.

Step 2:

Open the "mediaqueries.less" file from the UberThemeStyles > LESS folder and replace all the code therein with the following code, then save:

@media (max-width: 52.0625em) {
  .wrapper_uber {
    overflow: hidden;
  }
  .article_uber {
    padding: 0 @add_padding / 1.25 + 0em @add_padding / 1.25 + 0em @add_padding / 1.25 + 0em;
  }
  .footer_uber {
    padding-left: @add_padding / 4 + 0em;
    padding-right: @add_padding / 4 + 0em;
  }
}
@media (max-width: 47em) {
  .article_uber {
    padding: 0 @add_padding / 1.5 + 0em @add_padding / 1.5 + 0em @add_padding / 1.5 + 0em;
  }
}
@media (max-width: 40em) {
  .article_uber {
    padding: 0 @add_padding / 2.25 + 0em @add_padding / 2.25 + 0em @add_padding / 2.25 + 0em;
  }
}
@media (max-width: 35em) {
  .article_uber {
    padding: 0 @add_padding / 3.5 + 0em @add_padding / 3.5 + 0em @add_padding / 3.5 + 0em;
  }
}
@media (max-width: 30em) {
  h1.blogtitle_uber, h1.blogtitle_uber a {
    font-size: 3rem;
  }
  p.blogdescription_uber, p.blogdescription_uber a {
    font-size: 1.125rem;
    margin: 0;
  }
  .article_uber {
    padding: 0 @add_padding / 5 + 0em @add_padding / 5 + 0em @add_padding / 5 + 0em;
  }
  h1.posttitle_uber {
    font-size: 2.25em;  
  }
}

None of these media queries are designed to match up with any particular device resolution. Rather, I simply began gradually decreasing the size of my browser window until I reached a point at which any of the elements in the theme appeared too large or squashed in.

How to apply this approach will differ with every theme design, and it's a matter of looking closely at your design as you shrink the browser window to see what specifically needs to be adjusted.

The first media query of max-width: 52.0625em represents the point at which the edges of the browser window touch the outside of the white content area.

At this point the extra rectangles we added to the post title for its ribbon effect are no longer seen so I added a overflow: hidden; rule to the .wrapper_uber class so they would be hidden. I also felt the amount of padding on the articles was slightly too wide for this width, so I reduced it by a factor of 1.5. Finally, the footer content looked odd flush against the outside edge of the browser window so I added some padding to the footer.

Everything in this first media query will cascade down to affect any width less than 52.0625em, unless it is overridden by a rule in a media query targeting a smaller width.

You will see overriding rules such as this applied to the padding property of the .article_uber class, with the padding being progressively reduced as the window width reduced.

Always try to go for a smooth scaling down effect as you reduce the size of your browser, as this is a good way to judge if the adjustments you are electing to make work well for each media query width.

In the last media query of max-width: 30em the size of the blog title, blog description and post titles are also reduced, as this was the width at which they began to look unwieldy at their default size.

It will be up to you to make your best judgement on when to scale elements down by what amounts in each of your designs. Just remember that you want everything to have optimal readability at every possible width.


Add JavaScript

The very last thing left to do is add Modernizr to your theme, as well as a small piece of custom JavaScript that will make iframes, and hence most embedded videos, scale proportionally within the content width.

Step 1:

In your terminal, stop the "watch" task by pressing CTRL + C and, when prompted, typing y then pressing ENTER.

Step 2:

Run the command grunt uglify.

This will combine and minify modernizr.js and the responsive iframes code and it will also write it to your theme's "assets > js" folder under the file name "all.min.js".

Step 3:

Open the "default.hbs" file from the UberThemeStyles root folder for editing.

Step 4:

Under the stylesheet links and above the {{! Responsive Meta Tags }} comment add the following:

    {{! Scripts }}
    <script type='text/javascript' src='/assets/js/all.min.js'></script>

Step 5:

Immediately before the closing </body> add the following code, then save:

<script language="javascript" type="text/javascript">
responsive_iframes();
</script>

This initiates the responsive iframes functionality on site load.

Step 6:

Add iframe code for a YouTube video to one of your posts, then resize the browser to see if the video shrinks and grows proportionally to fit:

GhostTheming_FullsizeVid
GhostTheming_SmallVid

That's it!

We've now completed the design and development of a fully responsive Ghost theme.

You can now deploy your theme as you see fit simply by copying your theme's folder into your online Ghost installation (ie. by replicating your offline theme's file structure in your online environment).

If you have any questions at all, please fire away in the comments. I hoep you enjoyed the series, happy theming!

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…
  • Web Design
    CMS
    Defining Our Ghost Theme's Color and Basic LayoutGhost color retina
    Moving swiftly along with the styling of our Ghost theme, this tutorial sets out some width settings, the color and some basic layout adjustments.Read More…