easemotion-css 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,99 @@
+# Changelog
+
+All notable changes to EaseMotion CSS are documented here.  
+Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+---
+
+## [v1.0.0] — 2026-03-29
+
+### 🎉 Initial Public Release
+
+EaseMotion CSS v1.0.0 is the first public release of the framework. This version establishes the core architecture, animation system, component library, and contribution pipeline.
+
+---
+
+### Added
+
+#### Core System
+
+- `core/variables.css` — Complete design token system
+  - Transition speeds: `--ease-speed-fast`, `--ease-speed-medium`, `--ease-speed-slow`
+  - Easing curves: `--ease-ease`, `--ease-ease-out`, `--ease-ease-bounce`
+  - Color palette: primary, success, danger, warning, neutrals (50–900 scale)
+  - Glow tokens: `--ease-glow-primary`, `--ease-glow-success`, `--ease-glow-danger`
+  - Spacing scale: `--ease-space-1` through `--ease-space-16`
+  - Border radius scale, shadow system, typography tokens, z-index scale
+
+- `core/base.css` — Reset and typographic foundation
+  - Box-model reset, smooth scroll, font smoothing
+  - Inter (Google Fonts) as default sans-serif
+  - Semantic element defaults: headings, paragraphs, links, lists, code, pre
+  - Accessible focus ring, custom selection color
+
+- `core/animations.css` — Animation library (12 keyframes, 20+ classes)
+  - Entrance: `ease-fade-in`, `ease-fade-out`, `ease-slide-up`, `ease-slide-down`, `ease-slide-in-left`, `ease-slide-in-right`, `ease-zoom-in`, `ease-flip`
+  - Looping: `ease-bounce`, `ease-rotate`, `ease-pulse`, `ease-ping`, `ease-shake`
+  - Hover: `ease-hover-grow`, `ease-hover-shrink`, `ease-hover-glow`, `ease-hover-lift`, `ease-hover-underline`
+  - Stagger delays: `ease-delay-75`, `ease-delay-100`, `ease-delay-150`, `ease-delay-200`, `ease-delay-300`, `ease-delay-500`, `ease-delay-700`
+  - Duration overrides: `ease-duration-fast/medium/slow`
+  - `prefers-reduced-motion` support
+
+- `core/utilities.css` — 80+ layout and styling utilities
+  - Display: `ease-block`, `ease-flex`, `ease-grid`, `ease-hidden`
+  - Flexbox: `ease-center`, `ease-flex-col`, `ease-items-*`, `ease-justify-*`
+  - Grid: `ease-grid-cols-1/2/3/4`, `ease-grid-auto`
+  - Gap, padding, margin scales
+  - Width/height, container, positioning, overflow
+  - Typography: size, alignment, weight, transform
+  - Color: text and background variants
+  - Border, radius, shadow, opacity, cursor
+  - Responsive helpers (`ease-sm-*`)
+
+#### Components
+
+- `components/buttons.css` — Full button system
+  - Variants: primary, success, danger, outline, ghost, link
+  - Sizes: sm, base, lg, xl
+  - Modifiers: pill, block, icon, loading spinner
+  - States: disabled, active
+  - `ease-btn-hover` — composable lift+glow hover animation
+  - Button group layout
+
+- `components/cards.css` — 12 card variants
+  - Base card with header/body/footer sections
+  - Modifiers: shadow, hover, glow, flat, outlined, glass, accent, image, compact, horizontal
+  - Alert colors: info, success, danger
+  - Stat card with value + label layout
+
+#### Integrations (from community submissions)
+
+- `ease-hover-grow` — [INTEGRATED] from `submissions/examples/hover-grow/`
+- `ease-hover-shimmer` — [INTEGRATED] from `submissions/examples/hover-shimmer/`
+- `ease-card-lift` — [INTEGRATED] from `submissions/examples/card-lift/`
+
+#### Infrastructure
+
+- `easemotion.css` — Single-import entry point
+- `examples/demo.html` — Interactive showcase with dark theme, click-to-replay animations
+- `docs/index.html` — Full sidebar documentation site
+- `submissions/` — Curated contribution pipeline
+  - `submissions/README.md` — Full workflow guide
+  - `submissions/examples/hover-grow/` — Reference submission (integrated)
+  - `submissions/examples/hover-shimmer/` — Reference submission (integrated)
+  - `submissions/examples/card-lift/` — Reference submission (integrated)
+  - `submissions/examples/button-glow/` — Pending review
+- `.github/CODEOWNERS` — Maintainer enforced on all critical paths
+- `.github/ISSUE_TEMPLATE/feature_request.md` — Structured feature request template
+- `.github/PULL_REQUEST_TEMPLATE.md` — Strict PR checklist
+- `.gitignore`
+
+---
+
+## Roadmap
+
+See [VISION.md](./VISION.md) for the long-term direction.
+
+---
+
+*Maintained by [Saptarshi Sadhu](https://github.com/SAPTARSHI-coder)*

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Saptarshi Sadhu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,350 @@
+<div align="center">
+
+# ⚡ EaseMotion CSS
+
+**Human-readable. Animation-first. Zero dependencies.**
+
+Designed and curated by **Saptarshi Sadhu**
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-6c63ff.svg)](./LICENSE)
+[![npm version](https://img.shields.io/npm/v/easemotion-css.svg?color=6c63ff)](https://www.npmjs.com/package/easemotion-css)
+[![jsDelivr hits](https://data.jsdelivr.com/v1/package/npm/easemotion-css/badge)](https://www.jsdelivr.com/package/npm/easemotion-css)
+[![Contributions Welcome](https://img.shields.io/badge/Contributions-Welcome-22c55e.svg)](./CONTRIBUTING.md)
+[![GitHub Stars](https://img.shields.io/github/stars/SAPTARSHI-coder/easemotion-css?style=flat&color=6c63ff)](https://github.com/SAPTARSHI-coder/easemotion-css/stargazers)
+[![Maintainer](https://img.shields.io/badge/Maintainer-Saptarshi%20Sadhu-a78bfa.svg)](https://github.com/SAPTARSHI-coder)
+
+---
+
+### **🚀 One line. That's all you need.**
+
+**`https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css`**
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css" />
+```
+
+> Copy it. Paste it. Ship it. No npm. No build step. No config.
+
+</div>
+
+---
+
+EaseMotion CSS is a curated, animation-first CSS framework where class names read like plain English. No memorizing shorthand. No build steps. Just write HTML and it works.
+
+```html
+<div class="ease-center ease-fade-in">
+  <button class="ease-btn ease-btn-primary ease-hover-grow">Get Started</button>
+</div>
+```
+
+---
+⚡ Build beautiful animated interfaces using readable CSS classes.
+
+No build step. No configuration.
+Just link a file and start building.
+
+---
+## 👤 Maintainer
+
+EaseMotion CSS is designed, curated, and actively maintained by:
+
+**Saptarshi Sadhu** · [@SAPTARSHI-coder](https://github.com/SAPTARSHI-coder)
+
+This is a controlled framework — all contributions are reviewed and standardized before integration. The framework does not accept unreviewed direct edits. See [Contribution Policy](#️-contribution-policy) and [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
+
+---
+
+## 🚀 Quick Start
+
+**Option 1 — CDN (fastest, zero setup)**
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css" />
+```
+
+That's it. Works anywhere, zero installation.
+
+**Option 2 — npm**
+
+```bash
+npm install easemotion-css
+```
+
+```html
+<link rel="stylesheet" href="node_modules/easemotion-css/easemotion.css" />
+```
+
+**Option 3 — Import only what you need**
+
+```html
+<!-- Core: always required, load in this order -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/variables.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/base.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/animations.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/utilities.css" />
+
+<!-- Components: add only what you use -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/components/buttons.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/components/cards.css" />
+```
+
+> ⚠️ **`variables.css` must always load first.** Every other file depends on the CSS custom properties it defines.
+
+No build step. No Node. No configuration. Open your HTML file and it works.
+
+---
+
+## 🧠 Philosophy
+
+EaseMotion CSS is not just a CSS library — it is a design language.
+
+Most frameworks force a trade-off between readability and speed. EaseMotion CSS argues you should not have to choose.
+
+| | Vanilla CSS | Tailwind | **EaseMotion CSS** |
+|---|---|---|---|
+| Setup | Write from scratch | Build step + config | **Link one file** |
+| Readability | High | Low (`px-4 flex gap-x-2`) | **High** (`ease-center`) |
+| Animations | Manual | Minimal | **First-class** |
+| Quality control | You | You | **Curated by maintainer** |
+
+**Write UI like you describe it in English:**
+
+```html
+<!-- Center this -->
+<div class="ease-center">
+
+<!-- Fade this in -->
+<h1 class="ease-fade-in">
+
+<!-- Make it grow on hover -->
+<button class="ease-hover-grow">
+```
+
+No documentation lookup required. The class name **is** the documentation.
+
+**Four principles that never get broken:**
+
+| Principle | What it means |
+|-----------|--------------|
+| **Human-readable** | Class names describe behavior in plain English |
+| **Animation-first** | Motion is a first-class feature, not an add-on |
+| **Composable** | Stack classes freely with no specificity wars |
+| **Curated** | Every class is maintainer-reviewed before release |
+
+---
+
+## ⚙️ How EaseMotion CSS Works
+
+EaseMotion CSS uses a structured pipeline from raw idea to released class:
+
+```
+1. Contributors submit raw HTML + CSS
+         ↓
+2. Maintainer reviews and evaluates fit
+         ↓
+3. Code is converted into EaseMotion CSS format
+   (ease-* naming, CSS variables, comments)
+         ↓
+4. Integrated into core/ or components/
+         ↓
+5. Released and documented
+```
+
+Every class in the framework has passed through this process. The curation is what makes EaseMotion CSS consistent.
+
+---
+
+## 📦 Usage Examples
+
+### Layout
+
+```html
+<!-- Center — the most-used utility -->
+<div class="ease-center">Centered</div>
+
+<!-- Responsive auto-fit grid -->
+<div class="ease-grid ease-grid-auto ease-gap-6">
+  <div>Card 1</div><div>Card 2</div><div>Card 3</div>
+</div>
+
+<!-- Flex row: space between -->
+<div class="ease-flex ease-justify-between ease-items-center ease-padding-4">
+  <span>Left</span><span>Right</span>
+</div>
+```
+
+### Animations
+
+```html
+<!-- Entrance (fires on load) -->
+<h1 class="ease-fade-in">Hello</h1>
+<p  class="ease-slide-up ease-delay-200">Subtitle</p>
+
+<!-- Staggered sequence -->
+<div class="ease-slide-up ease-delay-100">First</div>
+<div class="ease-slide-up ease-delay-200">Second</div>
+<div class="ease-slide-up ease-delay-300">Third</div>
+
+<!-- Hover effects -->
+<button class="ease-hover-grow">Grows on hover</button>
+<div    class="ease-hover-glow">Glows on hover</div>
+<div    class="ease-hover-shimmer">Shimmer sweep</div>
+<div    class="ease-card-lift">Lifts on hover</div>
+```
+
+### Buttons
+
+```html
+<button class="ease-btn ease-btn-primary">Primary</button>
+<button class="ease-btn ease-btn-success">Success</button>
+<button class="ease-btn ease-btn-danger">Danger</button>
+<button class="ease-btn ease-btn-outline">Outline</button>
+
+<!-- With hover animation -->
+<button class="ease-btn ease-btn-primary ease-btn-hover">Animated</button>
+
+<!-- Sizes + pill -->
+<button class="ease-btn ease-btn-primary ease-btn-sm">Small</button>
+<button class="ease-btn ease-btn-primary ease-btn-lg ease-btn-pill">Large Pill</button>
+```
+
+### Cards
+
+```html
+<div class="ease-card ease-card-shadow ease-card-hover">
+  <div class="ease-card-header">
+    <h3 class="ease-card-title">Title</h3>
+  </div>
+  <div class="ease-card-body"><p>Content</p></div>
+  <div class="ease-card-footer">
+    <button class="ease-btn ease-btn-primary ease-btn-sm">Action</button>
+  </div>
+</div>
+```
+
+---
+
+## ⚙️ Customization
+
+Override any CSS variable to theme the entire framework in one block:
+
+```css
+:root {
+  --ease-color-primary: #f97316;   /* orange */
+  --ease-speed-medium:  500ms;     /* slower */
+  --ease-radius-md:     1rem;      /* rounder */
+}
+```
+
+---
+
+## 📂 File Structure
+
+```
+easemotion-css/
+├── easemotion.css                    ← SINGLE IMPORT ENTRY POINT
+│
+├── core/                       ← MAINTAINER-ONLY
+│   ├── variables.css           ← design tokens
+│   ├── base.css                ← reset + typography
+│   ├── animations.css          ← animation library
+│   └── utilities.css           ← layout utilities
+│
+├── components/                 ← MAINTAINER-ONLY
+│   ├── buttons.css
+│   └── cards.css
+│
+├── submissions/                ← CONTRIBUTOR AREA
+│   ├── README.md               ← submission workflow
+│   └── examples/
+│       ├── hover-grow/         ← [INTEGRATED] → ease-hover-grow
+│       ├── hover-shimmer/      ← [INTEGRATED] → ease-hover-shimmer
+│       ├── card-lift/          ← [INTEGRATED] → ease-card-lift
+│       └── button-glow/        ← pending review
+│
+├── examples/demo.html          ← live showcase
+├── docs/index.html             ← documentation site
+│
+├── .github/
+│   ├── CODEOWNERS
+│   ├── ISSUE_TEMPLATE/feature_request.md
+│   └── PULL_REQUEST_TEMPLATE.md
+│
+├── VISION.md                   ← project direction
+├── CHANGELOG.md                ← release history
+├── CONTRIBUTING.md
+├── LICENSE                     ← MIT © 2026 Saptarshi Sadhu
+└── README.md
+```
+
+---
+
+## 🏷️ Issue Labels
+
+| Label | Used for |
+|-------|----------|
+| `good first issue` | Easy submissions, ideal for first contributions |
+| `animation` | Hover effects, entrance animations, keyframe ideas |
+| `component` | New UI components (tooltips, modals, badges, etc.) |
+| `enhancement` | Improvements to existing classes |
+| `documentation` | README, docs site, submission guide updates |
+
+---
+
+## ⚠️ Contribution Policy
+
+EaseMotion CSS is a **curated, maintainer-reviewed framework**. It is not an open-edit project.
+
+### What contributors do
+
+```
+✅ Add a folder to submissions/examples/your-feature/
+✅ Include: demo.html, style.css, README.md
+✅ Use any class naming — no ease- prefix required
+✅ One feature per PR
+```
+
+### What contributors do NOT do
+
+```
+❌ Edit core/           → PR closed without review
+❌ Edit components/     → PR closed without review
+❌ Merge their own PRs  → Maintainer-only
+```
+
+### How submissions become framework classes
+
+```
+Your raw CSS     →     Maintainer standardizes     →     ease-* class ships
+.hover-grow           ease-hover-grow                    core/animations.css
+```
+
+### 🌟 Why contribute?
+
+- **Beginner-friendly** — write raw CSS, no conventions to memorize
+- **Learn real system design** — see how raw ideas become a coherent API
+- **Your idea ships** — accepted submissions become real framework classes, credited in the changelog
+- **Build in public** — your submission folder stays in the repo permanently as a contribution record
+
+See [submissions/README.md](./submissions/README.md) for the full workflow.
+
+---
+
+## 🌐 Official Maintainer
+
+**Saptarshi Sadhu**  
+GitHub: [@SAPTARSHI-coder](https://github.com/SAPTARSHI-coder)
+
+> Only the maintainer merges pull requests. This is enforced via [CODEOWNERS](./.github/CODEOWNERS).
+
+---
+
+## License
+
+MIT © 2026 Saptarshi Sadhu — see [LICENSE](./LICENSE).
+
+---
+
+<div align="center">
+Built with care &nbsp;·&nbsp; Zero dependencies &nbsp;·&nbsp; Animation-first
+</div>

package/components/buttons.css

@@ -0,0 +1,226 @@
+/* ============================================================
+   EaseMotion CSS — buttons.css
+   Composable, accessible button components
+   ============================================================ */
+
+/* ── Base Button ───────────────────────────────────────────── */
+
+.ease-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ease-space-2);
+
+  padding: var(--ease-space-3) var(--ease-space-6);
+  font-family: var(--ease-font-sans);
+  font-size: var(--ease-text-sm);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  white-space: nowrap;
+
+  border: 2px solid transparent;
+  border-radius: var(--ease-radius-md);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+
+  transition:
+    background-color var(--ease-speed-fast) var(--ease-ease),
+    color            var(--ease-speed-fast) var(--ease-ease),
+    border-color     var(--ease-speed-fast) var(--ease-ease),
+    box-shadow       var(--ease-speed-medium) var(--ease-ease),
+    transform        var(--ease-speed-fast) var(--ease-ease-bounce);
+}
+
+.ease-btn:active {
+  transform: scale(0.97);
+}
+
+.ease-btn:focus-visible {
+  outline: 2px solid var(--ease-color-primary);
+  outline-offset: 3px;
+}
+
+/* ── Variants ──────────────────────────────────────────────── */
+
+/* Primary */
+.ease-btn-primary {
+  background-color: var(--ease-color-primary);
+  color: #ffffff;
+  border-color: var(--ease-color-primary);
+}
+
+.ease-btn-primary:hover {
+  background-color: var(--ease-color-primary-dark);
+  border-color: var(--ease-color-primary-dark);
+  box-shadow: var(--ease-glow-primary);
+}
+
+/* Success */
+.ease-btn-success {
+  background-color: var(--ease-color-success);
+  color: #ffffff;
+  border-color: var(--ease-color-success);
+}
+
+.ease-btn-success:hover {
+  background-color: var(--ease-color-success-dark);
+  border-color: var(--ease-color-success-dark);
+  box-shadow: var(--ease-glow-success);
+}
+
+/* Danger */
+.ease-btn-danger {
+  background-color: var(--ease-color-danger);
+  color: #ffffff;
+  border-color: var(--ease-color-danger);
+}
+
+.ease-btn-danger:hover {
+  background-color: var(--ease-color-danger-dark);
+  border-color: var(--ease-color-danger-dark);
+  box-shadow: var(--ease-glow-danger);
+}
+
+/* Outline (Primary) */
+.ease-btn-outline {
+  background-color: transparent;
+  color: var(--ease-color-primary);
+  border-color: var(--ease-color-primary);
+}
+
+.ease-btn-outline:hover {
+  background-color: var(--ease-color-primary);
+  color: #ffffff;
+}
+
+/* Ghost */
+.ease-btn-ghost {
+  background-color: transparent;
+  color: var(--ease-color-neutral-700);
+  border-color: transparent;
+}
+
+.ease-btn-ghost:hover {
+  background-color: var(--ease-color-neutral-100);
+  color: var(--ease-color-neutral-900);
+}
+
+/* Link style */
+.ease-btn-link {
+  background: none;
+  border: none;
+  color: var(--ease-color-primary);
+  padding-left: 0;
+  padding-right: 0;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.ease-btn-link:hover {
+  color: var(--ease-color-primary-dark);
+  text-decoration: none;
+}
+
+/* ── Sizes ─────────────────────────────────────────────────── */
+
+.ease-btn-sm {
+  padding: var(--ease-space-2) var(--ease-space-4);
+  font-size: var(--ease-text-xs);
+  border-radius: var(--ease-radius-sm);
+}
+
+.ease-btn-lg {
+  padding: var(--ease-space-4) var(--ease-space-8);
+  font-size: var(--ease-text-base);
+  border-radius: var(--ease-radius-lg);
+}
+
+.ease-btn-xl {
+  padding: var(--ease-space-5) var(--ease-space-10);
+  font-size: var(--ease-text-lg);
+  border-radius: var(--ease-radius-lg);
+}
+
+/* Full width */
+.ease-btn-block {
+  width: 100%;
+}
+
+/* Pill shape */
+.ease-btn-pill {
+  border-radius: var(--ease-radius-full);
+}
+
+/* Icon only */
+.ease-btn-icon {
+  padding: var(--ease-space-3);
+  border-radius: var(--ease-radius-md);
+}
+
+/* ── States ────────────────────────────────────────────────── */
+
+.ease-btn:disabled,
+.ease-btn[disabled],
+.ease-btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Loading spinner inside button */
+.ease-btn-loading {
+  pointer-events: none;
+  position: relative;
+}
+
+.ease-btn-loading::after {
+  content: '';
+  display: inline-block;
+  width: 0.85em;
+  height: 0.85em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ease-kf-rotate 0.7s linear infinite;
+  margin-left: var(--ease-space-2);
+}
+
+/* ── Hover Class (composable) ──────────────────────────────── */
+/* Apply ease-btn-hover to any btn to add a lift+glow effect  */
+
+.ease-btn-hover {
+  transition:
+    transform    var(--ease-speed-medium) var(--ease-ease-bounce),
+    box-shadow   var(--ease-speed-medium) var(--ease-ease),
+    background-color var(--ease-speed-fast) var(--ease-ease),
+    border-color     var(--ease-speed-fast) var(--ease-ease);
+}
+
+.ease-btn-hover:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--ease-shadow-lg), var(--ease-glow-primary);
+}
+
+/* ── Button Group ──────────────────────────────────────────── */
+
+.ease-btn-group {
+  display: inline-flex;
+}
+
+.ease-btn-group .ease-btn {
+  border-radius: 0;
+}
+
+.ease-btn-group .ease-btn:first-child {
+  border-radius: var(--ease-radius-md) 0 0 var(--ease-radius-md);
+}
+
+.ease-btn-group .ease-btn:last-child {
+  border-radius: 0 var(--ease-radius-md) var(--ease-radius-md) 0;
+}
+
+.ease-btn-group .ease-btn:not(:last-child) {
+  border-right-width: 1px;
+}