Cupertino.css

Apple-inspired classless CSS framework pre čistý a elegantný web design

Typography

Heading 1 - Large Title

Heading 2 - Title 1

Heading 3 - Title 2

Heading 4 - Title 3

Heading 5 - Headline
Heading 6 - Subheadline

This is a paragraph with bold text and italic text. It demonstrates the typography system inspired by Apple's design language.

This is another paragraph to show spacing. You can also use inline code for technical content.

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

Forms

Personal Information

Components

Form Controls

Switches (Toggle):

Range slider:

Checkboxes and radio buttons:






Dialogs & Modals

Native HTML <dialog> element with backdrop blur:

System Alert

This is a native dialog with a glassmorphism backdrop effect, similar to iOS system alerts.

Messages & Alerts

Interactive Elements

Accordion/Collapsible content:

What is Cupertino.css?

Cupertino.css is a classless CSS framework inspired by Apple's design language. It provides beautiful styling without requiring any CSS classes in your HTML.

How to use it?

Simply include the CSS file in your HTML and write semantic markup. The framework will automatically style your content with Apple-inspired design.

Badges and Tags

Use mark elements for badges and highlighted content that stands out.

Keyboard Shortcuts

Press ⌘ + C to copy, or Ctrl + V to paste.

Loading States

Button Variants

Text Utilities

This is muted text.

This is success text.

This is danger text.

Centered text (existing).

Right aligned text.

Table

Product Price Availability Rating
iPhone 15 Pro €1,199 In Stock ★★★★★
MacBook Pro 14" €2,499 In Stock ★★★★★
iPad Air €729 Limited ★★★★☆

Lists

  1. Download the CSS file
  2. Link it in your HTML
  3. Write semantic HTML
  4. Enjoy beautiful styling

Examples

Card Example

This is an example of a card component. It uses the article element and gets automatic styling with shadows, padding, and rounded corners.

Learn more about this topic

Code Example

Here's how you can display code blocks:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="cupertino.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>No classes needed.</p>
</body>
</html>