Skip to content

Latest commit

 

History

History
50 lines (42 loc) · 2.9 KB

README.md

File metadata and controls

50 lines (42 loc) · 2.9 KB

fs-styles

Stylus files used by FamilySearch.org.

Folder Organization

To help organize a large CSS code base, we have split the files into different folders. Each file is then compiled into familysearch-styles.styl which is what is used on the site. See Architecture SASS Project and SMACSS Categorizing for more details

Folder Contents
Helpers Variables, mixins, and functions.
Elements Default styles applied to an HTML element any time it's used on a page.
Modules Groupings of HTML elements that form a reusable component.
Layout Styles for content layout such as grids, headers, footers, etc.
Themes Theme specific styles (colors, typography, etc.) applied to elements and modules.

File Organization

A little effort goes a long way. Please take the time to organize your CSS file so that others may quickly find what they are looking for. Divide your code into meaningful sections that denote what the rules are affecting. See CSS Guidelines for more details

Recommended Guidelines

  1. Table of contents at the top of the stylesheet denoting sections
/*------------------------------------*\
  $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS..............Section description
 * SECTION-NAME..........Section description
 * ...
 */
  1. Section headings start with $ to make searching easier ($SECTION-NAME)
/*------------------------------------*\
  $SECTION-NAME
\*------------------------------------*/

Naming Conventions

Files

When naming files, _filename denotes that the file is only a partial file and should not be compiled into a CSS file. These files are used by other files to create a fully complied CSS file. Examples include _mixins which is a list of mixins and has no selectors that would produce a CSS file.

Class Names

When naming classes, preface all classes with fs- and use BEM syntax. By doing so, we completely nulify class name collision problems. Writing BEM is really easy when using stylus since you can use the & symbol to use the class name for each element.

Variables

When naming variables, start the variable name with the most generic term and end with the most specific term. This allows auto complete to grab all variables that also belong to the generic category. For example, a variable for a blue border should be named $color-border-blue. See Sass Variable Architecture, Naming SASS Variables Modularly, and SASS Color Variables for more details