🎨General Styles

CSS Classes

Here you can find a list of partials files in general-styles folder. Every file usually have some tips and/or proposed structure. Feel free to add your own basic styles.

After the designer has created a full website layout and style guide in Figma or a similar service, it's your turn as a developer to create a set of CSS classes.

The goal is to have a design guide that allows you to create a modular system of classes, which can be combined to create different-looking UI elements without the need to write separate classes for every element.

BEM is a good way to make a markup, and preprocessors allow you to create flexible and modular .css files. However, since good design is often repeatable, using a combination of predefined classes directly in HTML can solve 95% of design purposes. You can still use BEM to set a unique specific selector if needed.

📍 To find the right balance between custom classes and pre-defined classes, use pre-defined classes whenever possible, and use custom classes only when necessary or for unique elements.

Check the general-styles folder for a list of partial files with tips and proposed structure, and feel free to add your own basic styles.

📂 /assets/css/src/general-styles🎨 _backgrounds.css🎨 _borders.css🎨 _buttons.css🎨 _colors.css🎨 _effects.css🎨 _general.css🎨 _links.css🎨 _lists.css🎨 _tables.css