@skulpture/material v1.1.0

About

Collection of colourless classes (for TailwindCSS) and associated animations. It's meant to be more of a guide to build out components instead of being a one stop shop for everything UI.

Use VSCode to see annotations for each property.

Usage

Use the loader to add the classes required to the whitelist if you're using PurgeCSS. State the elements you use when using the loader to get the whitelist (see the test file in src/loader/loader.spec.ts).

If you want to override an element, use MaterialOverride to do so, doing this will ensure that any additional classes you use will be included by PurgeCSS (see the test file in src/override/override.spec.ts for more information).

Conventions

• Gutters divisible by 4
• Image widths divisible by 4
• Icon widths divisible by 3
• Animation durations start at 200ms and increase in 300ms steps
• Content should be allowed to breathe
• Favour font weights which are heavier rather than lighter
• No squinting while reading
• Maximize screen space at small breakpoints (at the expense of removing unnecessary padding and margins)
• Favour rounded corners
• Outlines and rings are offset by 2