https://github.com/evanminto/fresh-css

CSS starter kit with some useful patterns for new projects
https://github.com/evanminto/fresh-css

Last synced: 6 days ago
JSON representation

CSS starter kit with some useful patterns for new projects

• Host: GitHub
• URL: https://github.com/evanminto/fresh-css
• Owner: evanminto
• License: mit
• Created: 2019-08-29T21:29:30.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T10:36:19.000Z (almost 2 years ago)
• Last Synced: 2023-05-31T01:24:03.174Z (over 1 year ago)
• Language: HTML
• Size: 761 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fresh-css

CSS starter kit with some useful patterns for new projects.

## Layouts

Most of the layouts are based directly on the ones in [Heydon Pickering](https://twitter.com/heydonworks) and [Andy Bell](https://twitter.com/andybelldesign)’s [Every Layout](https://every-layout.dev).

### Box

### Center

### Cluster

### Cover

### Float

### Frame

### Grid

### Reel

### Sidebar

### Stack

### Switcher

## Components

### CTA (Call to Action)

### Responsive Table

## Utilities

### .u-clear-list-style

### .u-reorder-first

### .u-text-center

## Custom Properties

### --gap-flow

**Unit:** ``

**Supported in:** Standard flow layout

Consistent vertical spacing between children inside any flow element (doesn't work on custom

layouts). Inherits to all children.

### --gap-flow-self

**Unit:** ``

**Supported in:** Standard flow layout

Variant of `--gap-flow` that only applies to the current element (doesn't inherit).

### --*__gap (--l-sidebar__gap, etc.)

**Unit:** ``

**Supported in:** Carousel, Cluster, Cover, Float, Grid, Sidebar, Stack, Switcher

Consistent spacing between children inside the element (or in the case of Float, between the

floated element and nearby elements). Applies to both block and inline axes.

### --*__gap-block (--l-sidebar__gap-block, etc.)

**Unit:** ``

**Supported in:** Cluster, Cover, Float, Grid, Sidebar, Stack, Switcher

Block-only `--*__gap`.

### --*__gap-inline (--l-sidebar__gap-inline, etc.)

**Unit:** ``

**Supported in:** Carousel, Cluster, Cover, Float, Grid, Sidebar, Switcher

Inline-only `--*__gap`.

### --*__gutter (--l-box__gutter, etc.)

**Unit:** ``

**Supported in:** Box, Cover

Consistent padding along the edges of an element.

### --*__breakpoint (--l-box-switcher__breakpoint, etc.)

**Unit:** ``

**Supported in:** Float, Sidebar, Switcher

Sets the breakpoint at which the layout switches from a side-by-side style to a vertical stacked

style. When available, it's better to use the numbered `--breakpoint-*` properties, since they

apply depending on the number of children in the layout. However, some layouts, such as Float, only

support the single `--breakpoint` value.

### --*__max-size (--l-center__max-size, etc.)

**Unit:** ``

**Supported in:** Center, Float

The maximum size of an element along its primary axis (as determined by the layout or component).

For Center this refers to the width of the centered element, while for Float it refers to the

width of the floated element.

### --*__min-size (--l-cover__min-size, etc.)

**Unit:** ``

**Supported in:** Cover, Float, Sidebar

The minimum size of an element along its primary axis (as determined by the layout or component).

For Cover this refers to the height of the entire layout, while for Sidebar it refers to the main

content item and for Float it refers to the width of the floated element.

### --l-float__direction

**Unit:** `left|right`

**Supported in:** Float

The direction to align the layout. Passed directly to the `float` property.

### --l-frame__aspect-ratio

**Unit:** `/`

**Supported in:** Frame

A fractional aspect ratio in the format "x/y".