Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Global styles for the website. Based on the principles of Atomic Design.


FS-styles provides both a CSS stylesheet (dist/familysearch-styles.css) and a Polymer style module (fs-styles.html) for use within Polymer web components.

<!-- Option 1. Use <link rel="stylesheet"> for global styles -->
<link rel="stylesheet" href="path/to/fs-styles/dist/familysearch-styles.min.css"/>
<!-- Option 2. Use style module for Polymer web components -->
<link rel="import" href="path/to/fs-styles/fs-styles.html"/>

<dom-module id="new-element">
    <style include="fs-styles"></style>

    <!-- ... -->

What's available?

See the pattern library at


There are a wide range of variables that the style guide creates, from media query sizes and break points, to colors and font sizes. These variables are available in both Stylus and as CSS custom properties.


Whenever you commit code, a github pre-commit hook will automatically run gulp build and add any changes to the commit. This ensures that the final output is always in sync with any changes.

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 Basic, indivisible building blocks of the site that include typography, overrides, HTML tags, and simple class names, such as buttons.
Modules Groupings of Elements that form a reusable aspect of the interface, such as modals and alerts.


Copyright © 2017 by Intellectual Reserve, Inc. See the LICENSE file for license rights and limitations.

You can’t perform that action at this time.