@xamu-co/styles v4.1.2

This file should be improved

CLASS NAMING CONVENTION

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

ELEMENT or LAYOUT:

.x-elementName{} EJ: .x-view{}

• some of this will expect certain tag EJ: a.x-link{}
• whenever possible avoid using long names

CHILDS:

• a "-" will be used to showcase nested elements .x-parentName-childName{} EJ: .x-view-item{}

UTILITY CLASSES:

• each element comes tied with a set classes to alter it EJ: .x-view.is__active{}
• this allows the duplication without collision

STATUS: (is or has)

.x-elementName.isstatusName{} EJ: .x-view.isactive{}

MODIFIERS:

.x-elementName.mmodifierName-value{} EJ: .x-view.mmaxWidth-none{}

• some modifier could be conditionated to the presence of another one EJ: .x-view.mtheme-light.mshadow{}

UNIONS: (combination of modifiers, shortcuts for common modifier combinations)

.x-elementName.uunionName-firstModifier-secondModifier{} EJ: .x-view.uflexAlign-center-stretch{}

• if both values are equal the could be merged EJ: .x-view.uflexAlign-center-center{} //spread EJ: .x-view.uflexAlign-center{} //merged

PSEUDOS:

data-atributeName{} EJ: data-tip{}

• for this case we will be using data atributes

MODIFIERS:

data-atributeName-modifierName="expectedValue"{} EJ: data-tip-position="top"{}

• these are almost always expecting some argument

ANIMATIONS:

.a-animationName{} EJ: .a-fadeIn{}

UTILITY CLASSES:

• each animation comes tied with a set classes to alter it EJ: .a-fadeIn.is__animated{}
• the disponible classes are listed here

ANIMATED STATUS:

.a-animationName.isanimated{} EJ: .a-fadeIn.isanimated{}

• without this class no animation will run

MODIFIERS:

• this status comes with his own set of modifiers

DELAY:

.isanimated.mdelay-value{} EJ: .isanimated.mdelay-2{animation-delay: 0.2s;}

ITERATIONS:

.isanimated.miterationsvalue{} EJ: .isanimated.m__iterations-2{animation-iteration-count: 2;}

GLOBAL MODIFIERS:

.xmmodifierName-value{} EJ: .xmmaxWidth-none{}

• these work as any other modifier but work in any element
• some modifier could be conditionated to the presence of another one EJ: .xmtheme-light.xmshadow{}

GLOBAL UNIONS:

.xuunionName-firstValue-SecondValue{} EJ: .xuflexAlign-center-stretch{}

• these work as any other union but work in any element
• if both values are equal the could be merged EJ: .xuflexAlign-center-center{} //spread EJ: .xuflexAlign-center{} //merged

SASS / CSS RULES

• sass is an amazing preprocesor but some of their rules could become overused

1. NO MORE THAN 3 LEVES OF NESTING

2. DONT USE THE AMPERSAND TO NEST ELEMENTS CHILDS

EJ: .x{&-name{&-child{}}}

• avoid that

3. AMPERSAND USAGE IS ALLOWED FOR MODIFIERS & SIMILAR

EJ: .x-elementName{&.mmodifierName{&modifierValue{}&__otherModifierValue{}}}

• this is because usually you would be only searching for the element or the modifier name
• as you can see this doesn't break the first rule

4. FOR CONDITIONAL MODIFIERS PREPENDING IS PREFERED

EJ: .x-elementName{&.mrequiredModifier.conditionalModifier{&modifierValue{}&__otherModifierValue{}}}

• this limits the nesting and shows the required modifier

5. EACH PROPERTY SHOULD FOLLOW THE NEXT ORDER

• TAG, ELEMENT or LAYOUT (a, .x-elementName, etc...)
• PSEUDOSELECTORS (:hover, :focus, etc...)
• STATUSES (.is__statusName, etc...)
• MODIFIERS (.m__modifierName-value, etc...)
• SUBELEMENTS or CHILDS
• OVERWRITES
• MEDIA QUERIES

6. AND FOR EACH GROUPED RULES SHOULD GO IN THE END

EJ: .x-element1{} .x-element2{} .x-element1, .x-element2{}

Responsive styles

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

.xmhidden:sm => Hide if element has less than 640px of width; .xmhidden:sm-inv => Hide if element has more than 640px of width;

sm => 640px // small md => 640px // medium, disabled lg => 640px // large xl => 640px // extralarge, disabled