🎨Modular Approach to CSS

In the design guideline, the designer needs to prepare styles for basic elements such as buttons, form fields, lists, and other functional elements used in your layout. It is also necessary to determine the basic styles for links (general rules in different states (hover, focus, active)), borders, shadows, etc.

Of course, an element can have custom features, but it should be rare. A good design, like everything else in the world, should be aligned to a system. So that most of the website layout can and must be covered by a guideline, which can be easily disassembled into modular CSS files.

Having clear design rules makes it much easier for both the designer and developer to work. Such a guideline helps keep styles organized. For example:

📂 assets/css/src/general-styles/*_buttons*.css

It is also important to remember that partial files should be included in the parent CSS file, by default it is:

📂 assets/css/src/global.css

Modular Approach

The WP Rig Toolkit methodology follows a modular logic, and in CSS, this is reflected in the use of "atomic CSS" (in particular, the Framework and Spacing System follow this logic). This approach allows you to easily manipulate your styles directly from HTML, saving development time and, therefore, budget.

The task of the designer is to prepare a visual guideline, describing all possible forms of a certain element in all of its states. The task of the developer is to create a set of CSS classes based on this.

Let's take a look at buttons from the designer and developer's perspective.

Example: Designer’s side

The designer needs to draw buttons in Figma in all their states and that's it.

1. Normal Action Button

   1. normal state

   2. hover state

   3. active/focus state

2. Big Action Button

   1. normal state

   2. hover state

   3. active/focus state

   4. disabled

Example: Developer’s side

The developer examines what the designer has created, "deconstructs" it, and creates modular CSS classes from it.

1. Common styles for all buttons (.btn)

2. Sizes of Button

   1. normal (.btn--size-normal)

   2. big (.btn--size-big)

3. Colors of Button

   1. primary color (.btn--color-primary)

   2. orange color (.btn--color-orange)

   3. etc.

4. Special States of Button

   1. hover state

   2. active/focus state

   3. disabled state

5. Icons for Buttons

   In case you need to add an icon inside a specific button, you can encode the icon to base64 and add special classes to manipulate it.

   1. select the right colored icon (.btn--arrowed-primary)

   2. adjust the size of the icon (.btn--arrowed-small)

   3. etc.

   This list is not exhaustive and you can add to it as per your needs. Remember, it's important to keep your logic flexible, so you don't have to create another class describing all the styles of a specific button in case the designer suddenly adds an icon, changes color, size, etc.