Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arunmichaeldsouza/css-mint
Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.
https://github.com/arunmichaeldsouza/css-mint
css-color-swatches css-framework css-grid css-library ui-components ui-design ui-kit
Last synced: 6 days ago
JSON representation
Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.
- Host: GitHub
- URL: https://github.com/arunmichaeldsouza/css-mint
- Owner: ArunMichaelDsouza
- License: mit
- Created: 2014-05-15T20:32:50.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-06-13T19:26:08.000Z (over 5 years ago)
- Last Synced: 2024-05-21T08:51:24.357Z (8 months ago)
- Topics: css-color-swatches, css-framework, css-grid, css-library, ui-components, ui-design, ui-kit
- Language: CSS
- Homepage: http://arunmichaeldsouza.github.io/CSS-Mint/
- Size: 4.67 MB
- Stars: 211
- Watchers: 22
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
CSS-Mint [](https://badge.fury.io/js/css-mint) [](https://www.npmjs.com/package/css-mint) [](http://bower.io/search/?q=CSS-Mint) [](https://www.jsdelivr.com/package/npm/css-mint) 
========
> 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
```html
http://cssmint-4be7.kxcdn.com/CSS-Mint/dist/2.0.7/css-mint.min.css
```
Cdnjs
```html
https://cdnjs.cloudflare.com/ajax/libs/CSS-Mint/2.0.7/css-mint.min.css
```
JSdelivr CDN
```html
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 :
```html
bower install CSS-Mint
```
#### via npm
```html
npm install CSS-Mint
```
Or, [download](https://github.com/ArunMichaelDsouza/CSS-Mint/releases) 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 -
```html
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 -
```html
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`` or ``ol`` element with the specified list items.
Example -
```html
```
#### 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 -
```html
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 -
```html
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?
```
#### 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.
Example -
```html
```
#### 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 -
```html
```
#### 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 -
```html
Option 1
Option 2
Option 3
Option 4
```
#### Pagination
Add a ``cm-pagination`` class to a ``ul`` or ``ol`` to create a pagination component.
Example -
```html
```
#### Swatches
#### Table
CSS mint comes with standard styling for tables. Optionally you can add a ``primary`` class to have a thematic table.
Example -
```html
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 -
```html
```
#### Typography
CSS mint comes with different typographic classes available for textual styling.
Example -
```html
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
```
#### Utilities
Make any image responsive using the ``cm-resp-img`` class.
```html
```
Hide any element using the ``cm-hide`` class.
```html
This is to be hidden
```
## Contributors
| [
Arun Michael Dsouza](https://github.com/ArunMichaelDsouza)
| [
CJ Patoilo](https://github.com/cjpatoilo)
| [
Boris K](https://github.com/bokub)
| [
Lukas Drgon](https://github.com/LukasDrgon)
|
| :---: | :---: | :---: | :---: |
## Support
If you'd like to help support the development of the project, please consider backing me on Patreon -
[
](https://www.patreon.com/bePatron?u=8841116)
## 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.