cosmiccss

1.3.2 • Public • Published

Cosmic CSS Framework ☄️

Cosmic is a CSS Framework ☄️. It has More Unique Component Designs eg: Bouncing Button, Neumorphism, Responsive Cards, Rainbow Spinner, etc.,

Get Started with Cosmic 🐣

Installation ⚙️

Via NPM

npm install cosmiccss

Via CDN

CDN LINK 🔥

How to Use Cosmic ? 🤔

Create an Link Tag inside the Head

NPM

<link rel="stylesheet" href="./node_modules/cosmiccss/css/comic.min.css" />

CDN

<link
  rel="stylesheet"
  href="https://raw.githack.com/Aravindakrishnan/Cosmic/master/cosmic/css/cosmic.min.css"
/>

Features of Cosmic ? 🌈

  • Neumorphism
  • Buttons
  • Cards
  • Rainbow Spinner & More
  • Backgrounds
  • Outline Buttons
  • Alert
  • Colorful Input-control
  • Quote
  • Marker
  • Navbar
  • Image

Feature #1 Neumorphism

neumorphic classes 📖

  • neumorphism-dark
  • neumorphism-dark-inset
  • neumorphism-light
  • neumorphism-light-inset
  • neumorphism-primary
  • neumorphism-lens
  • neumorphism-concave
  • neumorphism-convex

If you are going to use dark neumorphism give a body className as theme-dark

If you are going to use light neumorphism give a body className as theme-light

Dark 🌑

alt neumorphismdarkinset

<div
  class="card bg-dark border-radius-min neumorphism-dark-inset"
  style="max-width: 500px"
>
  <div class="card-body text-white">
    <h4 class="card-title">Welcome to the Neumorphism 🔥</h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
      laborum. Suscipit, voluptate.
    </p>
    <button class="btn btn-dark mt-2 text-white">View Profile</button>
  </div>
</div>

Light ☀️

alt neumorphismlight

<div
  class="card bg-white border-radius-min neumorphism-light"
  style="max-width: 500px"
>
  <div class="card-body text-dark">
    <h4 class="card-title font-lg">Welcome to the Neumorphism 🔥</h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
      laborum. Suscipit, voluptate.
    </p>
    <button class="btn btn-dark mt-2 text-white">View Profile</button>
  </div>
</div>

Feature #2 Buttons

#Normal-Buttons

alt normalbuttons

<button class="btn btn-primary">Primary button</button>
<button class="btn btn-danger">Danger button</button>
<button class="btn btn-secondary text-white">Secondary button</button>
<button class="btn btn-dark text-white">Dark button</button>
<button class="btn btn-warning">Warning button</button>
<button class="btn btn-success">Success button</button>
<button class="btn btn-aqua text-white">Aqua button</button>
<button class="btn btn-special text-white">Special button</button>
<button class="btn btn-white text-dark">White button</button>

#Outline-Buttons

alt outlinebuttons

<button class="btn btn-outline-primary">Primary button</button>
<button class="btn btn-outline-danger">Danger button</button>
<button class="btn btn-outline-secondary">Secondary button</button>
<button class="btn btn-outline-dark">Dark button</button>
<button class="btn btn-outine-warning">Warning button</button>
<button class="btn btn-outline-success">Success button</button>
<button class="btn btn-outline-aqua">Aqua button</button>
<button class="btn btn-outline-special">Special button</button>
<button class="btn btn-outline-white">White button</button>

More Classes for buttons

  • btn-muted / btn-disabled
  • btn-lg
  • btn-block
  • btn-group

Feature #3 Cards

alt cardimg

<div class="card bg-aqua border-radius-min" style="max-width: 500px">
  <img
    class="img-fit border-radius-min"
    src="https://f4.bcbits.com/img/a3808804510_10.jpg"
    alt="img"
  />
  <div class="card-body text-white">
    <h2 class="card-title">We are Developers 😇</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi dolores
      dolore magni!
    </p>
    <button class="btn btn-aqua text-white mt-2">View Profile</button>
    <button class="btn btn-aqua text-white mt-2">Follow</button>
  </div>
</div>
# Color Available in Cosmic 🌈

- primary - secondary - danger - warning - success - dark - white - special - aqua

Feature #4 Spinner

# Normal Spinner



danger | warning | success | primary | dark | secondary | white | special | rainbow

<div class="spinner-colorName"></div>

# Spinner sizes

  • spinner-colorName-sm / spinner-colorName-min
  • spinner-colorName-md / spinner-colorName-avg
  • spinner-colorName-lg / spinner-colorName-max

# Spinner Props

  • spinner-colorName / spinner-colorName-sizes
  • spinner-colorName-grow / spinner-colorName-grow-sizes
  • spinner-dotted-colorName / spinner-dotted-colorName-sizes

Feature #5 Alerts

alt alertimg

<div class="alert alert-primary">Primary AlertBox</div>
<div class="alert alert-dark text-white">Dark AlertBox</div>
<div class="alert alert-danger text-dark">Danger AlertBox</div>
<div class="alert alert-warning">Warning AlertBox</div>
<div class="alert alert-success">Success AlertBox</div>
<div class="alert alert-secondary">Secondary AlertBox</div>
<div class="alert alert-special">Special AlertBox</div>
<div class="alert alert-aqua">Aqua AlertBox</div>
<div class="alert alert-white text-dark neumorphism-light">White AlertBox</div>

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.3.20latest

Version History

VersionDownloads (Last 7 Days)Published
1.3.20
1.3.10
1.3.00
1.2.90
1.2.80
1.2.70
1.2.60
1.2.50
1.2.30
1.2.20
1.2.10
1.2.00
1.1.180
1.1.170
1.1.160
1.1.150
1.1.140
1.1.130
1.1.120
1.1.110
1.1.100
1.1.90
1.1.80
1.1.70
1.1.60
1.1.50
1.1.41
1.1.30
1.1.20
1.1.10
1.1.00
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i cosmiccss

Weekly Downloads

1

Version

1.3.2

License

MIT

Unpacked Size

59.2 kB

Total Files

3

Last publish

Collaborators

  • aravindakrishnan