Getting Started
Introduction
Mikey CSS is a free, open-source CSS framework that provides ready-to-use frontend components to build responsive and modern websites.
Usage
To use Mikey CSS in your project:
Option 1: Copy-paste the stylesheet
<link> into your <head> before all
other stylesheets.
Option 2: Copy-paste the @import into your stylesheets.
For certain components which need action and outcome, copy-paste the
<script> just before the <body> .
Download
You can download the ready-to-use compiled code for Mikey CSS and easily it use it in your project.
DownloadColors
The colour palette used in Mikey CSS is:
#0d6efd
#6c757d
#198754
#dc3545
#ffc107
#0dcaf0
f8f9fa
#05103a
Typography
Mikey CSS uses Nunito Sans as its default font, which is a free font available on Google Fonts.
Contribute
Mikey CSS is a free, open-source CSS framework. To keep up with today's design requirements, we require your help too. Any contribution / review / suggestion is highly appreciated.
ContributeComponents
1. Alert
Alerts are notifications that keeps the user informed of the status of the system, which may or may not require the user to respond. This includes general updates, errors, and warnings
Examples of Simple Alert
Examples of Simple Outline Alert
2. Avatar
Avatar can be used to show user's profile picture on profile information page.
Examples of Avatar in different shapes
Examples of Square Avatar in different sizes
Examples of Round Avatar in different sizes
3. Badge
Badges are used to dispaly status information or count notification on top of other UI elements like avatars, icons and also text.
Examples of Square Badge on an icon
Examples of Round Badge on an icon
Examples of Square Badge on an avatar
Examples of Round Badge on an avatar
5. Card
Cards are full of interactive elements such as text, links, buttons or images but they suggest just one main action: the one of "clicking" through the card to further discover the content.
Examples of Text-only Card
Tony
AuthorExample of an Image-only Card
Example of a Full Card
Tony
AuthorExample of a Product Card
Rs 500
Example of a Badge Card
Example of a Badge Card
Example of a Dismiss Card
Tony
AuthorExample of a Text Overlay Card
Tony
AuthorExample of a Horizontal Card
Tony
Author Lorem ipsum ...Example of a Horizontal Product Card
Men's Premium Shirt
Rs 500
50% offExample of an Extended Horizontal Product Card
Men's Premium Shirt
Rs 500
50% offQuantity: 1
6. Image
There are two types of images: responsive and rounded image.
Example of a Responsive Image
Examples of Round Responsive Image
7. Input
Input elements are used to take infromation from user. Input components are used in a variety of usecases like forms, sign-up/sign-in pages etc.
Examples of Textbox
Examples of Textbox with error styling
8. Modal
It is a web page element that is displayed in front of the screen and deactivates all other page content including the ability to scroll.
Example of Modal
Tony
Author9. Toast
It is a UI feature where an event causes a small text box to appear at the bottom of the screen. The behavior seems like a piece of bread emerging from a toaster, thus the name.
Examples of Toast
10. List
List are used to display collection of data in an arranged way. There are two lists provided: horizontal and vertical list.
Example of Horizontal list
- HTML
- CSS
- Javascript
- React
- Typescript
Example of Vertical list
- HTML
- CSS
- Javascript
- React
- Typescript
11. Text
Text content can be styled using classes from the component library as follows.
Examples of Headings
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Examples of Text
Text Muted/Gray
Text Danger
Text Bold
Text Small
Text Center
12. Rating
We all love highly rated products. Display their rating through stars!
Examples of Rating
13. Grid
Arrange items conveniently using grids.