A starter Sass-Kit for responsive projects,
which embraces OOCSS, BEM and the Atomic Design-Approach.

Documentation Download the latest release
 

About Brics

Brics is a Sass starter kit for small and large projects. It provides guidelines and methodologies for writing a scalable Sass-Project. Brics embraces OOCSS, BEM, the Atomic Design-Approach and delivers a bunch of example components to get you started for your next project.

Libsass compatible

Brics is Libsass compatible, which is a lot faster for compiling Sass files. But still, you can compile Brics with the ruby based pendant as well.

About Libsass
Scalable to it's last piece

Interested in the thoughts behind Brics? Take a peek at the used methodologies used in Brics, as well as some best practices for writing Sass.

Methodologies & Best practices

Installation

Just download a release, unzip it and start of by modifying the _Variables.scss. The variables file holds all major variables, and offers a quick styling for the essential components and project Settings.

Components

Buttons

Basic Button

Button

Positive Button

Button

Negative Button

Button

Disabled Button

Button

Inverted Button

Full-width Button

Button

Button groups

First Button Second Button Third Button

Forms

Basic Example

Inline Form

Form validation and feedback

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

Typography

This is a paragraph, inside is a bold and strong tag. You can also use the italic, sub and sup elements.
For smaller text you can use the small tag, and for special words you can use the abbreviation or the element.

Anchors & Links

Anchor

Alerts and System feedback

Informative feedback

This is an informative message.

Positive feedback

Good job submitting this request.

Negative feedback

There was one error submitting this request.

Lists

Unordered List

  • Unordered list
  • Unordered list item with
    line breaks
  • Another list item
    • Nested list item
    • Another nested list item
  • And another list item

Ordered List

  1. Ordered list
  2. Ordered list item
  3. Another ordered list item
    1. Nest ordered list
    2. Another ordered list item
  4. And another ordered list item

Quotes

Inlined quotes

This is an inlined quote sentence inside a paragraph.

Full quotes

This is a full block quote

Rulers

Grids

First column
Second column
Third column

Standard nav (Inlined into one horizontal line).

Stacked nav (Throws a list into vertical mode).

Fit nav (Forces a list to occupy 100% of the available width of it's parent).

Spinner

Standard spinner

Inverted spinner

Tables

Basic Example

Name Age Residence
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin

Condensed table

Name Age Residence
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin

Full bordered table

Name Age Residence
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin

Striped table

Name Age Residence
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin

Zebra table

Name Age Residence
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin
Max Mustermann 20 Berlin

Media

Basic Example

Media Image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet.

Reverted Example

Media Image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet.

Flag

The Flag object behaves like the media Molecule, but centers the content vertically on the height of the image.

Basic Example

Media Image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet.

Reverted Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet.

Media Image

Flexible Embeds

Display an iframe or media file with a fluid width/height ratio. A bunch of different ratios are available as modifiers. In this example the 16/9 ratio modifier was used, thus, resulting in a 16:9 aspect ratio. The default ratio was set to 1:1.

Utilities

Brics includes a set of helpful utility classes to add certain behaviors to your elements. Each utility class is also aviable via an mixin, to avoid too much chaining of utility classes.

Animations

Scaled up and faded in.
Faded in from the top.
Fading out to the top.
Pulsating element.

Brand

Display this text in the primary brand color and font family.

Display this text in the primary brand font family.

Display this text in the primary brand color.
For each color in the $brand-colors Sass map, a rule will be auto generated

An css controlled brand logo image.
For each definition in the $brand-logos sass map, a modifier class will be generated.

Display

This element hast is displayed as a block element.
This element is hidden for both screenreaders and browsers.
This element is only visaully hidden but maintains it's layout.

Layout

This element is floated to it's right boundaries.
This element is floated to it's left boundaries.
This element is floated to it's left boundaries and respect it's layout boundaries since the clearfix class was wrapped around it.

Spacings

Brics has padding and margin spacing utilities built in. For each direction a set of 2 classes(basic spacing and half spacing value) a class will be generated, using a name scheme which you will also find on all width utility classes.

Use the classes by choosing either padding(.u-p) or margin(.u-m), the direction shorthand('r' for right, 'b' for bottom etc.) and the targeted value. For example, if you want a full margin on the bottom of your target element, and a half margin on the top, use the class .u-mb1/1 for the bottom, and the .u-mt1/2 for the top margin.

This element has a basic margin on all sides.
This element has a half margin on the left side.
This element has a half margin on the bottom side.

Typography

This text is centered.
This text is aligned to the right.
This text is aligned to the left.
This text is smaller than the average base font-size.
This text is larger than the average base font-size.

The 'u-textBreak' class automatically breaks words which exceed their boundary widths. Below you will find an example without and with the utility class.

Extralongwordwithoutspacesandbreaksssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
Extralongwordwithoutspacesandbreaksssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
This text is inverted from the base text color.
  • A list with
  • the standard
  • list styles
  • A list
  • without any decorative
  • list styles

A anchor with and without decorative link styles.

Widths

Brics has a set of percentage based width classes built in. The classnames are following the name scheme which is also widely used for the spacing utilities.

Use the classes by choosing the targeted width out of a range of on whole(1/1) up to one twelfth(1/12). For example, if you want your target element to be one half of it's parent width, use the class .u-w1/2.

50%
33%
25%
... and so on.