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