2018-10-02-css-setup.md

CSS setup - draft

• Status: accepted
• Deciders: Pietro, James
• Date: 2018-10-02

Context and Problem Statement

Decision around how to setup css on the project.

Decision Drivers

• A simple and straight forward way to work with CSS, keep scope of selectors at module level to insulate the component if used as part of another app.
• A simple way to organise the layout of the component.

Considered Options

• Bootstrap 4
• CSS Flex Box
• CSS Grid Layout

Decision Outcome

Decided to use CSS Grid-layout and CSS Flexbox, as the two can be combined.

Bootstrap is familiar, convenient and easy to use, but it's bulky and might introduce un-necessary dependencies and weight to the project file size.

Followed this article ("The Holy Grail Layout (with no set heights!)") for CSS Grid-layout introduction and example, demo.

See also

• Gridlayout tutorial
• Flex Box tutorial