/Zephyr

Minimal class-less css stylesheet to make boring sites look cool! [WIP]

Primary LanguageCSS

Zephyr 🎐

Minimal class-less css stylesheet to make boring sites look cool!

Usage

Zephyr doesn't intends to become a complete css component kit, it's a css stylesheet to make default HTML sites better

Check out the demo. If you're satisfied give it a try~

In HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/zephyr.all.css">

<!-- Or just use what you want -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/buttons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/card.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/text.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/form.css">

In Css

@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/zephyr.all.css");

/* Again, use what you want */
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/buttons.css");
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/card.css");
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/text.css");
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/form.css");

z-* helpers

These are additional data classes to make sure you don't have to touch css, unless it's necessary

Syntax: <element data-z-*></element>

  • Buttons

    • data-z-red
    • data-z-green
    • data-z-white
    • data-z-yellow
    • data-z-purple
    • data-z-blue (accent color)

  • CSS cards

    • Create a container div with data-z-card-container
    • Add cards with data-z-card

  • Code blocks

    • You can add code blocks with file names like this,
    <pre>
<code><span>file_name.js</span>
console.log("My code")
</code>
</pre>

  • Text formatting

    • Center text with data-z-center

Examples 👷

Take a look at Demo Html File