Book Image

Professional CSS3

By : Piotr Sikora
Book Image

Professional CSS3

By: Piotr Sikora

Overview of this book

CSS is the preferred technology to design modern web pages. Although CSS is often perceived as a simple language, applying modern styles to web pages with CSS and maintaining the code for larger websites can be quite tricky. We will take you right from understanding CSS to designing high-quality web pages in CSS3. We'll quickly take you through CSS3's features, and show you how to resolve common issues so you can build your basic framework. Finally, you will learn about code architecture and CSS methodologies used in scalable apps and you'll explore the various new features of CSS3, such as FlexBox, to help you create the most modern layout methodologies. By the end of the book, you will be a master at creating pure CSS web pages and will know sophisticated web design techniques, giving you an edge over other web designers.
Table of Contents (16 chapters)
15
Index

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