Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.
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.
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
You can install the kit using bower. Make sure you have bower installed, then run :
bower install CSS-Mint
npm install CSS-Mint
Or, download the latest version and include
css-mint.min.cssto your project.
All component classes have a
cm-*prefix.
Create alert messages by adding a
cm-alertclass with any of the optional styling classes -
primary,
success,
warningor
error.
Example -
Default alertPrimary alertSuccess alertWarning alertError alert
Create badges by simply adding a
cm-badgeclass with any of the optional styling classes. Add a
roundedclass to have a circular badge.
Example -
Default Primary Success Warning Error 10 20 30 40 50
Use the
cm-breadcrumbclass to create a breadcrumb component out of a
ulor
olelement with the specified list items.
Example -
Create solid buttons using the
cm-buttonclass with any of the optional styling classes. Alternatively you can create line buttons with the additional
lineclass.
Example -
Default Disabled Primary Success Warning Error Primary Success Warning Error
Create lifted card components with the
cm-cardclass. You can optionally add a dedicated
header,
bodyand
footerto the card using the
cm-card-header,
cm-card-bodyand
cm-card-footerclasses.
Example -
HeaderLorem 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.
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?
CSS mint comes with a standard
12column responsive grid. A grid container can have multiple rows and these rows can have multiple columns. Create a grid container using the
cm-gridclass and use the
cm-rowand
cm-col-*classes to create your responsive layout.
15px.
12available columns (from 1-12). Eg - Two equal columns can be created using two
cm-col-xs-6classes.
margin-leftto the targeted column. Eg -
cm-col-xs-offset-3applies a
margin-leftof
100 / 4 = 25%to the column, as total grid columns of
12can have
12 / 3 = 4columns of the specified class and width of each of these columns can be
100 / 4 = 25%, which is the applied margin.
Example -
123456789101112
Create a header component with the
cm-headerclass. Optionally you can add a
primaryor
invertedclass to have a thematic header. To make a header fixed to the top, add a
fixedclass.
The header component comes with an additional
logoand a
navcomponent. The logo component can be used to place a left aligned logo in the header using the
cm-logoclass. A right aligned nav bar component can be placed in the header using the
cm-navclass.
Example -
CSS mint has standard styling for input elements. It also comes with optional component wrappers for file upload using the
cm-file-inputclass and select box using the
cm-select-inputclass.
Example -
Upload a fileOption 1 Option 2 Option 3 Option 4
Add a
cm-paginationclass to a
ulor
olto create a pagination component.
Example -
CSS mint comes with standard styling for tables. Optionally you can add a
primaryclass 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 |
Use the
cm-thumbnailand
cm-thumbnail-titleclasses to create a thumbnail component.
Example -
This is the title
CSS mint comes with different typographic classes available for textual styling.
Example -
Primary TextSuccess TextWarning TextError TextLeft TextCenter TextRight TextJustified 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 textLarge TextSmall TextBold TextMedium TextLight TextUppercase TextLowercase TextCapitalized Text
Make any image responsive using the
cm-resp-imgclass.
Hide any element using the
cm-hideclass.
This is to be hidden
|
Arun Michael Dsouza
|
CJ Patoilo
|
Boris K
|
Lukas Drgon
|
| :---: | :---: | :---: | :---: |
If you'd like to help support the development of the project, please consider backing me on Patreon -
MIT Licensed
Copyright (c) 2015 Arun Michael Dsouza ([email protected])
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.