Class naming convention

These are the basic guidelines behind this project.

• based in BEM but reinterpreted for sass and vue
• prefixes prevent the collision with vendor styling
• the "x" stands for xamu

Explore the docs or learn how to setup the project for development at: Setup

Older package names

• @xamu-co/style-system
• @xamu-co/styles

Elements & layouts:

They are the main building blocks of any design.

Root components

Elements & layouts all share a root component

.componentName{}

1.view {
2}

Some of them will expect certain tag

1a.link {
2}

Whenever possible avoid using long names. flx will always be better than flexbox while mantaining legibility

Nested components

Elements & layouts could have nested components, to differentiate them from their parent a "-" will be used

.parentComponentName-childComponentName{}

1.view-item {
2}

Utility classes:

Each element comes tied with a set classes to alter it

1.componentName.optionalUtilityType--utilityName-utilityfirstOptionalParam-utilitysecondOptionalParam {
2}
3.componentName {
4	&.optionalUtilityType--utilityName {
5		&-utilityfirstOptionalParam {
6			&-utilitysecondOptionalParam {
7			}
8		}
9	}
10}

This allows the duplication without collision

Status

As the name implies these are for management of the design state and are usually called upon in a dinamyc way using js or related languages It can be "has" but we recommend using "is", These usually don't have need params

.elementName.is--statusName{}

1.view.is--active {
2}

Modifiers

These could modify the behavior of the component they are applied on

.elementName.--modifierName-optionaParam{}

1.view.--maxWidth-none {
2}

Some modifier could be conditionated to the presence of another one

1.view.--tm-light.--shadow {
2}

Unions

While modifiers are useful they can also get to verbose. That is whe unions come handy. Combination of modifiers, shortcuts for common modifier combinations

.elementName.--unionName-firstModifier-secondModifier{}

1.view.--flxAlign-center-stretch {
2}

If both values are equal the could be merged

1/** Long version */
2.view.--flxAlign-center-center {
3}
4
5/** Short version */
6.view.--flxAlign-center {
7}

Pseudos

Components, but this time making use of pseudo elements (:before, :after) For the pseudos we will be using data atributes.

[data-pseudoName]{}

1[data-tip] {
2}

Modifiers & Unions:

Slightly different syntax, but don't worry the concept is mantained. Some of them are expecting an argument

[data-pseudoName-modifierNameOrParam-optionalParam="optionalArgument"]{}

1[data-tip-position="top"] {
2}

Globals

Some properties can be used across the design. Global classes are prepended with "x" They also tend to override component modifiers and unions

Modifiers

These modify the behavior of any element

.--globalModifierName-value{}

1.--maxWidth-none {
2}

Just like the component modifiers but these work in any element Some modifier could be conditionated to the presence of another one

1.--tm-light.--shadow {
2}

Unions:

Condense most common modifiers of rules that require multiple parameters

.--globalUnionName-firstValue-SecondValue{}

1.--flxAlign-center-stretch {
2}

As any other union but work in any element If both values are equal the could be merged

1/** Long version */
2.--flxAlign-center-center {
3}
4
5/** Short version */
6.--flxAlign-center {
7}

Responsive styles

We are following a similar approach to the tailwind framework (only for global modifiers & unions)

1/** Hide if element has less than 640px of width */
2.--hidden:sm {
3}
4
5/** Hide if element has more than 640px of width */
6.--hidden:sm-inv {
7}

• xs: 358px, extra small, enabled in specific cases
• sm: 576px, small, enabled in specific cases
• md: 768px, medium
• lg: 1080px, large, enabled in specific cases
• xl: 1280px, extralarge