This project houses all the CSS for Xceptor 4.0
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bower_components
fonts
icons
img
js
logos
scss
.gitignore
.htaccess
Gruntfile.js
README.html
README.md
bower.json
index.html
layout-v2.html
layout.html
package.json
svg-defs.svg
tabs.html

README.md

Xceptor 4.0 CSS

Reading

If you're new to large CSS projects we'd recommend that you take a look at the following resources before delving into any specifics:

OOCSS

The project uses a variant of OOCSS so it's worth getting your head around this for starters. If you're new to object orientated programming it's also worth exploring the Single Responsibility Principle when applied to CSS.

Atomic Web Design

Although we're not explicitly using the Atomic Web Design terminology, the principles are the same.

ITCSS

The methodology we use throughout the project is based on ITCSS. This video will provide a good introduction.

CSS Guidelines

If you're unsure how to write something (comments, selectors, etc), take a look at CSS Guidelines. The last section also explains important OO princples further.

BEM

On larger projects, naming conventions is vital. We're using BEM.

Structure

The SCSS folder includes the following subfolder. This is very important for dealing with CSS dependencies when using the ITCSS css way of thinking (see ITCSS section above).

1.Settings

Global variables, config switches.

2.Tools

Default mixins and functions.

3.Generic

Ground-zero styles (Normalize.css, resets, box-sizing).

4.Elements-Base

Unclassed HTML elements (type selectors).

5.Objects

Cosmetic-free design patterns.

6.Components

Designed components, chunks of UI.

7.Trumps

Helpers and overrides.

For more information on the contents of each folder checkout the table of contents at the top of style.scss