Configuration (Obsolete)

These are old docs and left for historical purposes.

This is a JSON that tells what which rules it wants from atomic.css. It is used to to generate a custom build of atomic.css. This is the object that must be modified by different consumers based on their needs.

{
    'config': {
        // will be added before all classes
        'namespace': '#atomic',

        // useful to replace left/right values for LTR and RTL contexts
        'start': 'left',
        'end': 'right',
        'defaults': {
            'font-size': '16px',
            'border-color': '#555',
            'bleed-value': '-10px'
        },
        // media queries will be created based on these break points
        // min-width values must be declared for 'sm', 'md' and 'lg'.
        // classes will be created inside of these media queries if declared
        // see examples below.
        'breakPoints': {
            'sm': '767px',
            'md': '992px',
            'lg': '1200px'
        }
    },

    // pick by id (type: rule)
    'bfc': true,

    // pick by id with breakpoints (type: rule)
    'dn': {
        breakPoints: ['sm', 'md', 'lg']
    },

    // simple pick by suffix (type: pattern)
    'font-weight': {
        // if we want this rule to also be in media queries
        'n': {
          breakPoints: ['sm', 'md', 'lg']
        },
        'b': true,
        'br': true,
        'lr': true,
        'lh': true,
        'inh': true,
        '100': true,
        '200': true,
        '300': true,
        '400': true,
        '500': true,
        '600': true,
        '700': true,
        '800': true,
        '900': true
    },

    // pick by suffix and declare custom rules (type: pattern)
    'padding-x': {
        'a': true,
        'custom': [
            {suffix: '10', values: ['10px']},
            {suffix: '20', values: ['20px']},
            // if we want this rule to also be inside of media queries
            {suffix: '30', values: ['30px'], breakPoints: ['sm', 'md', 'lg']}
        ]
    },

    // pick by suffix and declare custom sequenced suffixes
    // (alphabetical order)
    'box-shadow': {
        'n': true,
        'custom-sequenced-suffix': [
            // a
            {values: ['1px 1px 4px #555']},
            // b
            {values: ['0 0 5px #333']},
            // c (if we want this rule to also be inside of media queries)
            {values: ['0 0 5px #333'], breakPoints: ['sm', 'md', 'lg']}
        ]
    },

    // pick by suffix and declare fraction rules (type: pattern)
    'width': {
        a: true,
        inh: true,
        fraction: {
            denominator: 12,
            // if we want fraction rules to also be inside of media queries
            breakPoints: ['sm', 'md', 'lg']
        }
    }
};

The config above would generate the following CSS file:

/*!
Atomic.css v0.1.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yahoo/atomic.css/blob/master/LICENSE.md
*/
#atomic .Fw-n {
  font-weight: normal;
}
#atomic .Fw-b {
  font-weight: bold;
}
#atomic .Fw-br {
  font-weight: bolder;
}
#atomic .Fw-lr {
  font-weight: lighter;
}
#atomic .Fw-100 {
  font-weight: 100;
}
#atomic .Fw-200 {
  font-weight: 200;
}
#atomic .Fw-300 {
  font-weight: 300;
}
#atomic .Fw-400 {
  font-weight: 400;
}
#atomic .Fw-500 {
  font-weight: 500;
}
#atomic .Fw-600 {
  font-weight: 600;
}
#atomic .Fw-700 {
  font-weight: 700;
}
#atomic .Fw-800 {
  font-weight: 800;
}
#atomic .Fw-900 {
  font-weight: 900;
}
#atomic .Bxsh-n {
  box-shadow: none;
}
#atomic .Bxsh--a {
  box-shadow: 1px 1px 4px #555;
}
#atomic .Bxsh--b, #atomic .Bxsh--c {
  box-shadow: 0 0 5px #333;
}
#atomic .Px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
#atomic .Px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
#atomic .Px-30 {
  padding-left: 30px;
  padding-right: 30px;
}
#atomic .W-1\/12 {
  width: 8.3333%;
}
#atomic .W-2\/12 {
  width: 16.6667%;
}
#atomic .W-3\/12 {
  width: 25%;
}
#atomic .W-4\/12 {
  width: 33.3333%;
}
#atomic .W-5\/12 {
  width: 41.6667%;
}
#atomic .W-6\/12 {
  width: 50%;
}
#atomic .W-7\/12 {
  width: 58.3333%;
}
#atomic .W-8\/12 {
  width: 66.6667%;
}
#atomic .W-9\/12 {
  width: 75%;
}
#atomic .W-10\/12 {
  width: 83.3333%;
}
#atomic .W-11\/12 {
  width: 91.6667%;
}
#atomic .W-12\/12 {
  width: 100%;
}
#atomic .Bfc {
  overflow: hidden;
  *zoom: 1;
}
#atomic .Dn {
  display: none;
}
@media(min-width:767px) {
  #atomic .Fw-n--sm {
    font-weight: normal;
  }
  #atomic .Bxsh--c--sm {
    box-shadow: 0 0 5px #333;
  }
  #atomic .Px-30--sm {
    padding-left: 30px;
    padding-right: 30px;
  }
  #atomic .W-1\/12--sm {
    width: 8.3333%;
  }
  #atomic .W-2\/12--sm {
    width: 16.6667%;
  }
  #atomic .W-3\/12--sm {
    width: 25%;
  }
  #atomic .W-4\/12--sm {
    width: 33.3333%;
  }
  #atomic .W-5\/12--sm {
    width: 41.6667%;
  }
  #atomic .W-6\/12--sm {
    width: 50%;
  }
  #atomic .W-7\/12--sm {
    width: 58.3333%;
  }
  #atomic .W-8\/12--sm {
    width: 66.6667%;
  }
  #atomic .W-9\/12--sm {
    width: 75%;
  }
  #atomic .W-10\/12--sm {
    width: 83.3333%;
  }
  #atomic .W-11\/12--sm {
    width: 91.6667%;
  }
  #atomic .W-12\/12--sm {
    width: 100%;
  }
  #atomic .Dn--sm {
    display: none;
  }
}
@media(min-width:992px) {
  #atomic .Fw-n--md {
    font-weight: normal;
  }
  #atomic .Bxsh--c--md {
    box-shadow: 0 0 5px #333;
  }
  #atomic .Px-30--md {
    padding-left: 30px;
    padding-right: 30px;
  }
  #atomic .W-1\/12--md {
    width: 8.3333%;
  }
  #atomic .W-2\/12--md {
    width: 16.6667%;
  }
  #atomic .W-3\/12--md {
    width: 25%;
  }
  #atomic .W-4\/12--md {
    width: 33.3333%;
  }
  #atomic .W-5\/12--md {
    width: 41.6667%;
  }
  #atomic .W-6\/12--md {
    width: 50%;
  }
  #atomic .W-7\/12--md {
    width: 58.3333%;
  }
  #atomic .W-8\/12--md {
    width: 66.6667%;
  }
  #atomic .W-9\/12--md {
    width: 75%;
  }
  #atomic .W-10\/12--md {
    width: 83.3333%;
  }
  #atomic .W-11\/12--md {
    width: 91.6667%;
  }
  #atomic .W-12\/12--md {
    width: 100%;
  }
  #atomic .Dn--md {
    display: none;
  }
}
@media(min-width:1200px) {
  #atomic .Fw-n--lg {
    font-weight: normal;
  }
  #atomic .Bxsh--c--lg {
    box-shadow: 0 0 5px #333;
  }
  #atomic .Px-30--lg {
    padding-left: 30px;
    padding-right: 30px;
  }
  #atomic .W-1\/12--lg {
    width: 8.3333%;
  }
  #atomic .W-2\/12--lg {
    width: 16.6667%;
  }
  #atomic .W-3\/12--lg {
    width: 25%;
  }
  #atomic .W-4\/12--lg {
    width: 33.3333%;
  }
  #atomic .W-5\/12--lg {
    width: 41.6667%;
  }
  #atomic .W-6\/12--lg {
    width: 50%;
  }
  #atomic .W-7\/12--lg {
    width: 58.3333%;
  }
  #atomic .W-8\/12--lg {
    width: 66.6667%;
  }
  #atomic .W-9\/12--lg {
    width: 75%;
  }
  #atomic .W-10\/12--lg {
    width: 83.3333%;
  }
  #atomic .W-11\/12--lg {
    width: 91.6667%;
  }
  #atomic .W-12\/12--lg {
    width: 100%;
  }
  #atomic .Dn--lg {
    display: none;
  }
}