Style Guide for Your Mindful Year
The two typefaces (you may know them as “fonts”) used for Your Mindful Year are Raleway and Lato. Most all of the website is set using Lato, with Raleway reserved for headings and type that needs emphasis.
By default, all headings (h1, h2, h3, h4, h5, and h6) are set in Raleway. Everything else is set in Lato.
Both fonts are available for download below should you need them for other purposes:
Like all “font families,” both Raleway and Lato have multiple “weights.” The weight refers to the thickness of the letters. Most people know “regular” and “bold,” but may not know there are several different weights, such as (ranging from thinnest to thickest):
- Black/Extra Bold
Below are both examples of each font family and their different weights:
Raleway Thin 100
Raleway Light 300
Raleway Normal 400
Raleway Medium 500
Raleway Semibold 600
Raleway Bold 700
Raleway Extra Bold 800
Lato Thin 100
Lato Light 300
Lato Normal 400
Lato Bold 700
The 3-digit numbers at the end of the font name refer to it’s “weight” in CSS. You can reference these numbers to change the thickness of particular text just by adding the “font-weight: xxx” attribute to a style tag on a HTML element. An example would be the following, which would change the font’s weight to 700, which would be “Bold.”
Alternatively, you can also just declare font-weight: bold;, but the idea behind the numerical weights is that there’s more granularity than simply “normal” or “bold.”
The color scheme for Your Mindful Year is comprised predominantly of purple and green. The rest of the color palette uses white and a few shades of gray to maintain a clean and cohesive aesthetic.
Below are the two main colors, followed by their hexadecimal color codes which will come in handy if you should need to find the exact same color.
Because it’s very difficult to remember hexadecimal color codes, I’ve created a simple “helper” class in CSS that can be applied to any HTML element to easily style the color of any text.
- Purple – Simply add class=”purple” to any HTML element.
- Green – Simply add class=”green” to any HTML element.
Your Mindful Year uses photographs of nature to evoke a sense of calm and peace. These images are used to add visual interest to the page and draw the reader’s eyes towards certain areas to prompt action, such as to sign-up for Your Mindful Year. Because it’s be conscious of copyright law, it’s essential to only use a) images you hold the copyright to, b) images that have been purchased (through a “stock house”, such as iStockPhoto, ShutterStock, ThinkStock), or c) images that are free for commerical use. All of the images currently on the site have been made freely available for commercial use.
Sources for Quality, Free Stock Photos
There are many places to go for free images, but most of them are of low quality. Here are the best that feature professional-quality images:
There are areas of Your Mindful Year where text overlays a large image that spans the width of the page, as seen on the “Home” and “Demo” pages and pictured below.
To achieve the effect, view the code below, which is the HTML and CSS responsible for the section at the top of the “Demo” page. Make sure to replace the background-image: url(http://image_url_here.com/image.jpg) with the URL of the new image that will be used as the background that the text will be placed on.
It’s important that class=”full-width-image” be applied to the div or section element (in this example I’ve used a “section” HTML element, but it’ll work just fine on div’s, too). Then you’ll set the background image by adding style=”background: url(http://image_url_here.com/image.jpg” to the HTML element.
The trailing numbers can look a bit intimidating but I’ll do my best to explain. In this scenario, I needed to position the image background so that the text would be positioned over the sky. Here are the parts of the CSS styles that are applied to it
- background: url(URL_HERE) no-repeat -20px -32px;
The URL part should be pretty straightforward. “no-repeat” makes sure that the image doesn’t repeat in case it doesn’t happen to take up all of the box that it’s in. The next two numbers (-20px and -32px) are the X (horizontal) and Y (vertical) positions, respectively. For the X position, if you put a positive value, it’ll move the image to the right that distance. If you put a negative, it’ll move the image to the left. Same goes for the Y position, but for up/down; a positive pixel value will move it up, and a negative one will move it down. I hope that makes sense!
- padding: 20px 50px 180px;
This padding makes the HTML element bigger. Think of the HTML element like a box; if you put padding on the inside, it reduces the space inside that can be occupied. But by default, CSS works a little differently, making it so the box gets bigger when you add more padding. It’s rather strange, but I hope that makes sense. In this case, 20px refers to the amount of space between the top of the image and the top of whatever’s inside of it. 50px refers to the left and right sides, so they’ll have. I’ve used the “shorthand” way of setting the padding (here’s a quick reference if you’re unfamiliar), but you can also just use the normal way, like:
- background-size: 811px
This refers to the image’s size, specifically its width. The height will scale automatically while keeping its “aspect ratio” that. You don’t have to add this background-size style, but it’s helpful if you want to stretch or shrink the size of the image. If possible, I recommend using an image that is naturally 960 pixels wide (or wider) to avoid having to use this to size up the image (which can make things blurry).