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.
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
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
This file is dedicated for all the most important text elements:
h1-h6pastrongspan
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>
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