A flavorsome, minimalist-maximalist CSS framework built for impact.
Iskender is not just a framework; it's a design ethos inspired by the legendary dish. It rejects the cold, sterile aesthetics of modern web design in favor of warmth, richness, and bold structural elements.
We believe that digital interfaces should be rich and satisfying.
- No Neon: We trade cyber-glare for deep, earthy contrast.
- No Ai-Gened Noise: Every border and shadow is intentional.
- Pure Flavor: A "Minimalist-Maximalist" approach—stripping away the unnecessary to maximize the impact of what remains.
Our color system is derived from gastric harmony:
| Element | Color | Hex | Role |
|---|---|---|---|
| The Sauce | Rich Tomato Red | #D93025 |
Primary actions, headers, attention. |
| The Butter | Sizzling Gold | #FBBC05 |
Highlights, hover states, accents. |
| The Foundation | Pita Beige | #FDFBF7 |
Backgrounds, warmth, readability. |
| The Char | Grilled Dark Brown | #3C2A20 |
Text, borders, structure. |
Simply download the iskender.css file and link it in your HTML project.
<link rel="stylesheet" href="path/to/iskender.css">Or clone the repository:
git clone https://github.com/ocaloguzkaan/iskender.gitThe "Sizzling" button style features a deep shadow that depresses on click.
<!-- Primary Action -->
<button class="isk-btn">Order Now</button>
<!-- Accent Action -->
<button class="isk-btn isk-btn-gold">More Info</button>Cards feature a unique "Sauce Drip" hover effect (::before psuedo-element) that expands a red accent bar across the top.
<div class="isk-card">
<h3>Delicious Content</h3>
<p>Rich text goes here.</p>
</div>We use DM Serif Display for headers to evoke tradition and Lexend for modern readability.
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lexend:wght@300;500;700&display=swap');Toggle the class .inverted on the <body> tag to switch to the dark, "charred" theme.
document.body.classList.toggle('inverted');<div class="isk-accordion">
<details>
<summary>Section 1</summary>
<div class="isk-accordion-content">Content here...</div>
</details>
</div><div class="isk-alert isk-alert-warning">⚠️ Watch out for the spice!</div><span class="isk-badge">New</span>
<span class="isk-tag">Vegan</span><!-- Switch -->
<label class="isk-switch">
<input type="checkbox">
<span class="isk-switch-slider"></span>
</label>
<!-- Checkbox -->
<label class="isk-check-label">
<input type="checkbox" class="isk-check-input">
I agree to the terms
</label>
<!-- Input/Select -->
<select class="isk-select"><option>Option 1</option></select><table class="isk-table">
<thead><tr><th>Dish</th><th>Price</th></tr></thead>
<tbody><tr><td>Kebab</td><td>$15</td></tr></tbody>
</table><div class="isk-spinner"></div><div class="isk-progress"><div class="isk-progress-bar" style="width: 50%"></div></div>Made with hunger.