Preparing your project

Starting your project and planning it is one of the most important processes. You need to create a simple strategy for keeping variables and mixins and also create a proper file structure. This chapter is about the most known problems in planning your file structure and the partialization of files in your project.

Files structure

The most important thing when you are starting a project is to make a good plan of its process. First, you will need to separate settings:

• Fonts
• Variables
• Mixins

Then you will need to partialize your project. You will need to create files for repeatable elements along all sites:

• Header
• Footer
• Forms

Then you will need to prepare next partialization—specific views of styling and elements, for example:

• View home
• View blog
• View single post
• View contact page

How to keep variables in a project

What can you keep in variables? Yeah, that is a good question, for sure:

• Colors (of fonts, backgrounds, and elements)
• Global font sizes (like H1-H6, p, and so on)
• Grid dividers
• Global paddings/margins

How and where to keep mixins (local and global)

In this file, you can collect your mostly used mixins. I've divided it into local and global. In global mixins, I'm gathering the most used mixins I'm using along all projects.

In local mixins, I recommend to gather those mixins that you will use only in this project:

• Dedicated gradient
• Font styling including font family size and so on
• Hover/active states and so on

Keep typography styles in a separate file

This file is dedicated for all the most important text elements:

• h1-h6
• p
• a
• strong
• span

Additionally, you can add classes like the following:

• .h1-h6
• .red .blue (or any other which you know that will repeat in your texts)
• .small, .large

Why should you use classes like .h1-.h6?

Yeah, it's a pretty obvious question. Sometimes you cannot repeat h1-h6 elements, but, for example, on a blog, you need to make them the same font style as h1. This is the best usage of this style, for example (HTML structure):

<h1> Main title</h1>
<h2>Subtitle</h2>
<p>... Text block ... </p>

<h2>Second subtitle</h2>
<p>... Text block ... </p>

<p class="h2">Something important</p>
<p>... Text block ... </p>

<p class="h1">Something important</p>
<p>... Text block ... </p>

Views of specific elements

In the following listed files, you can gather all elements that are visible in some specific views. For example, in a blog structure, you can have a view of single post or page view. So you need to create files:

_view_singlepost.sass
_view_singlepage.sass
_view_contactpage.sass

Tip

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

• Log in or register to our website using your e-mail address and password.
• Hover the mouse pointer on the SUPPORT tab at the top.
• Click on Code Downloads & Errata.
• Enter the name of the book in the Search box.
• Select the book for which you're looking to download the code files.
• Choose from the drop-down menu where you purchased this book from.
• Click on Code Download.

You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

• WinRAR / 7-Zip for Windows
• Zipeg / iZip / UnRarX for Mac
• 7-Zip / PeaZip for Linux