CSS Coding Philosophy

RESPONSIVE DESIGN

RESPONSIVE SIZING

To ensure that all fonts, and other elements are responsive to different screen sizes, we need to ensure that we size things (padding, margin, font-size, border-size, headings, etc) in a similar format throughout the project. For this one, we will use REM (Root EMs) over PX, EM, etc, so that changes to mobile, phablet and tablet views can be automatically updated with few code changes.

If you would like a complete rundown resource guide for how to use REMs, see this guide here. Much of this documentation was inspired by that link.

The Root Em (REM) on this website is set to 17px. See how it’s done here:

html {
  font-size: 17px; // This sets the 'root em' to be 17px
}

Every other element sizing is a reflection of the root em. For example, take this h1 rule from the custom css section:

h1, .h1 {
  font-size; 2.6rem; // 2.6rem ==> 2.6 x root em (17px) = 44.2em
}

This means that all h1s are exactly 2.6 times the size of the root em which is defined as 17px. (2.6rem = 2.6 x 17px)

There are other examples all throughout, but the idea is that we use the root em as the basis of all our measurements that will need to be responsive to screen size in the future. This will help us to add @media queries for different screen sizes, and we can declare a rule like this:

@media screen and (max-width:468px) {
  html {
    font-size; 12px; // This sets the 'root em' to be 12px
  }
}

And after setting the rule, all elements, paddings, margins that are set by root ems will change to reflect the new root em. For example:

h1, .h1 {
  font-size; 2.6rem; // 2.6rem ==> 2.6 x root em (12px) = 31.2px
}
h2, .h2 {
  font-size: 2.1rem; // 2.1rem ==> 2.1 x root em (12px) = 25.2px
}
// etc.....

This makes the elements that use root em flexible and easy to tweak.

There is also more documentation on the use of REMs in this project, which you can find in the Table of Contents menu in this documentation.

IMPROVING CODE READABILITY

To ensure that other people can come in and easily find where to make changes, we need to have adequate documentation (not extensive, some coding knowledge required) that plans for and show what we are using on the website as well as where it’s being used, and simple, organized, clean and clear to understand code.

Here are a few hard and fast rules to making sure we can accomplish this:

• Don’t Rush Your Code
• Keep It Super Simple (K.I.S.S.)
• Don’t Repeat Yourself (D.R.Y.)
• Object-Oriented CSS (O.O.C.S.S.)
• Use Comments Where You Can