Trim Style System ✂️

• Light and forward thinking CSS library that uses attributes and variables for rapid theme prototyping.

  • ⚡️ Light at <10kb gzipped
  • ⛔️ No preprocessor required
  • 📐 Powerful grids & flexbox
  • 🌈 Customizable CSS variables
  Download Contribute

  Trim draws syntactically from experimental frameworks like Raster and Shoelace. It uses CSS attributes to define components and utilities rather than classes, resembling JS props. For theming it relies on CSS variables which allows for rapid theme prototyping.

• Site variables

  :root {
    --body-bg-color: var(--gray-0);
    --body-line-height: 1.5;
    --button-font-size: var(--fonts-4);
    --button-padding: 1rem;
    --button-font-weight: var(--font-weight-bold);
    --button-border-width: 0.125rem;
    --code-font-size: var(--fonts-4);
    --link-color: var(--indigo);
    --headings-font-weight: var(--font-weight-bold);
    --headings-line-height: 1.25;
  }

Utilities

• Grid.css

  Specifiy any number of grid columns from 1 to 24. Cells are initialized to one column but can span many. Default responsive behavior has all columns collapse to full width.

  <ul grid columns="8" gap="2" />
  <li cell span="8" />
</ul>

• 4 column

  • cell
  • 3

  7 column

  • 3
  • 4

  18 column

  • 3
  • 3
  • 3
  • 3
  • 6

  6 column with grid gap

  • cell
  • cell
  • cell
  • cell
  • cell
  • cell

• Color.css

  <div color="white" bg="black" />

• Background

  • white
  • black
  • gray0
  • gray1
  • gray2
  • gray3
  • gray4
  • gray5
  • gray6
  • gray7
  • gray8
  • gray9
  • red
  • pink
  • grape
  • violet
  • indigo
  • blue
  • cyan
  • teal
  • green
  • lime
  • yellow
  • orange

• Position.css

  <h1 mx="4 sm2" my="sm2" p="2" />

• Padding

  Content

  Margin

  Content
  Content

  Responsive

  Both margin and padding utilize and attribute that must be placed last.

  Content
  Content

Components

• Alert.css

  <div alert type="primary" />

• Variations

  Alert
  Alert
  Alert
  Alert
  Alert
  Alert
  Alert

• Button.css

  <a button type="outline" href="." />

• Variations

  Button
  Button
  Button
  Button
  Button
  Button
  Button
  Button
  Button
  Button

• Chip.css

  <div chip type="primary" />

• Variations

  Chip
  Chip
  Chip
  Chip
  Chip
  Chip
  Chip
  Chip

• Form.css

• Fields

  • Checkbox
    Checkbox
    Checkbox
  • Radio
    Radio
    Radio
  • Item Item Item

• Tab.css

  <div tab type="full"><a /></div>

• Variations

  Tab 1 Active 2 Tab 3 Tab 4
  Simple 1 Simple 2 Simple 3 Simple 4
  Full 1 Full 2 Full 3 Full 4

• Text.css

• Headings

  • Header 1

  • Header 2

  • Header 3

  • Header 4

  • Header 5

  • Header 6

  • Paragraph

  • Small
  • Code
  • Link
  • Bold
  • tooltip

    Some overlay text here