Nucleon

Our frontend starter

Inspired by itcss, by @csswizardry

This project is a combination of different standards and guideline.

1. Atomic design for components
2. ITCSS for css specificity
3. BEM for naming convention

Getting Started

Once you have got nucleon into your project, there are a handful of things we need to do before we’re ready to go.

Firstly, we need to identify any files whose name contain the word example. These files are demo and/or scaffolding files that inuitcss requires, but that you are encouraged to create and define yourself.

example.nucloen.scss
example.protons.scss
settings/_theme.example.scss

example.nucloen.scss

This is your main, or manifest, file. This is the backbone of the nucloen project, and it is responsible for @importing all other files. This is the file that we compile out into a corresponding CSS file.

You need to copy this file from the directory that your package manager installed it into, and move it to the root of your css/ directory. Once there, rename it nucleon.scss.

Next, you’ll need to update all of the @imports in that file to point at the new locations of each partial (that will depend on how your project is set up).

Once you’ve done this, you should be able to import this file in your project.

example.protons.scss

This file is a copy fron nucloen but just with the settings and tools levels settings and tools, once your setup the nucleon.scss use the first two parts of the settigns and copy them to theis file.

settings/_theme.example.scss

This is an example themeing file; it contains any settings that are available to your entire project. These variables and settings could be font families, border-radius values, etc.

Copy this file into your own css/settings/ directory and import it in the nucloen.scss file after the core settings. Now you can begin adding your own project-wide settings.

Project structure

This project contains a basic starter of css clases called Nucleon aiming to help the dev team to been consistent and avoid some caviats in browser compatibility.

Nucleon is based in the ITCSS principle of specificity. What's ITCSS Leaving the components layer to handle by the JS framework.

Nucleon

SETTINGS

Core................Framework core variables (dont change variables here use the theme file).
Colors..............Colors that will be available to the project level.
Theme...............Customize all the variables for the project on this file.
Motion..............Project-wide motion and transition settings.
Vendor..............Third party settings.

TOOLS

Font................Mixin which guarantees baseline-friendly line-heights.
Core................Project-wide mixins, allow components access project-wide variables.
Layout..............Mixins for layout composition.
Vendor..............Mixin for third party libraries.

GENERIC

Box-sizing...........Better default box-sizing.
Normalize.css........A level playing field using @necolas’ Normalize.css.
Layout...............General layout normalize.
Reset................A tiny reset to complement Normalize.css.
Shared...............Sensibly and tersely share some global commonalities (particularly useful when managing vertical rhythm).

ELEMENTS

Page.................Set up our document’s default font-size and line-height.
Headings.............Very minimal (i.e. only font-size information) for headings 1 through 6.
Images...............Base image styles.
Tables...............Simple table styles.

OBJECTS

Grid.................Generic layout module (default Foundation XY Grid).
Media................Image- and text-like content side by side. The poster-child of OOCSS.
Flag.................Table-layout-based advancement on the Media object.
List-bare............Lists with no bullets or indents.
Ratio................A container for maintaining aspect ratio of content.
Form.................Provide a common styling for form elemnts.
Table................Classes for manipulating tables.
Dividers.............Divider object.
Tabs.................Common styles for tab components.

UTILITIES

Background Colors....Helper classes that use the palette colors as background color.
Borders..............Helper classes for adding borders to elements
Fonts................Helper classes for font size consistency.
Headings.............Reassigning our heading styles to helper classes.
Print................Reset-like styles taken from the HTML5 Boilerplate.
Spacings.............Nudge bits of the DOM around with these spacing classes.
Text align...........Helper classes to align bits ot text
Text color...........Helper classes that uses the color palette for text color.
Visibility...........Helper classes to hide content