gitthermal/thermal

Organize & write better CSS

Ouverte

#3 504 ouverte le 29 juil. 2019

 (0 commentaire) (0 réaction) (1 personne assignée)Vue (34 forks)auto 404
Front enddifficulty: hardgood first issue⚙ Improvement🚶🏻‍♀️ Priority low

Métriques du dépôt

Stars
 (452 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

We are using SASS pre-process to write CSS styles, here's are a few examples of styles:

Classes Styles
1 repository_settings vue carbon (1)
2 carbon carbon (2)

The quality of the CSS needs to be improved, in terms of CSS class names and by applying some CSS principle.

We are using the BEM to write the CSS class name, and they also need to be re-named for a better understanding of each class name.

There are few styles which we still wrote in native .sass files, those styles also need to move to .vue file or make a separate component out of it.

CSS Principles

Grouping properties

background:
  color: #6d695c
  image: url("/img/argyle.png")
  size: 70px 120px
border-radius:
  top-left: 8px
  top-right: 10px
  bottom-right: 54px
  bottom-right: 10px

Colour Declarations

You might see a lot inside the Thermal codebase where color is used by its keyword name white and black. Keep the color value in rgba(255, 255, 255, .5), so even if we want to change increase the transparency in the color we have to just decrease the value of the fourth parameter.

Please: Do share your feedback/suggestion about how we can further improve the CSS.

Guide contributeur