- Notifications
You must be signed in to change notification settings - Fork 69
Layout and Theme CSS Properties List
George Gindev edited this page Jan 7, 2021 · 2 revisions
The properties that should be included in the _layout.scss file
- Styles for the layout of the component
- Abstract values - everything that is set to initial, inherit, currentColor, none
// Content content // Layout margin padding width min-width max-width height min-height max-height border-width border-radius border-collapse border-spacing box-sizing outline // Font font-size font-family line-height font-weight font-style font-variant // Text text-align white-space text-overflow text-decoration text-transform text-indent text-justify text-shadow letter-spacing word-break word-spacing word-wrap writing-mode vertical-align // List list-style-type list-style-position // Visibility visibility // Display display float // Display Table table-layout empty-cells // Display Flex flex-direction flex-wrap flex-flow justify-content align-items align-content order flex-grow flex-shrink flex-basis align-self // Display Grid grid-template-columns grid-template-rows grid-template-areas grid-area grid-column-start grid-column-end grid-row-start grid-row-end grid-column-gap grid-row-gap justify-items justify-self grid-auto-columns grid-auto-rows grid-auto-flow // Position position top right bottom left transform // Others overflow z-index cursor transition animation object-fit object-position background-clip pointer-events columns direction The properties that should be included in the _theme.scss file
- Styles that add color
- Specific values
// Colors background-color color border-color box-shadow text-decoration-color outline-color // Opacity opacity - The VSCode plugin "PostCSS Sorting" makes is possible to reorder the CSS properties by the order specified above.
- To set it up, install it from VSCode Extensions tab, and add the following property to settings.json:
"postcssSorting.config": { "order": [ "custom-properties", ], "properties-order": [ "content", "margin", "padding", "width", "min-width", "max-width", "height", "min-height", "max-height", "border-width", "border-radius", "border-collapse", "border-spacing", "border-style", "box-sizing", "outline", "font-size", "font-family", "line-height", "font-weight", "font-style", "font-variant", "text-align", "white-space", "text-overflow", "text-decoration", "text-transform", "text-indent", "text-justify", "text-shadow", "letter-spacing", "word-break", "word-spacing", "word-wrap", "writing-mode", "vertical-align", "list-style-type", "list-style-position", "visibility", "display", "float", "table-layout", "empty-cells", "flex-direction", "flex-wrap", "flex-flow", "justify-content", "align-items", "align-content", "order", "flex-grow", "flex-shrink", "flex-basis", "align-self", "grid-template-columns", "grid-template-rows", "grid-template-areas", "grid-area", "grid-column-start", "grid-column-end", "grid-row-start", "grid-row-end", "grid-column-gap", "grid-row-gap", "justify-items", "justify-self", "grid-auto-columns", "grid-auto-rows", "grid-auto-flow", "position", "top", "right", "bottom", "left", "transform", "overflow", "z-index", "cursor", "transition", "animation", "object-fit", "object-position", "background-clip", "pointer-events", "columns", "direction", "background-color", "color", "border-color", "box-shadow", "text-decoration-color", "outline-color", "opacity", ] }