# zephyr-css

> Tiny stylesheet to help you build web layouts with CSS Grid

Latest version **1.2.0** (published 2022-03-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install zephyr-css
pnpm add zephyr-css
yarn add zephyr-css
bun add zephyr-css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2022-03-19 |
| First published | 2021-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Adrian Valenzuela |
| Maintainers | adrianvalenz |

## Links

- npm: https://www.npmjs.com/package/zephyr-css
- npm.io page: https://npm.io/package/zephyr-css

## Dependencies (1)

- [modern-normalize](https://npm.io/package/modern-normalize.md) ^1.1.0

## Recent versions

- 1.2.0 (latest) — 2022-03-19
- 1.1.9 — 2022-03-19
- 1.1.7 — 2022-03-19
- 1.1.4 — 2022-03-17
- 1.1.1 — 2022-03-16
- 1.1.0 — 2022-03-16
- 1.0.9 — 2022-03-07
- 1.0.7 — 2022-03-07
- 1.0.5 — 2021-11-16
- 1.0.4 — 2021-11-16
- 1.0.3 — 2021-11-16
- 1.0.2 — 2021-11-14
- 1.0.1 — 2021-11-14
- 1.0.0 — 2021-11-13

## README

# Welcome to Zephyr CSS

To get started...

`<link rel="stylesheet" href="https://unpkg.com/zephyr-css@latest/dist/css/main.min.css"/>`

orrrr...

`@import url("https://unpkg.com/zephyr-css@latest/dist/css/main.min.css");`

## A simple CSS Grid library for a responsive 12-column layout

Zephyr CSS started out life when a desire to drop in a simple set of
defaults was needed when I wanted to start writing out some custom CSS on a
new project. 

I enjoy and prefer to just start styling from scratch and writing out only
what I need, but I do appreciate the wonderful work that went into CSS
frameworks like Bootstrap, Tailwind, Bulma, and many others.

Granted, I really love how Tailwind solved the problem for creating layouts
with CSS Grid. They brought upon a pleasant API to create responsive Grid
layouts quickly and seamlessly. This library draws inpiration from their
grid classes and from Bootstrap for it's container classes.

The main point of this library is to help you create layouts quickly with
Grid and a few features from Flex. Because I want to stick to writing my
own custom CSS classes for properties such as color, padding, font-family,
etc., it was really difficult stay in the realm of the `display` property.
One can get carried away and easily start writing utility classes for
everything, but that's not what we are here for.

While I appreciate Tailwind's API for creating quick designs, I really love
the "cascade" and it's ability to span styling across multiple elements at
once. Along with CSS properties and many new features, writing CSS has
become an enjoyable, stable experience.

## Breakpoints

Zephyr uses 3 simple breakpoints. The idea is that your styles are
mobile-first and look good by on smartphones, then you hit you next
breakpoint when you're user reaches for an iPad, then above that laptop or
desktop. It's easier to manage and remember 3 breakpoints aside from the
base screen size.

```
sm: 768px;
md: 1024px;
lg: 1366px;
```

## Classes w/ Responsive variants

`.grid { display: grid; } `
.sm:grid, .md:grid, .lg:grid


`.block { display: block; } `
.sm:block, .md:block, .lg:block

`.flex { display: flex; } `
.sm:flex, .md:flex, .lg:flex

`.cols-{n} { grid-template-columns: repeat({n}, minmax(0, 1fr)); }` 
.cols-1 through .cols-12 available. .sm:cols-{n}, .md:cols-{n}, .lg:cols-{n}

`.gap-{n} { gap: calc({n}rem / 4); }`
.gap-4 outputs gap: 1rem; and .gap-1 outputs gap: .25rem; # .gap-1 through .gap-12 available

```
.gap-x-{n} { column-gap: calc({n}rem / 4); }
.gap-y-{n} { row-gap: calc({n}rem / 4); }
```
1 through 12 available. Responsive variants as well. .sm:gap-x-{n} for example.

`.span-{n} { grid-column: span {n}/span {n}; }`
Responsive variants available, .sm:span-1 .md:span-4 .lg:span-6
Values 1 through 12 available

`.start-{n} { grid-column-start: {n}; }`
Values available are 1 through 12. .sm:start-3 .md:start 4 .lg:start-6

`.end-{n} { grid-column-end: calc({n} + 1); }`
This class adds 1 to the number you pass. In Grid, if you want your
column to span to the 7th column you need to pass "8". For me it is a bit
unintuitive and causes me to stop my flow to do basic math and count grids,
which I am not a fan of. With this calc() method, I'm able to think "I want
this column to span from 1 to 6" and I just type out a class like: .start-1
.end-6 and the function will take care of it for me.
There are responsive variants for this as well (sm md lg)

When styling flex children, you can use the following classes:
```
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-evenly { justify-content: space-evenly; }
```
The following are classes for the outer portion of your grid, which is
typically known and referred to as a container.

`.container { width: 100% }`
# The container class alone will get a max-width at every breakpoint. By
default the max-width is the same value as the breakpoint, but you can
override the value with a CSS variable uniquely named according to it's
current breakpoint.

# If you are a the `sm` breakpoint, you can place in your inline styles or
CSS stylesheet a value to override the variable: `--sm-container-max-width: 1000px;`

# Adding a responsive prefix gives it a max-width and a unique CSS variable
you can override to suit your theme. That max-width won't activate until it
hits the breakpoint. For example, `md:container` will be 100% until it hits
the `md` breakpoint then it will take on the max-width of every breakpoint
above it.

`.container-fluid` is max-width at 100% at all times.

Gutters in typography are known as the spacing within a page to let text
breathe. The following classes give you a similar design to the container
class.

.gutter {
  padding-left: var(--gutter-left, 1rem);
  padding-right: var(--gutter-right, 1rem);
  padding-top: var(--gutter-top, .5rem);
  padding-bottom: var(--gutter-bottom, .5rem);
}

.sm:gutter {
  padding-left: var(--sm-gutter-left, 1rem);
  padding-right: var(--sm-gutter-right, 1rem);
  padding-top: var(--sm-gutter-top, .5rem);
  padding-bottom: var(--sm-gutter-bottom, .5rem);
}

.md:gutter {
  padding-left: var(--md-gutter-left, 1rem);
  padding-right: var(--md-gutter-right, 1rem);
  padding-top: var(--md-gutter-top, .5rem);
  padding-bottom: var(--md-gutter-bottom, .5rem);
}

.lg:gutter {
  padding-left: var(--lg-gutter-left, 1rem);
  padding-right: var(--lg-gutter-right, 1rem);
  padding-top: var(--lg-gutter-top, .5rem);
  padding-bottom: var(--lg-gutter-bottom, .5rem);
}

Centering your container is simply calling the margin-auto class. Clear and
to the point.
.margin-auto { margin-left: auto; margin-right: auto; }

```

## Example HTML snippet

```
<header class="container gutter margin-auto grid cols-12 gap-4">
  <div class="logo span-3">
  </div>
  <nav class="menu span-9">
    <ul class="flex justify-end align-center">
      <li>link</li>
      <li>link</li>
      <li>link</li>
    </ul>
  </nav>
</header>

```

---
_Source: https://npm.io/package/zephyr-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._