I'm a developer

CSS-Mint

by ArunMichaelDsouza

ArunMichaelDsouza / CSS-Mint

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

205 Stars 12 Forks Last release: Not found MIT License 266 Commits 37 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

CSS mint icon

CSS-Mint npm version NPM Downloads Latest Stable Version Patreon donate button

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

KeyCDN icon


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
or 
error
.

Example - 

Default alert


Primary alert


Success alert


Warning alert


Error alert

CSS mint 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

CSS mint badge


Breadcrumb

Use the 

cm-breadcrumb
class to create a breadcrumb component out of a 
ul
or 
ol
element with the specified list items.

Example - 




CSS mint breadcrumb







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



CSS mint button







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
   






CSS mint card







Grid system



CSS mint comes with a standard 
12
 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. 
    • 




CSS mint grid breakpoints



Example - 



   

      

         
1

      

      

         
2

      

      

         
3

      

      

         
4

      

      

         
5

      

      

         
6

      

      

         
7

      

      

         
8

      

      

         
9

      

      

         
10

      

      

         
11

      

      

         
12

      

   






CSS mint grid







Header



Create a header component with the 
cm-header
 class. Optionally you can add a 
primary
 or 
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 - 



    
    





   
   





   
   





CSS mint header







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
   










CSS mint input







Pagination



Add a 
cm-pagination
 class to a 
ul
 or 
ol
 to create a pagination component.


Example - 





CSS mint pagination







Swatches



CSS mint 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
      

   




CSS mint table







Thumbnail



Use the 
cm-thumbnail
 and 
cm-thumbnail-title
 classes to create a thumbnail component.


Example - 



   
   
This is the title






CSS mint thumbnail







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




CSS mint typography







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



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.

    
    
    
    
    
    
  


 We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.