Architecture

Bica is intended to be used as a simple starting point when writing CSS. It helps to create and maintain a mindful and scalable CSS structure. Therefore, styles are grouped into the following categories:

Settings
Settings contain global configurations like custom properties and breakpoints which are shared across the system.

Base
Base styles are default styles of html tags like headings or paragraphs without ID or class selectors. These styles serve as the foundation for everything specified afterwards in the cascade.

Objects
Objects are class-based selectors which define design patterns like containers or grids shared across the system. Classes of this category are prefixed with o-.

Components
Components are independent parts of any system. However, unity only exists when design elements are in agreement. Therefore, components here are not entirely isolated as they inherit base styles. Classes of this category are prefixed with c-.

Utilities
Utilities are high-specificity, very explicit style rules which serve one purpose. Classes of this category are prefixed with u-.

Base Elements

Bica contains styles for a huge set of HTML5 skeleton tags. See some examples here:

Catch a short abbr here. This is strong and this is emphasized! And heck, here's a link. H2O is coolyep.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Use <mark> to highlight the important stuff, use <ins> when you have inserted content afterwards and use <del> when you have deleted content later in the process.

'The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element.'

The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.

Click to Hide...

The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.

Heading

Heading

Heading

Left

Center

Right

Left

Center

Right

Left

Center

Right

Left

Center

Right

Definition List

The HTML dl tag is used for declaring a definition list. A definition list is similar to other lists but in a definition list, each list item contains two entries; a term and a description.

Grid System

Each .o-grid element can hold one or more .o-grid__col element(s) which can be sized or pushed with specific utility classes like .u-span--* or .u-push--* with modifiers ranging from 01 to 12. The modifiers represent the column-width based on overall 12 columns.

The maximum grid-width is set on the .o-grid element. The grid is always centered inside the .o-container element. Gutters are split horizontally with paddings on .o-grid and .o-grid__col elements.

Responsiveness

To set widths and shifts individually for the 4 custom min-width breakpoints defined in the settings.css append the following modifiers at the end: sm, md, lg, xl

Note: Rules based on min-width breakpoints overwrite each other from small to large!

Extending

The kit is no as-is dev dependency but a boilerplate to start with. Therefore, it can be changed or adjusted at any stage of your project. It is highly recommended to use the BEM naming approach to keep things consistent.