Implementation Principles

SebastianStehle commented 3 years ago

I just want to point out the implementation principles again:

Follow the sass principles.

Use variables everywhere, but keep the number of variables short.
Remove unnecessary variables.
Use extend and mixins for common style elements.
Use nesting when possible (see bootstrap example below).
Use icomoon for font-icons and no custom svg in hundreds of places.

Override bootstrap component.

Have a look if there is a custom bootstrap element already and reuse it if possible.
If you want to keep the existing style, because we might need it in another place, make a variant of that, for example breadcrumb-steps for a custom breadcrumb design.

Examples where it has not been followed:

Custom card like structures.
Dropdown menu

Use bootstrap variables.

Bootstrap overrides a lot of variables you can override., Override them in the _bootstrap-vars.scss file and use existing variables from _vars. For example the modal dialog has a lot of variables you can use.
If there is no variable override a bootstrap default and reuse existing variables. For example if you want that the modal header has the same padding as the modal footer you can do that with the following snippet:
```
.modal {
&-footer {
    padding: $modal-header-padding;
}
}
```

Use utilities classes only when it makes sense.

All components should have a default appearance. Here is an example from the code where the principle is not followed:

<span class="badge badge-secondary text-muted rounded mb-1 mr-1">image</span>

These component has a few issues:

It overrides the badge border-radius with rounded instead of setting the bootstrap var. Why should this badge have another border-radius`?
It overrides the text color with text-muted. Why should this badge have another color?

There are dozens of problems like this. The problem is that you can easily forget to add these classes which will lead into inconsistent design.

Use existing components instead of implementing new components.

For example new list examples have been introduced.

SebastianStehle commented 3 years ago

The principles are still not followed. Just a few examples:

Buttons look only okay if text-white is applied.

Dropdown headers are implemented using utility classes, even though there is a dedicated bootstrap element for that.

See: https://getbootstrap.com/docs/5.0/components/dropdowns/#headers

Dropdown padding is fixed with utility class:

jahanzaibmalik17 commented 3 years ago

Fixed these issues:

Removed text-white class from buttons
Implemented dropdown-headers of bootstrap

SebastianStehle commented 3 years ago

I would not focus too much on the text-white thing. The important aspect is that the components do not rely on utility classes to work properly.

of course you can use them to make adjustments when they are used in a composition, e.g. setting the margin for a button when used inside a pricing card.

jahanzaibmalik17 commented 3 years ago

Hi there Removed some of the unnecessary utility classes https://github.com/Face44/theme/commit/02dba63154f2d18c9b2cbeae5b5e188245504156

Face44 / theme