ArunMichaelDsouza/ CSS-Mint

JavaScript

css-grid

css-framework

CSS

ui-kit

css-library

View on GitHub

Need help with CSS-Mint?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ArunMichaelDsouza

212 Stars

13 Forks

MIT License

266 Commits

0 Opened issues

Description

Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.

Services available

Need anything else?

Contributors list

Arun Michael Dsouza ArunMichaelDsouza

# 91,197

css-fra...

CSS

css-lib...

css3-an...

250 commits

Carlos Patoilo cjpatoilo

# 7,303

css-fra...

CSS

HTML

Webpack

2 commits

Boris K bokub

# 29,425

Babel

cli-app...

Sass

specifi...

1 commit

Lukas Drgon LukasDrgon

# 10,184

Algolia

arcgis

scrollt...

Vanilla...

1 commit

Readme

CSS-Mint

Name: CSS-Mint
Brand: CSS-Mint
SKU: //ArunMichaelDsouza/CSS-Mint
Rating: 2.28 (212 reviews)

Add some "Mint" to your web pages

CSS Mint is a lightweight and fully-responsive open source UI kit built to ease up layout and structuring of your web application. Built on top of normalize.css, it handles cross browser inconsistencies and provides minimalistic CSS components to be used in your application.

CDN sponsor

Installation

CDN

Key CDN

http://cssmint-4be7.kxcdn.com/CSS-Mint/dist/2.0.7/css-mint.min.css

Cdnjs

https://cdnjs.cloudflare.com/ajax/libs/CSS-Mint/2.0.7/css-mint.min.css

JSdelivr CDN

https://cdn.jsdelivr.net/npm/[email protected]/build/css-mint.min.css

via bower

You can install the kit using bower. Make sure you have bower installed, then run :

bower install CSS-Mint

via npm

npm install CSS-Mint

Or, download the latest version and include

css-mint.min.css

to your project.

Components

All component classes have a

cm-*

prefix.

Alert

Create alert messages by adding a

cm-alert

class with any of the optional styling classes -

primary

success

warning

error

Example -

Default alert
Primary alert
Success alert
Warning alert
Error alert

Badge

Create badges by simply adding a

cm-badge

class with any of the optional styling classes. Add a

rounded

class to have a circular badge.

Example -

Default
Primary
Success
Warning
Error
10
20
30
40
50

Breadcrumb

Use the

cm-breadcrumb

class to create a breadcrumb component out of a

ul

ol

element with the specified list items.

Example -

Button

Create solid buttons using the

cm-button

class with any of the optional styling classes. Alternatively you can create line buttons with the additional

line

class.

Example -

Default
Disabled
Primary
Success
Warning
Error
Primary
Success
Warning
Error

Card

Create lifted card components with the

cm-card

class. You can optionally add a dedicated

header

body

and

footer

to the card using the

cm-card-header

cm-card-body

and

cm-card-footer

classes.

Example -


   
      Header
   
   
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi praesentium neque possimus pariatur provident tempora. Aut
      perferendis iste unde cum, rerum consequatur tempora, porro voluptatum sequi tenetur recusandae
      eos suscipit.
   
   
      Footer
   



   
   
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eius praesentium dignissimos, reprehenderit est ratione
      incidunt autem laudantium quia non necessitatibus earum quidem laboriosam quibusdam voluptas
      qui maxime blanditiis pariatur?
   



   
   
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eius praesentium dignissimos, reprehenderit est ratione
      incidunt autem laudantium quia non necessitatibus earum quidem laboriosam quibusdam voluptas
      qui maxime blanditiis pariatur?
   
   
      Get Started

Grid system

CSS mint comes with a standard

column responsive grid. A grid container can have multiple rows and these rows can have multiple columns. Create a grid container using the

cm-grid

class and use the

cm-row

and

cm-col-*

classes to create your responsive layout.

All rows and columns must be placed within the grid container, and within the grid row only should the grid columns be placed. The content is placed within these columns.
Columns have a default left/right padding (gutter) of
```
15px
```
.
Columns can be created by specifying the number of any of the
```
12
```
available columns (from 1-12). Eg - Two equal columns can be created using two
```
cm-col-xs-6
```
classes.
Grid columns can also have an offset, specifying which, adds a
```
margin-left
```
to the targeted column. Eg -
```
cm-col-xs-offset-3
```
applies a
```
margin-left
```
of
```
100 / 4 = 25%
```
to the column, as total grid columns of
```
12
```
can have
```
12 / 3 = 4
```
columns of the specified class and width of each of these columns can be
```
100 / 4 = 25%
```
, which is the applied margin.
The grid system provides media query powered breakpoints for various screen sizes. These breakpoints can be used with the grid columns for creating desired responsive layouts.

Example -

Header

Create a header component with the

cm-header

class. Optionally you can add a

primary

inverted

class to have a thematic header. To make a header fixed to the top, add a

fixed

class.

The header component comes with an additional

logo

and a

nav

component. The logo component can be used to place a left aligned logo in the header using the

cm-logo

class. A right aligned nav bar component can be placed in the header using the

cm-nav

class.

Example -

Input

CSS mint has standard styling for input elements. It also comes with optional component wrappers for file upload using the

cm-file-input

class and select box using the

cm-select-input

class.

Example -






   Upload a file
   


   
      Option 1
      Option 2
      Option 3
      Option 4

Pagination

Add a

cm-pagination

class to a

ul

ol

to create a pagination component.

Example -

Swatches

Table

CSS mint comes with standard styling for tables. Optionally you can add a

primary

class to have a thematic table.

Example -

S.no.	Name	User Id	Status
1	Alice	453	Active
2	Bob	222	Inactive
3	Sam	643	Inactive

S.no.	Name	User Id	Status
1	Alice	453	Active
2	Bob	222	Inactive
3	Sam	643	Inactive

Thumbnail

Use the

cm-thumbnail

and

cm-thumbnail-title

classes to create a thumbnail component.

Example -


   
   This is the title

Typography

CSS mint comes with different typographic classes available for textual styling.

Example -

Primary Text
Success Text
Warning Text
Error Text
Left Text
Center Text
Right Text

   Justified text Justified text Justified text Justified text Justified text Justified text Justified text Justified text Justified
   text Justified text Justified text Justified text Justified text Justified text Justified text
   Justified text Justified text Justified text Justified text Justified text Justified text Justified
   text

Large Text
Small Text
Bold Text
Medium Text
Light Text
Uppercase Text
Lowercase Text
Capitalized Text

Utilities

Make any image responsive using the

cm-resp-img

class.

Hide any element using the

cm-hide

class.


    This is to be hidden

Contributors

|
_{Arun Michael Dsouza}
|
_{CJ Patoilo}
|
_{Boris K}
|
_{Lukas Drgon}
| | :---: | :---: | :---: | :---: |

Support

If you'd like to help support the development of the project, please consider backing me on Patreon -

License

MIT Licensed

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.