Instead of manually typing out each line of CSS you’re going to require for your Ghost theme, we’re going to get you setup to become highly efficient in your development through use of the CSS preprocessor named Stylus.
Stylus can be described as a way of making CSS smart. It gives you the ability to define variables, create blocks of code that can be easily reused, perform mathematical calculations, and more. After Stylus code is written, it is compiled into a regular CSS file that is then linked into your design in the usual fashion.
It is an extremely powerful tool with many capabilities, so we won’t go into them all here; however, we will cover some of the essential features that will feature heavily in our theme development process.
This article by Kezz Bracey, David Balderston, and Andy Boutte, author of the book Getting Started with Ghost, covers how to create CSS via the Stylus preprocessor.
(For more resources related to this topic, see here.)
Variables
Stylus has the ability to create variables to hold any piece of information from color codes to numerical values for use in your layout. For example, you could map out the color scheme of your design like this:
default_background_color = #F2F2F2 default_foreground_color = #333 default_highlight_color = #77b6f9
You could then use these variables all throughout your code instead of having to type them out multiple times:
body {
background-color: default_background_color;
}
a {
color: default_highlight_color;
}
hr {
border-color: default_foreground_color;
}
.post {
border-color: default_highlight_color;
color: default_foreground_color;
}
After the preceding Stylus code was compiled into CSS, it would look like this:
body {
background-color: #F2F2F2;}
a {
color: #77b6f9;
}
hr {
border-color: #333;
}
.post {
border-color: #77b6f9;
color: #333;
}
So not only have you been saved the trouble of typing out these color code values repeatedly, which in a real style sheet means a lot of work, but you can also now easily update the color scheme of your site simply by changing the value of the variables you created.
Variables come in very handy for many purposes, as you’ll see when we get started on theme creation.
Stylus syntax
Stylus code uses a syntax that reads very much like CSS, but with the ability to take shortcuts in order to code faster and more smoothly. With Stylus, you don’t need to include curly braces, colons, or semicolons. Instead, you use tab indentations, spaces, and new lines.
For example, the code I used in the last section could actually be written like this in Stylus:
body background-color default_background_color a color default_highlight_color hr border-color default_foreground_color .post border-color default_highlight_color color default_foreground_color
You may think at first glance that this code is more difficult to read than regular CSS; however, shortly we’ll be getting you running with a syntax highlighting package that will make your code look like this:
With the syntax highlighting package in place you don’t need punctuation to make your code readable as the colors and emphasis allow you to easily differentiate between one thing and another.
The chances are very high that you’ll find coding in this manner much faster and easier than regular CSS syntax. However, if you’re not comfortable, you can still choose to include the curly braces, colons, and semicolons you’re used to and your code will still compile just fine.
The golden rules of writing in Stylus syntax are as follows:
- After a class, ID, or element declaration, use a new line and then a tab indentation instead of curly braces
- Ensure each line of a style is also subsequently tab indented
- After a property, use a space instead of a colon
- At the end of a line, after a value, use a new line instead of a semicolon
Mixins
Mixins are a very useful way of preventing yourself from having to repeat code, and also to allow you to keep your code well organized and compartmentalized. The best way to understand what a mixin is, is to see one in action. For example, you may want to apply the same font-family, font-weight, and color to each of your heading tags. So instead of writing the same thing out manually for each H tag level, you could create a mixin as follows:
header_settings() font-family Georgia font-weight 700 color #454545
You could then call that mixin into the styles for your heading tags:
h1 header_settings() font-size 3em h2 header_settings() font-size 2.25em h3 header_settings() font-size 1.5em
When compiled, you would get the following CSS:
h1 {
font-family: Georgia;
font-weight: 700;
color: #454545;
font-size: 3em;
}
h2 {
font-family: Georgia;
font-weight: 700;
color: #454545;
font-size: 2.25em;
}
h3 {
font-family: Georgia;
font-weight: 700;
color: #454545;
font-size: 1.5em;
}
As we move through the Ghost theme development process, you’ll see just how useful and powerful Stylus is, and you’ll never want to go back to handcoding CSS again!
Summary
You now have everything in place and ready to begin your Ghost theme development process. You understand the essentials of the Stylus, the means by which we’ll be creating your theme’s CSS.
Resources for Article:
Further resources on this subject:
- Advanced SOQL Statements [Article]
- Enabling your new theme in Magento [Article]
- Introduction to a WordPress application’s frontend [Article]
