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
How to Use Cosmic ? 🤔
Create an Link Tag inside the Head
NPM
CDN
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 🌑
Welcome to the Neumorphism 🔥 Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, laborum. Suscipit, voluptate. View Profile
Light ☀️
Welcome to the Neumorphism 🔥 Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, laborum. Suscipit, voluptate. View Profile
Feature #2 Buttons
#Normal-Buttons
Primary buttonDanger buttonSecondary buttonDark buttonWarning buttonSuccess buttonAqua buttonSpecial buttonWhite button
#Outline-Buttons
Primary buttonDanger buttonSecondary buttonDark buttonWarning buttonSuccess buttonAqua buttonSpecial buttonWhite button
More Classes for buttons
- btn-muted / btn-disabled
- btn-lg
- btn-block
- btn-group
Feature #3 Cards
We are Developers 😇 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi dolores dolore magni! View Profile Follow
# 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
# 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
Primary AlertBoxDark AlertBoxDanger AlertBoxWarning AlertBoxSuccess AlertBoxSecondary AlertBoxSpecial AlertBoxAqua AlertBoxWhite AlertBox