BRiCSS

General principles

Simple responsive naming convention

BRiCSS is a simple low-level CSS abstraction and a naming convention based on abbreviations of CSS class names and attributes.
CSS you really use

Just set CSS properties you really use into your designs and code.
Responsive on-demand

Optimized CSS output file size thanks to selective responsive CSS properties you really use.
Automatic documentation

An interactive documentation of CSS output is automatically generated.
Low-engineered

Only a browser is required.
JSON based

BRiCSS is a JSON file based solution to generate a tailored CSS file library.
Offline

Works even with no Internet connection.
Design Systems friendly

Integrates seamlessly into a Design System.
Instant file size

Instantly observe the file size impact of your settings.
Copy or download

Just refresh your browser to get the latest version of your custom CSS library.

Requirements

A text editor, a web server and a browser.

Get started

1. Download

Download or clone the starter project and unpack to any web server.
2. Edit

Edit build.json file to fit your needs.
3. Run through your browser!

Interactive documentation is generated automatically. Just click to download or copy your new CSS library.

Single property

Here is the most basic JSON with non-responsive settings and a single property involved (display).


                                class="dis-flex"

⤷ display flex


                                class="dis-inline-flex"

⤷ display inline-flex


                                class="dis-none"

⤷ display none

Legend

properties.display.prefix CSS property abbreviation
settings.separator Common separator
properties.display.name Value name

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {}
    },
    "tokens": {},
    "properties": {
        "display": {
            "prefix": "dis",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [],
            "responsive": false,
            "generate_utility": false
        }
    }
}

Generated CSS

                                .dis-flex {
    display: flex;
}
.dis-inline-flex {
    display: inline-flex;
}
.dis-none {
    display: none;
}

Changing CSS property prefix

Simple consequence of a custom CSS property prefix change.


                                class="d-flex"

⤷ display flex


                                class="d-inline-flex"

⤷ display inline-flex


                                class="d-none"

⤷ display none

Legend

properties.display.prefix CSS property abbreviation
settings.separator Common separator
properties.display.name Value name

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {}
    },
    "tokens": {},
    "properties": {
        "display": {
            "prefix": "d",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [],
            "responsive": false,
            "generate_utility": false
        }
    }
}

Generated CSS

                                .d-flex {
    display: flex;
}
.d-inline-flex {
    display: inline-flex;
}
.d-none {
    display: none;
}

Adding `!important` keyword utility

In addition of standard CSS classes, utility classes with !important keyword may be added to the generation selectively for each CSS property just by setting generate_utility to true on the specified CSS property.


                                class="d-flex"

⤷ standard display flex


                                class="u-d-flex"

⤷ utility display flex with !important keyword applied

Legend

properties.display.prefix CSS property abbreviation
settings.separator Common separator
properties.display.name Value name
settings.utilitiesPrefix Utility prefix

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {}
    },
    "tokens": {},
    "properties": {
        "display": {
            "prefix": "d",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [],
            "responsive": false,
            "generate_utility": true
        }
    }
}

Generated CSS

                                .d-flex {
    display: flex;
}
.u-d-flex {
    display: flex !important;
}
.d-inline-flex {
    display: inline-flex;
}
.u-d-inline-flex {
    display: inline-flex !important;
}
.d-none {
    display: none;
}
.u-d-none {
    display: none !important;
}

Custom value names

Value names are optional. By default, values are displayed as names. You can add custom names. If no custom name is set for, value is used as name.


                                class="d-fx"

⤷ display flex


                                class="d-ifx"

⤷ display inline-flex


                                class="d-none"

⤷ display none

Legend

properties.display.prefix CSS property abbreviation
settings.separator Common separator
properties.display.name Value name

Related JSON settings

Custom names must be ordered the same as values

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {}
    },
    "tokens": {},
    "properties": {
        "display": {
            "prefix": "d",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [
                "fx",
                "ifx"
            ],
            "responsive": false,
            "generate_utility": false
        }
    }
}

Generated CSS

                                .d-fx {
    display: flex;
}
.d-ifx {
    display: inline-flex;
}
.d-none {
    display: none;
}

Adding responsive

Now we set up 3 screen sizes named "xs, "sm" and "lg" into settings.screenSizes.


                                class="d-flex--xs"

⤷ display flex on xs screen sizes


                                class="d-inline-flex--sm"

⤷ display inline-flex on sm screen sizes


                                class="d-none--xs d-none--sm"

⤷ display none on xs and sm screen sizes with class names


                                d-none="xs,sm"

⤷ display none on xs and sm screen sizes with attribute

Legend

properties.display.prefix CSS property abbreviation
settings.separator Common separator
properties.display.name Value name
settings.responsiveSeparator Responsive separator
settings.screenSizes Screen size name

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {
            "xs": ["0px", "599px"],
            "sm": ["600px", "959px"],
            "lg": ["960px", "infinite"]
        }
    },
    "tokens": {},
    "properties": {
        "display": {
            "prefix": "d",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [],
            "responsive": true,
            "generate_utility": false
        }
    }
}

Generated CSS

                                .d-flex {
    display: flex;
}
.d-inline-flex {
    display: inline-flex;
}
.d-none {
    display: none;
}
    
/*START @media xs*/
@media (min-width: 0px) and (max-width: 599px) {
    
    .d-flex--xs,
    [d-flex*="xs"] {
        display: flex;
    }
    .d-inline-flex--xs,
    [d-inline-flex*="xs"] {
        display: inline-flex;
    }
    .d-none--xs,
    [d-none*="xs"] {
        display: none;
    }
}
/*END @media xs*/

/*START @media sm*/
@media (min-width: 600px) and (max-width: 959px) {
    
    .d-flex--sm,
    [d-flex*="sm"] {
        display: flex;
    }
    .d-inline-flex--sm,
    [d-inline-flex*="sm"] {
        display: inline-flex;
    }
    .d-none--sm,
    [d-none*="sm"] {
        display: none;
    }
}
/*END @media sm*/

/*START @media lg*/
@media (min-width: 960px) {
    
    .d-flex--lg,
    [d-flex*="lg"] {
        display: flex;
    }
    .d-inline-flex--lg,
    [d-inline-flex*="lg"] {
        display: inline-flex;
    }
    .d-none--lg,
    [d-none*="lg"] {
        display: none;
    }
}
/*END @media lg*/

Adding responsive selectively

Responsive is selectively adjustable for each CSS property. For the following example, 3 screen sizes are set: "xs, "sm" and "lg" into settings.screenSizes. The CSS property display is responsive, align-item is not responsive


                                class="d-flex--xs"

⤷ display flex on xs screen sizes


                                class="ai-center"

⤷ align-items flex-center


                                class="d-none--xs d-none--sm"

⤷ display none on xs and sm screen sizes with class names


                                d-none="xs,sm"

⤷ display none on xs and sm screen sizes with attribute

Legend

properties[CSS_PROPERTY].prefix CSS property abbreviation
settings.separator Common separator
properties[CSS_PROPERTY].name Value name
settings.responsiveSeparator Responsive separator
settings.screenSizes Screen size name

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {
            "xs": ["0px", "599px"],
            "sm": ["600px", "959px"],
            "lg": ["960px", "infinite"]
        }
    },
    "tokens": {},
    "properties": {
        "display": {
            "prefix": "d",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [],
            "responsive": true,
            "generate_utility": false
        },
        "align-items": {
            "prefix": "ai",
            "generate_from": "",
            "values": [
                "baseline",
                "center",
                "flex-start",
                "flex-end"
            ],
            "names": [
                "baseline",
                "center",
                "start",
                "end"
            ],
            "responsive": false,
            "generate_utility": false
        }
    }
}

Generated CSS

                                .d-flex {
    display: flex;
}
.d-inline-flex {
    display: inline-flex;
}
.d-none {
    display: none;
}
.ai-baseline {
    align-items: baseline;
}
.ai-center {
    align-items: center;
}
.ai-start {
    align-items: flex-start;
}
.ai-end {
    align-items: flex-end;
}

/*START @media xs*/
@media (min-width: 0px) and (max-width: 599px) {
    .d-flex--xs,
    [d-flex*="xs"] {
        display: flex;
    }
    .d-inline-flex--xs,
    [d-inline-flex*="xs"] {
        display: inline-flex;
    }
    .d-none--xs,
    [d-none*="xs"] {
        display: none;
    }
}
/*END @media xs*/

/*START @media sm*/
@media (min-width: 600px) and (max-width: 959px) {
    .d-flex--sm,
    [d-flex*="sm"] {
        display: flex;
    }
    .d-inline-flex--sm,
    [d-inline-flex*="sm"] {
        display: inline-flex;
    }
    .d-none--sm,
    [d-none*="sm"] {
        display: none;
    }
}
/*END @media sm*/

/*START @media lg*/
@media (min-width: 960px) {
    .d-flex--lg,
    [d-flex*="lg"] {
        display: flex;
    }
    .d-inline-flex--lg,
    [d-inline-flex*="lg"] {
        display: inline-flex;
    }
    .d-none--lg,
    [d-none*="lg"] {
        display: none;
    }
}
/*END @media lg*/

Responsive utility

Utility class names behave just like other standard responsive classes and responsive attributes. The !important keyword may be added to the responsive generation selectively for each CSS property just by setting generate_utility to true and responsive to true. The following example sets up 3 screen sizes named "xs, "sm" and "lg" into settings.screenSizes.


                                class="u-d-flex--xs"

⤷ display flex with !important keyword applied on xs screen sizes


                                u-d-flex="xs,sm"

⤷ display flex with !important keyword applied on both xs and sm screen sizes

Legend

settings.utilitiesPrefix Utility prefix
properties.display.prefix CSS property abbreviation
settings.separator Common separator
properties.display.name Value name
settings.responsiveSeparator Responsive separator
settings.screenSizes Screen size name

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {
            "xs": ["0px", "599px"],
            "sm": ["600px", "959px"],
            "lg": ["960px", "infinite"]
        }
    },
    "tokens": {},
    "properties": {
        "display": {
            "prefix": "d",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [],
            "responsive": true,
            "generate_utility": true
        }
    }
}

Generated CSS

                                .d-flex {
    display: flex;
}
.u-d-flex {
    display: flex !important;
}
.d-inline-flex {
    display: inline-flex;
}
.u-d-inline-flex {
    display: inline-flex !important;
}
.d-none {
    display: none;
}
.u-d-none {
    display: none !important;
}

/*START @media xs*/
@media (min-width: 0px) and (max-width: 599px) {
    .d-flex--xs,
    [d-flex*="xs"] {
        display: flex;
    }
    .u-d-flex--xs,
    [u-d-flex*="xs"] {
        display: flex !important;
    }
    .d-inline-flex--xs,
    [d-inline-flex*="xs"] {
        display: inline-flex;
    }
    .u-d-inline-flex--xs,
    [u-d-inline-flex*="xs"] {
        display: inline-flex !important;
    }
    .d-none--xs,
    [d-none*="xs"] {
        display: none;
    }
    .u-d-none--xs,
    [u-d-none*="xs"] {
        display: none !important;
    }
}
/*END @media xs*/

/*START @media sm*/
@media (min-width: 600px) and (max-width: 959px) {
    .d-flex--sm,
    [d-flex*="sm"] {
        display: flex;
    }
    .u-d-flex--sm,
    [u-d-flex*="sm"] {
        display: flex !important;
    }
    .d-inline-flex--sm,
    [d-inline-flex*="sm"] {
        display: inline-flex;
    }
    .u-d-inline-flex--sm,
    [u-d-inline-flex*="sm"] {
        display: inline-flex !important;
    }
    .d-none--sm,
    [d-none*="sm"] {
        display: none;
    }
    .u-d-none--sm,
    [u-d-none*="sm"] {
        display: none !important;
    }
}
/*END @media sm*/

/*START @media lg*/
@media (min-width: 960px) {
    .d-flex--lg,
    [d-flex*="lg"] {
        display: flex;
    }
    .u-d-flex--lg,
    [u-d-flex*="lg"] {
        display: flex !important;
    }
    .d-inline-flex--lg,
    [d-inline-flex*="lg"] {
        display: inline-flex;
    }
    .u-d-inline-flex--lg,
    [u-d-inline-flex*="lg"] {
        display: inline-flex !important;
    }
    .d-none--lg,
    [d-none*="lg"] {
        display: none;
    }
    .u-d-none--lg,
    [u-d-none*="lg"] {
        display: none !important;
    }
}
/*END @media lg*/

With tokens

Tokens are lists of names associated to values, organized by families and reusable. Tokens are optional and must be set into tokens object. Use tokens when the same set of names/values are applicable on mulitple CSS properties. Tokens avoid repeating same names and values on mulitple CSS properties.

Every token is written as CSS variable always available.


                                class="c-primary"

⤷ color primary


                                class="bc-primary"

⤷ background-color primary

Legend

properties[CSS_PROPERTY].prefix CSS property abbreviation
settings.separator Common separator
tokens.colors.name Value name

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {}
    },
    "tokens": {
        "colors": {
            "primary": "red",
            "secondary": "green",
            "ternary": "blue"
        }
    },
    "properties": {
        "background-color": {
            "prefix": "bc",
            "generate_from": "colors",
            "values": [],
            "names": [],
            "responsive": false,
            "generate_utility": false
        },
        "color": {
            "prefix": "c",
            "generate_from": "colors",
            "values": [],
            "names": [],
            "responsive": false,
            "generate_utility": false
        }
    }
}

Generated CSS

                                :root {
    /* CSS variables naming convention for demo only (not generated) */
    --CSS_VARIABLES_PREFIX-TOKEN_FAMILY-TOKEN_NAME: TOKEN_VALUE;

    /* Real results below */
    /* Design System CSS variables start with --bri- */
    --bri-colors-primary: red;
    --bri-colors-secondary: green;
    --bri-colors-ternary: blue;
}

.bc-primary {
    background-color: var(--bri-colors-primary, red);
}
.bc-secondary {
    background-color: var(--bri-colors-secondary, green);
}
.bc-ternary {
    background-color: var(--bri-colors-ternary, blue);
}
.c-primary {
    color: var(--bri-colors-primary, red);
}
.c-secondary {
    color: var(--bri-colors-secondary, green);
}
.c-ternary {
    color: var(--bri-colors-ternary, blue);
}

With tokens + other names and values

Tokens are additional through tokens object. It means that on each CSS property, you can set standard names and values in addition of tokens.


                                class="c-primary"

⤷ color primary


                                class="c-foo"

⤷ color foo


                                class="bc-primary"

⤷ background-color primary


                                class="bc-deepskyblue"

⤷ background-color deepskyblue

Legend

properties[CSS_PROPERTY].prefix CSS property abbreviation
settings.separator Common separator
tokens.colors.name or properties[CSS_PROPERTY].name
Value name

Related JSON settings

                                {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {}
    },
    "tokens": {
        "colors": {
            "primary": "red",
            "secondary": "green",
            "ternary": "blue"
        }
    },
    "properties": {
        "background-color": {
            "prefix": "bc",
            "generate_from": "colors",
            "values": ["deepskyblue"],
            "names": [],
            "responsive": false,
            "generate_utility": false
        },
        "color": {
            "prefix": "c",
            "generate_from": "colors",
            "values": ["#123456"],
            "names": ["foo"],
            "responsive": false,
            "generate_utility": false
        }
    }
}

Generated CSS

                                :root {
    /* CSS variables naming convention for demo only (not generated) */
    --CSS_VARIABLES_PREFIX-TOKEN_FAMILY-TOKEN_NAME: TOKEN_VALUE;

    /* Real results below */
    /* Design System CSS variables start with --bri- */
    --bri-colors-primary: red;
    --bri-colors-secondary: green;
    --bri-colors-ternary: blue;
}
.bc-deepskyblue {
    background-color: deepskyblue;
}
.bc-primary {
    background-color: var(--bri-colors-primary, red);
}
.bc-secondary {
    background-color: var(--bri-colors-secondary, green);
}
.bc-ternary {
    background-color: var(--bri-colors-ternary, blue);
}
.c-foo {
    color: #123456;
}
.c-primary {
    color: var(--bri-colors-primary, red);
}
.c-secondary {
    color: var(--bri-colors-secondary, green);
}
.c-ternary {
    color: var(--bri-colors-ternary, blue);
}

JSON Settings

JSON settings explained one by one.

                            {
    "settings": {
        "separator": "-",
        "responsiveSeparator": "--",
        "utilitiesPrefix": "u",
        "cssVariablesPrefix": "bri",
        "screenSizes": {
            "xs": ["0px", "599px"],
            "sm": ["600px", "959px"],
            "md": ["960px", "1199px"],
            "lg": ["1200px", "infinite"]
        }
    }
}

separator String: A single or few characters to split names, values utility prefixes.
responsiveSeparator String: A single or few characters dedicated to split screen sizes names from other expressions.
utilitiesPrefix String: A single or few characters dedicated to utilities (!important keyword).
cssVariablesPrefix String: A single or few characters used for tokens CSS variables.
screenSizes Object: Defines screen sizes. Object keys are screen sizes names.
screenSizes[NAME] Array: Contains 2 strings entries: lower screen size limit, higher screen size limit both used into CSS media query. For example ["960px", "1199px"]. For unlimited higher screen size limit, just set "infinite" as follows: ["960px", "infinite"].

JSON Tokens

Tokens are useful when multiple CSS properties contains the same set of names/values.

Tokens are optional, leave empty if unused. Tokens are simple lists of names associated to values, organized by families and reusable.

Each token is written as CSS variables always available.

Related JSON tokens

                                {
    "tokens": {
        "colors": {
            "primary-100": "#F1F4F4",
            "primary-200": "#E3EAEA",
            "primary-300": "#B9C1C2",
            "primary-400": "#7E8485",
            "primary-500": "#313435",
            "primary-600": "#232A2D",
            "primary-700": "#182026",
            "primary-800": "#0F171E",
            "primary-900": "#091019"
        },
        "spacings": {
            "1": "4px",
            "2": "8px",
            "3": "12px",
            "4": "16px",
            "5": "24px",
            "6": "32px",
            "7": "48px",
            "8": "64px",
            "9": "96px"
        }
    }
}

Generated CSS

                                :root {
    /* CSS variables naming convention for demo only (not generated) */
    --CSS_VARIABLES_PREFIX-TOKEN_FAMILY-TOKEN_NAME: TOKEN_VALUE;

    /* Real results */
    --dsg-colors-primary-100: #F1F4F4;
    --dsg-colors-primary-200: #E3EAEA;
    --dsg-colors-primary-300: #B9C1C2;
    --dsg-colors-primary-400: #7E8485;
    --dsg-colors-primary-500: #313435;
    --dsg-colors-primary-600: #232A2D;
    --dsg-colors-primary-700: #182026;
    --dsg-colors-primary-800: #0F171E;
    --dsg-colors-primary-900: #091019;  
    
    --dsg-spacings-1: 4px;
    --dsg-spacings-2: 8px;
    --dsg-spacings-3: 12px;
    --dsg-spacings-4: 16px;
    --dsg-spacings-5: 24px;
    --dsg-spacings-6: 32px;
    --dsg-spacings-7: 48px;
    --dsg-spacings-8: 64px;
    --dsg-spacings-9: 96px;
}

JSON Properties

JSON properties is the core of the library, properties is an object into which each key is a valid CSS property name. Here is the anatony of a CSS property item.

                                {
    "properties": {
        "display": {
            "prefix": "d",
            "generate_from": "",
            "values": [
                "flex",
                "inline-flex",
                "none"
            ],
            "names": [],
            "responsive": true,
            "generate_utility": false
        },
        "align-items": {
            "prefix": "ai",
            "generate_from": "",
            "values": [
                "baseline",
                "center",
                "flex-start",
                "flex-end"
            ],
            "names": [
                "baseline",
                "center",
                "start",
                "end"
            ],
            "responsive": true,
            "generate_utility": false
        }
    }
}

prefix String: A single or few characters that defines the abbreviation used for this CSS property.
generate_from String: Refers to a token family defined into tokens object. Tokens class names are generated in addition of standard class names. If set and valid, the library generates all class names for this CSS property with their associated names to values.
values Array: List of valid CSS values you wish to use for your libray. If no properties[CSS_PROPERTY_NAME].name is associated
names Array: Optional. By default, values are used as name. If a name is set in properties[CSS_PROPERTY_NAME].name, the library uses that name for the secified value. Custom names must be ordered the same as values
responsive Boolean: Defines whether or not the class name is responsive. Setting choice to true may increase final file size significantly, make sure this CSS property really needs responsive.
generate_utility Boolean: Utility class names are generated additionally. Defines whether or not all class names of this CSS property are duplicated as utility, that is class names prefixed with the settings.utilitiesPrefix prefix and values added with the keyword !important. Setting choice to true may increase final file size significantly, make sure this CSS property really needs utilities class names.

General principles

Simple responsive naming convention

CSS you really use

Responsive on-demand

Automatic documentation

Low-engineered

JSON based

Offline

Design Systems friendly

Instant file size

Copy or download

Requirements

Get started

1. Download

2. Edit

3. Run through your browser!