...
Tablet+ only
Mobile only
...
Heading
...
...
...
```
---
## 6. Grid
File: `css/_grid.css`
### Container
```html
```
**Available classes:** `.col-1` … `.col-12`
**Responsive:**
- `.col-{n}-md` — applies at `min-width: 900px`
- `.col-{n}-lg` — applies at `min-width: 1200px`
- On mobile (< 600px) all columns become 100%
```html
```
### CSS Grid helpers
```html
```
---
## 7. Typography
File: `css/_typography.css`
### Headings
| Class | Size | Weight |
|-------|------|--------|
| `.title-hero` | 96px | 900 |
| `.title-xl` | 72px | 900 |
| `.title-lg` | 60px | 900 |
| `.title-md` | 48px | 900 |
| `.title-sm` | 36px | 800 |
| `.title-xs` | 30px | 700 |
Add `.fluid` for responsive size via `clamp()`:
```html
```
### Disabled state
```html
```
### Bulma-style `.button`
```html
```
---
## 10. Cards
File: `css/_cards.css`
```html
```
### Bulma-style card
```html
```
### Card grids
```html
```
### Box
```html
```
### Input error / success state
```html
```
### Radio group (custom)
```html
```
### Lead-gen form (`.form.tg-list`)
```html
```
### Shake animation (on error)
```js
formElement.classList.add('shake-popup')
setTimeout(() => formElement.classList.remove('shake-popup'), 500)
```
---
## 12. Gradients
File: `css/_gradients.css`
### Background gradients — semantic
```html
```
### Hover sweep effect
```html
```
Minimal JS for switching (already included in `njx.js`):
```js
function tabSwitch(btn) {
const nav = btn.closest('.tab-nav');
const wrap = btn.closest('.tab-wrap');
nav.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('is-active'));
btn.classList.add('is-active');
const idx = [...nav.querySelectorAll('.tab-btn')].indexOf(btn);
wrap.querySelectorAll('.tab-panel').forEach((p, i) => {
p.classList.toggle('is-active', i === idx);
});
}
```
### Nav variants
```html
```
### Sizes
```html
Section
```
---
## Theme Switching
```js
// Switch theme programmatically
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Restore saved theme
const saved = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', saved);
```
---
## Overriding Library Styles
### 1. Load order — always put your file last
```html
```
### 2. Override via CSS variables — recommended
The cleanest approach. All components consume tokens, so changing a token changes everything at once.
```css
/* global.css */
:root {
--color-primary: #ff6b35;
--color-accent: #ffd700;
--font-sans: var(--font-montserrat);
--font-heading: var(--font-sora);
--radius-md: 999px; /* pill-shaped components */
}
```
### 3. Override a component class — write it later in your file
```css
/* global.css */
.btn-primary {
background: #ff6b35;
border-radius: 999px;
}
```
### 4. Increase specificity with a wrapper class
```css
.my-app .btn-primary {
background: #ff6b35; /* wins over library's .btn-primary */
}
```
### 5. Double class trick — no wrapper needed
```css
.btn-primary.btn-primary {
background: #ff6b35; /* doubled specificity */
}
```
### 6. CSS `@layer` — modern priority control
```css
@layer njx, overrides;
@layer overrides {
.btn-primary { background: #ff6b35; } /* always wins over njx layer */
}
```
### 7. `!important` — last resort for utility overrides
```css
/* Fine for utilities */
.hidden { display: none !important; }
/* Avoid for components — use specificity instead */
```
---
## CSS Specificity Reference
```
[inline] [id] [class / attr / pseudo] [tag]
1 1 1 1
p → 0-0-0-1
.btn → 0-0-1-0
.btn.btn → 0-0-2-0 (double class trick)
#hero → 0-1-0-0
.app .btn → 0-0-2-0
:where(.btn) → 0-0-0-0 (zero — easy to override)
:is(#app, .btn) → 0-1-0-0 (inherits highest — #app)
```
> **Library convention:** base component styles use `:where()` so a single class in your file always overrides. Utility classes (`.d-none`, `.text-center`, etc.) use `!important` by design.
...
```
Max width: `120rem`, centered, width `96%`.
### 12-column Flex grid
```html
Half
Half
1/3
1/3
1/3
...
...
Heading
``` ### Body text | Class | Size | |-------|------| | `.text-lead` | 20px, weight 500 | | `.text-body` | 16px, weight 400 | | `.text-sm` | 14px | | `.text-xs` | 12px | | `.text-caption` | 12px, uppercase, letter-spacing | | `.text-label` | 14px, weight 600 | ### Text color ```htmlBlue
Red
Green
Error
Warning
Muted grey
White
``` ### Text alignment ```htmlCenter
Left
Right
``` ### Font weight ```html 100 300 400 500 600 700 800 900 ``` ### Transforms and decorations ```htmlUPPERCASE
lowercase
Capitalize
Underlined
Strikethrough
No wrap
``` --- ## 8. Utilities File: `css/_utils.css` — Tailwind-style classes. ### Display / Flex ```htmlflex
hidden
column
centered (x and y)
centered + space-between
column centered
...
```
### Spacing (margin / padding)
Format: `.mt-{n}`, `.mb-{n}`, `.ml-{n}`, `.mr-{n}`, `.mx-{n}`, `.my-{n}`
Format: `.pt-{n}`, `.pb-{n}`, `.pl-{n}`, `.pr-{n}`, `.px-{n}`, `.py-{n}`
Values of n: `0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24`
```html
...
Horizontally centered
```
### Width / Height
```html
100%
50%
100vh
min-height 100dvh
max-width 80%, auto margin
```
### Positioning
```html
overlay
header
absolute center (left+top 50% + transform)
```
### Border radius
```html
6px
12px
20px
pill
```
### Background
```html
blue background
card background
transparent
```
### Shadows
```html
regular shadow
blue glow
red glow
white glow
```
### Borders
```html
grey border
blue border
red border
no border
```
### Opacity
```html
invisible
50%
visible
```
### Responsive visibility
```html
visible on mobile only (≤768px)
visible on desktop only (>768px)
```
### Gap
```html
gap 16px
gap 32px
```
### Transitions
```html
0.3s
0.15s
0.5s
```
---
## 9. Buttons
File: `css/_buttons.css`
### Base button
```html
```
### Sizes
```html
```
### Color variants
```html
```
### Outline
```html
```
### Ghost
```html
```
### Gradient
```html
```
### Special effects
```html
```
### Gradient border
```html
Content
Content
Content
Content
Blue border with glow
Red border
Content
Content
Content
```
### Card text elements
```html
Title
Subtitle
Body text
Title
Main content
1
2
3
List item
List item
Simple box
Glass box
```
---
## 11. Forms
File: `css/_form.css`
### Native inputs (auto-styled)
All `input`, `select`, `textarea` are styled automatically — nothing extra needed.
```html
```
### Form group
```html
We'll use this to contact you
Invalid format
Looks great!
```
### Floating Label (label rises on focus/input)
```html
blue
red
green
error
yellow
```
### Background gradients — presets
```html
ocean blue
blue-purple
sunset
fire
nature
gold
honey
cosmic
galaxy
rainbow
silver
```
### Dark gradients
```html
dark grey
dark blue
black
```
### Text gradients
```html
Blue text
Gold text
Rainbow text
Metallic
Cosmic
``` ### Gradient borders ```htmlBlue border
Red border
Rainbow border
Gold border
```
### Animated gradients
```html
smoothly animated background
subtle animated
```
### Overlays
```html
Light sweep on hover
```
### Direction utilities (via CSS variables)
```html
→
↓
↘
⊙
```
---
## 13. Animations
File: `css/_animations.css`
Just add a class to any element.
### Fade
```html
fade in
fade out
from bottom
from top
from left
from right
```
### Scale / Bounce
```html
scale in appearance
pulsing scale (1x)
pulsing scale (big)
bounce
bounce on enter
```
### Float
```html
floating (±10px)
floating (±20px)
```
### Rotate / Spin
```html
spinning
spinning slowly
rotate 90°
```
### Shake / Wiggle
```html
shake
wiggle
```
### Pulse / Glow / Heartbeat
```html
pulse
heartbeat
blue glow
red glow
pulsing border
```
### Text effects
```html
rainbow shadow
neon yellow
neon blue
breathe
TEXT
```
### Shadow / Shimmer
```html
white neon glow
blue neon glow
skeleton loading effect
```
### Misc
```html
3D flip
rubber band
tada
```
### Speed and delay control
```html
fast (0.3s)
slow (2s)
very slow (4s)
delay 0.3s
delay 1s
paused
no animation
```
---
## 14. Navigation
File: `css/_nav.css`
### Base structure
```html
```
### Navbar variants
```html
```
### Sizes
```html
```
### Link style — underline
```html
```
### Active link
```html
Active (class)
Active (aria)
```
---
## 15. Tabs
File: `css/_tab.css`
### Base structure
```html
Content 1
Content 2
Content 3
small
large
```
### Full width
```html
...
```
### Content with border
```html
...
```
---
## 16. Notifications
File: `css/_notifications.css`
### Notification (block)
```html
Default
Info
Success
Warning
Error
Info
Notification text
```
### Toast (animated popup)
```html
Primary
Success!
Error!
Warning!
Dark
```
### Message (header + body)
```html
```
### Progress bar
```html
```
### Loader / Spinner
```html
```
### Delete button (×)
```html
```
---
## 17. Sidebar / Drawer
File: `css/_sidebar.css`
### CSS Variables
```css
--sidebar-width: 280px;
--sidebar-bg: var(--color-dark-secondary);
--sidebar-border: color-mix(in srgb, var(--color-neutral-600) 25%, transparent);
--sidebar-shadow: 0 8px 48px rgba(0, 0, 0, 0.38);
--sidebar-duration: 0.28s;
```
### Base structure — left overlay (default)
```html
```
### Variants
| Class | Description |
|---|---|
| `.sidebar` | Left overlay (default) |
| `.sidebar.sidebar-right` | Slides from right |
| `.sidebar.sidebar-push` | Pushes page content (needs `.sidebar-layout`) |
| `.sidebar.sidebar-fullpage` | Full viewport overlay |
| `.sidebar.sidebar-mini` | Icon rail — always visible, collapses to icons |
| `.sidebar.sidebar-floating` | Detached, rounded, glassmorphism |
### Right overlay
```html
```
### Push (shifts page content)
Requires a wrapper around the sidebar and the page content:
```html
```
### Fullpage overlay
```html
```
### Mini / Icon rail
Always visible, collapses to icons. Wrap text in `.sidebar-link-text` so it hides when collapsed:
```html
```
### Floating
```html
```
### Inner elements
| Element | Description |
|---|---|
| `.sidebar-header` | Top bar with title and close button |
| `.sidebar-title` | Title text in header |
| `.sidebar-brand` | Logo + brand name wrapper |
| `.sidebar-brand-logo` | Logo mark / monogram |
| `.sidebar-brand-text` | Brand subtitle |
| `.sidebar-close` | × close button (`sidebar-close-lg` — bigger, red hover) |
| `.sidebar-body` | Scrollable content area |
| `.sidebar-nav` | Vertical link list container |
| `.sidebar-link` | Navigation link (add `.is-active` for active state) |
| `.sidebar-link-text` | Text label — hidden in mini collapsed mode |
| `.sidebar-label` | Section heading label (uppercase, muted) |
| `.sidebar-divider` | Horizontal separator line |
| `.sidebar-footer` | Fixed bottom area |
| `.sidebar-backdrop` | Dimmed overlay behind the sidebar |
### JS API
```js
sidebarOpen('my-sidebar') // open
sidebarClose('my-sidebar') // close
sidebarToggle('my-sidebar') // toggle open/close
sidebarExpandToggle('my-sidebar') // toggle mini ↔ expanded (mini variant only)
```
---
## Quick Reference — Common Patterns
```html
Content
Heading
Subheading
Card 1
Card 2
Card 3
CASINO
``` --- ## Quick Reference — Responsive ```htmlHalf
Half
Heading
Text
Item
Item
Item