CSS
Percentage based width containers#
Switch from pixel based max container widths to % based container width by adding/removing the following line from from src/scss/app/_app.scss
Both pixel and percentage based max widths are configured using theme.screens and theme.containerMaxWidths in the tailwind.config.js file. When using the percentage based width, the scss will auto calculate the max width in %.
Utilities#
A list of utilities we’ve added to extend Tailwind
main.show-behind-header#
Show the header above the content of our main element.
.stretched-link#
A usage-identical implementation of Bootstrap CSS stretched link class: https://getbootstrap.com/docs/4.3/utilities/stretched-link/
If used on a .btn then the standard .btn rollover will play when the whole card is rolled over.
.card-rollover#
A class that can be added to an element (most likely a card) that has a rollover when you hover over it. Use with .stretched-link to alos make the whole card clickable.
Typography#
Fonts#
Add fonts in src/scss/project-config.scss
Sizing/Styling#
Configure in src/scss/app/typography.scss
In the typography.scss file we set the html font size across our supported breakpoints so that at each breakpoint the value of 1 rem will scale to the screen size, giving us a layout similar to the provided design, even for screen sizes that are much smaller or larger than the screen-sizes used in the provided designs.
Generally the xxl breakpoint (1440px and up) is our design resolution, at this breakpoint 1rem is equal to 10px.
The default settings in Theme Base define the base font styling in the xs breakpoint, often in pixels. Then typically we can redefine the font sizes at a tablet/desktop breakpoint. Where possible we should set font sizes in rems so they will scale up when we increase the base font size on the html element without having to define a new font size at each breakpoint.
Anything that will get too small when the html elements font size is lower than 10px are set in pixels. Some font-sizes like those set on .body are then redefined in the xxl breakpoint when the html elements font size becomes 10px (to keep the body font size above 16px).
Using this method we just have to set the font size of the html element for all breakpoints above xs, and any typography (and any elements sized using rems) will scale up with the breakpoints.