Zephyr-css NPM

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; }