Code Standards

In the following guides, you will find some basic code formatting conventions used in LUCI.

HTML Guide

Set your text editor to use tabs with 4 spaces.
Indent nested HTML elements.
Use double quotes for attributes
Add a new line at the end of files

HTML Example

<a class="luci-link" href="somewhere.html"> Standard Text </a>

CSS Guide

Set your text editor to use tabs with 4 spaces.
Component class name should follow the BEM (Block, Element, Modifier) naming convention.
LUCI component class names should be prefixed with luci- in order to namespace the library.
Do not include vendor prefixes. Autoprefixer automatically adds these when the CSS is compiled.
LUCI does not use a global CSS reset or normalize.
List mixins before properties.
Alphabetize properties within selectors.
Add a new line between blocks.
Add a new line at the end of files.
Watch for console errors during development. SCSS lint settings are defined in .sass-lint.yml.

CSS BEM Example

.luci-block {}

.luci-block--modifier {}

.luci-block__element {}

.luci-block__element--modifier {}

HTML BEM Example

<ul class="luci-block luci-block--modifier">
    <li class="luci-block__element luci-block__element--modifier"></li>
</ul>

SCSS Guide

Elements should NOT be nested inside of the block.

.luci-block {

    .luci-block__element {
        /* This selector is too specific. */
        /* Don't nest elements inside of blocks. */
    }
}

Environmental modifiers should be nested in the selector.

.luci-block__element {

    .luci-block--modifier & {
        /* This keeps element styles all together. */
    }
}

Javascript

The component javascript used in the LUCI documentation site is meant to demonstrate presentational functionality.
JS files are not inteded for use in production.

Browser Support and Optimization

The LUCI design system is optimized for the following browsers:

Browser	Version
Google Chrome	Latest
Mozilla Firefox	Latest
Safari	Latest
Microsoft Edge	Latest

Microsoft Internet Explorer is no longer supported.