{"id":19831844,"url":"https://github.com/arunmichaeldsouza/css-mint","last_synced_at":"2025-04-10T03:50:36.522Z","repository":{"id":17069482,"uuid":"19834310","full_name":"ArunMichaelDsouza/CSS-Mint","owner":"ArunMichaelDsouza","description":"Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.","archived":false,"fork":false,"pushed_at":"2019-06-13T19:26:08.000Z","size":4902,"stargazers_count":211,"open_issues_count":0,"forks_count":13,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-05-21T08:51:24.357Z","etag":null,"topics":["css-color-swatches","css-framework","css-grid","css-library","ui-components","ui-design","ui-kit"],"latest_commit_sha":null,"homepage":"http://arunmichaeldsouza.github.io/CSS-Mint/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"halt-hammerzeit/libphonenumber-js","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArunMichaelDsouza.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":"arunmichaeldsouza","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2014-05-15T20:32:50.000Z","updated_at":"2024-02-26T10:45:43.000Z","dependencies_parsed_at":"2022-08-30T14:51:25.105Z","dependency_job_id":null,"html_url":"https://github.com/ArunMichaelDsouza/CSS-Mint","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArunMichaelDsouza%2FCSS-Mint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArunMichaelDsouza%2FCSS-Mint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArunMichaelDsouza%2FCSS-Mint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArunMichaelDsouza%2FCSS-Mint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArunMichaelDsouza","download_url":"https://codeload.github.com/ArunMichaelDsouza/CSS-Mint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922247,"owners_count":20855345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-color-swatches","css-framework","css-grid","css-library","ui-components","ui-design","ui-kit"],"created_at":"2024-11-12T11:35:06.214Z","updated_at":"2025-04-03T02:10:11.376Z","avatar_url":"https://github.com/ArunMichaelDsouza.png","language":"CSS","funding_links":["https://patreon.com/arunmichaeldsouza","https://www.patreon.com/arunmichaeldsouza","https://www.patreon.com/bePatron?u=8841116"],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/img/logo_v2.png\" width=\"200\" height=\"auto\" alt=\"CSS mint icon\"/\u003e\n\nCSS-Mint [![npm version](https://badge.fury.io/js/css-mint.svg)](https://badge.fury.io/js/css-mint) [![NPM Downloads](https://img.shields.io/npm/dm/css-mint.svg?style=flat-square)](https://www.npmjs.com/package/css-mint) [![Latest Stable Version](https://img.shields.io/bower/v/CSS-Mint.svg?style=flat-square)](http://bower.io/search/?q=CSS-Mint) [![](https://data.jsdelivr.com/v1/package/npm/css-mint/badge?style=rounded)](https://www.jsdelivr.com/package/npm/css-mint) \u003cspan class=\"badge-patreon\"\u003e\u003ca href=\"https://www.patreon.com/arunmichaeldsouza\" title=\"Donate to this project using Patreon\"\u003e\u003cimg src=\"https://img.shields.io/badge/patreon-donate-blue.svg\" alt=\"Patreon donate button\" /\u003e\u003c/a\u003e\u003c/span\u003e\n========\n\u003e Add some \"Mint\" to your web pages\n\n\nCSS 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.\n\n\u003cbr/\u003e\n\n## CDN sponsor\n\n\u003ca href=\"https://www.keycdn.com/\"\u003e\u003cimg src=\"https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/img/keycdn-logo.png\" width=\"220\" height=\"auto\" alt=\"KeyCDN icon\"/\u003e\u003c/a\u003e\n\n\u003cbr/\u003e\n\n## Installation\n\n#### CDN \n\nKey CDN\n\n```html\nhttp://cssmint-4be7.kxcdn.com/CSS-Mint/dist/2.0.7/css-mint.min.css\n```\n\nCdnjs\n\n```html\nhttps://cdnjs.cloudflare.com/ajax/libs/CSS-Mint/2.0.7/css-mint.min.css\n```\n\nJSdelivr CDN\n\n```html\nhttps://cdn.jsdelivr.net/npm/css-mint@2.0.7/build/css-mint.min.css\n```\n\n#### via bower\n\nYou can install the kit using bower. Make sure you have bower installed, then run : \n\n```html\nbower install CSS-Mint\n```\n\n#### via npm\n\n```html\nnpm install CSS-Mint\n```\n\nOr, [download](https://github.com/ArunMichaelDsouza/CSS-Mint/releases) the latest version and include ``css-mint.min.css`` to your project.\n\n\u003cbr/\u003e\n\n## Components\n\nAll component classes have a ``cm-*`` prefix.\n\n#### Alert\n\nCreate alert messages by adding a ``cm-alert`` class with any of the optional styling classes - ``primary``, ``success``, ``warning`` or ``error``.\n\nExample - \n\n```html\n\u003cdiv class=\"cm-alert\"\u003eDefault alert\u003c/div\u003e\n\u003cdiv class=\"cm-alert primary\"\u003ePrimary alert\u003c/div\u003e\n\u003cdiv class=\"cm-alert success\"\u003eSuccess alert\u003c/div\u003e\n\u003cdiv class=\"cm-alert warning\"\u003eWarning alert\u003c/div\u003e\n\u003cdiv class=\"cm-alert error\"\u003eError alert\u003c/div\u003e\n```\n\n![CSS mint alert](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/alert.png)\n\n\u003cbr/\u003e\n\n#### Badge\n\nCreate badges by simply adding a ``cm-badge`` class with any of the optional styling classes. Add a ``rounded`` class to have a circular badge.\n\nExample - \n\n```html\n\u003cspan class=\"cm-badge\"\u003eDefault\u003c/span\u003e\n\u003cspan class=\"cm-badge primary\"\u003ePrimary\u003c/span\u003e\n\u003cspan class=\"cm-badge success\"\u003eSuccess\u003c/span\u003e\n\u003cspan class=\"cm-badge warning\"\u003eWarning\u003c/span\u003e\n\u003cspan class=\"cm-badge error\"\u003eError\u003c/span\u003e\n\u003cspan class=\"cm-badge rounded\"\u003e10\u003c/span\u003e\n\u003cspan class=\"cm-badge rounded primary\"\u003e20\u003c/span\u003e\n\u003cspan class=\"cm-badge rounded success\"\u003e30\u003c/span\u003e\n\u003cspan class=\"cm-badge rounded warning\"\u003e40\u003c/span\u003e\n\u003cspan class=\"cm-badge rounded error\"\u003e50\u003c/span\u003e\n```\n\n![CSS mint badge](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/badge.png)\n\n\u003cbr/\u003e\n\n#### Breadcrumb\n\nUse the ``cm-breadcrumb`` class to create a breadcrumb component out of a ``ul`` or ``ol`` element with the specified list items.\n\nExample - \n\n```html\n\u003cul class=\"cm-breadcrumb\"\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003eProducts\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003eElectronics\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003eHeadphones\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli class=\"active\"\u003e\n      \u003ca href=\"#\"\u003eJBL\u003c/a\u003e\n   \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n![CSS mint breadcrumb](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/breadcrumb.png)\n\n\u003cbr/\u003e\n\n#### Button\n\nCreate 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.\n\nExample - \n\n```html\n\u003cbutton class=\"cm-btn\"\u003eDefault\u003c/button\u003e\n\u003cbutton class=\"cm-btn primary\" disabled\u003eDisabled\u003c/button\u003e\n\u003cbutton class=\"cm-btn primary\"\u003ePrimary\u003c/button\u003e\n\u003cbutton class=\"cm-btn success\"\u003eSuccess\u003c/button\u003e\n\u003cbutton class=\"cm-btn warning\"\u003eWarning\u003c/button\u003e\n\u003cbutton class=\"cm-btn error\"\u003eError\u003c/button\u003e\n\u003cbutton class=\"cm-btn primary line\"\u003ePrimary\u003c/button\u003e\n\u003cbutton class=\"cm-btn success line\"\u003eSuccess\u003c/button\u003e\n\u003cbutton class=\"cm-btn warning line\"\u003eWarning\u003c/button\u003e\n\u003cbutton class=\"cm-btn error line\"\u003eError\u003c/button\u003e\n```\n\n![CSS mint button](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/button.png)\n\n\u003cbr/\u003e\n\n#### Card\n\nCreate 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.\n\nExample - \n\n```html\n\u003cdiv class=\"cm-card\"\u003e\n   \u003cdiv class=\"cm-card-header\"\u003e\n      Header\n   \u003c/div\u003e\n   \u003cdiv class=\"cm-card-body\"\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi praesentium neque possimus pariatur provident tempora. Aut\n      perferendis iste unde cum, rerum consequatur tempora, porro voluptatum sequi tenetur recusandae\n      eos suscipit.\n   \u003c/div\u003e\n   \u003cdiv class=\"cm-card-footer\"\u003e\n      Footer\n   \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"cm-card\"\u003e\n   \u003cimg src=\"img/landscape.jpg\" class=\"cm-resp-img\" /\u003e\n   \u003cdiv class=\"cm-card-body\"\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eius praesentium dignissimos, reprehenderit est ratione\n      incidunt autem laudantium quia non necessitatibus earum quidem laboriosam quibusdam voluptas\n      qui maxime blanditiis pariatur?\n   \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"cm-card\"\u003e\n   \u003cimg src=\"img/tech.jpg\" class=\"cm-resp-img\" /\u003e\n   \u003cdiv class=\"cm-card-body\"\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eius praesentium dignissimos, reprehenderit est ratione\n      incidunt autem laudantium quia non necessitatibus earum quidem laboriosam quibusdam voluptas\n      qui maxime blanditiis pariatur?\n   \u003c/div\u003e\n   \u003cdiv class=\"cm-card-footer\"\u003e\n      \u003cbutton class=\"cm-btn success get-started\"\u003eGet Started\u003c/button\u003e\n   \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![CSS mint card](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/card.png)\n\n\u003cbr/\u003e\n\n#### Grid system\n\nCSS 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. \n\n* 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.\n* Columns have a default left/right padding (gutter) of ``15px``.\n* 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. \n* 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.\n* 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. \n\n\u003cimg alt=\"CSS mint grid breakpoints\" src=\"https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/img/grid-breakpoints.png\" width=\"550px\"/\u003e\n\nExample - \n\n```html\n\u003cdiv class=\"cm-grid\"\u003e\n   \u003cdiv class=\"cm-row\"\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e1\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e2\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e3\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e4\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e5\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e6\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e7\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e8\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e9\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e10\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e11\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"cm-col-md-1\"\u003e\n         \u003cdiv\u003e12\u003c/div\u003e\n      \u003c/div\u003e\n   \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![CSS mint grid](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/grid.png)\n\n\u003cbr/\u003e\n\n#### Header\n\nCreate 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.\n\nThe 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. \n\nExample - \n\n```html\n\u003cheader class=\"cm-header\"\u003e\n    \u003cdiv class=\"cm-logo cm-text-large\"\u003e\n    \u003ca href=\"#\"\u003eLogo\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cnav class=\"cm-nav\"\u003e\n    \u003cul\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n    \u003c/nav\u003e\n\u003c/header\u003e\n\n\u003cheader class=\"cm-header primary\"\u003e\n   \u003cdiv class=\"cm-logo cm-text-large\"\u003e\n      \u003ca href=\"#\"\u003eLogo\u003c/a\u003e\n   \u003c/div\u003e\n   \u003cnav class=\"cm-nav\"\u003e\n      \u003cul\u003e\n         \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\n         \u003c/li\u003e\n         \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\n         \u003c/li\u003e\n      \u003c/ul\u003e\n   \u003c/nav\u003e\n\u003c/header\u003e\n\n\u003cheader class=\"cm-header inverted\"\u003e\n   \u003cdiv class=\"cm-logo cm-text-large\"\u003e\n      \u003ca href=\"#\"\u003eLogo\u003c/a\u003e\n   \u003c/div\u003e\n   \u003cnav class=\"cm-nav\"\u003e\n      \u003cul\u003e\n         \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\n         \u003c/li\u003e\n         \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\n         \u003c/li\u003e\n      \u003c/ul\u003e\n   \u003c/nav\u003e\n\u003c/header\u003e\n```\n\n![CSS mint header](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/header.png)\n\n\u003cbr/\u003e\n\n#### Input\n\nCSS 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.\n\nExample - \n\n```html\n\u003cinput type=\"text\" placeholder=\"Enter your name\" /\u003e\n\u003cinput type=\"text\" placeholder=\"I am disabled\" disabled /\u003e\n\u003cinput type=\"password\" placeholder=\"Enter your password\" /\u003e\n\u003cinput type=\"email\" placeholder=\"Enter your email\" /\u003e\n\u003cinput type=\"number\" placeholder=\"Enter your phone no.\" /\u003e\n\u003cinput type=\"search\" placeholder=\"Search...\" /\u003e\n\u003cinput type=\"url\" placeholder=\"Enter your website\" /\u003e\n\u003cdiv class=\"cm-file-input\"\u003e\n   \u003cdiv class=\"file-input-label\"\u003eUpload a file\u003c/div\u003e\n   \u003cinput type=\"file\" /\u003e\n\u003c/div\u003e\n\u003cdiv class=\"cm-select-input\"\u003e\n   \u003cselect\u003e\n      \u003coption\u003eOption 1\u003c/option\u003e\n      \u003coption\u003eOption 2\u003c/option\u003e\n      \u003coption\u003eOption 3\u003c/option\u003e\n      \u003coption\u003eOption 4\u003c/option\u003e\n   \u003c/select\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003ctextarea\u003e\u003c/textarea\u003e\n\u003cinput type=\"radio\" /\u003e\n\u003cinput type=\"checkbox\" /\u003e\n```\n\n![CSS mint input](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/input.png)\n\n\u003cbr/\u003e\n\n#### Pagination\n\nAdd a ``cm-pagination`` class to a ``ul`` or ``ol`` to create a pagination component.\n\nExample - \n\n```html\n\u003cul class=\"cm-pagination\"\u003e\n   \u003cli class=\"prev\"\u003e\n      \u003ca href=\"#\"\u003ePrev\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003e1\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli class=\"active\"\u003e\n      \u003ca href=\"#\"\u003e2\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003e3\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003e4\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli\u003e\n      \u003ca href=\"#\"\u003e5\u003c/a\u003e\n   \u003c/li\u003e\n   \u003cli class=\"next\"\u003e\n      \u003ca href=\"#\"\u003eNext\u003c/a\u003e\n   \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n![CSS mint pagination](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/pagination.png)\n\n\u003cbr/\u003e\n\n#### Swatches\n\n![CSS mint swatches](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/swatches.png)\n\n\u003cbr/\u003e\n\n#### Table\n\nCSS mint comes with standard styling for tables. Optionally you can add a ``primary`` class to have a thematic table.\n\nExample - \n\n```html\n\u003ctable\u003e\n   \u003cthead\u003e\n      \u003ctr\u003e\n         \u003cth\u003eS.no.\u003c/th\u003e\n         \u003cth\u003eName\u003c/th\u003e\n         \u003cth\u003eUser Id\u003c/th\u003e\n         \u003cth\u003eStatus\u003c/th\u003e\n      \u003c/tr\u003e\n   \u003c/thead\u003e\n   \u003ctbody\u003e\n      \u003ctr\u003e\n         \u003ctd\u003e1\u003c/td\u003e\n         \u003ctd\u003eAlice\u003c/td\u003e\n         \u003ctd\u003e453\u003c/td\u003e\n         \u003ctd\u003eActive\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n         \u003ctd\u003e2\u003c/td\u003e\n         \u003ctd\u003eBob\u003c/td\u003e\n         \u003ctd\u003e222\u003c/td\u003e\n         \u003ctd\u003eInactive\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n         \u003ctd\u003e3\u003c/td\u003e\n         \u003ctd\u003eSam\u003c/td\u003e\n         \u003ctd\u003e643\u003c/td\u003e\n         \u003ctd\u003eInactive\u003c/td\u003e\n      \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ctable class=\"primary\"\u003e\n   \u003cthead\u003e\n      \u003ctr\u003e\n         \u003cth\u003eS.no.\u003c/th\u003e\n         \u003cth\u003eName\u003c/th\u003e\n         \u003cth\u003eUser Id\u003c/th\u003e\n         \u003cth\u003eStatus\u003c/th\u003e\n      \u003c/tr\u003e\n   \u003c/thead\u003e\n   \u003ctbody\u003e\n      \u003ctr\u003e\n         \u003ctd\u003e1\u003c/td\u003e\n         \u003ctd\u003eAlice\u003c/td\u003e\n         \u003ctd\u003e453\u003c/td\u003e\n         \u003ctd\u003eActive\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n         \u003ctd\u003e2\u003c/td\u003e\n         \u003ctd\u003eBob\u003c/td\u003e\n         \u003ctd\u003e222\u003c/td\u003e\n         \u003ctd\u003eInactive\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n         \u003ctd\u003e3\u003c/td\u003e\n         \u003ctd\u003eSam\u003c/td\u003e\n         \u003ctd\u003e643\u003c/td\u003e\n         \u003ctd\u003eInactive\u003c/td\u003e\n      \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n![CSS mint table](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/table.png)\n\n\u003cbr/\u003e\n\n#### Thumbnail\n\nUse the ``cm-thumbnail`` and ``cm-thumbnail-title`` classes to create a thumbnail component.\n\nExample - \n\n```html\n\u003cdiv class=\"cm-thumbnail\"\u003e\n   \u003cimg src=\"img/tech.jpg\" /\u003e\n   \u003cdiv class=\"cm-thumbnail-title\"\u003eThis is the title\u003c/div\u003e\n\u003c/div\u003e\n```\n\n![CSS mint thumbnail](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/thumbnail.png)\n\n\u003cbr/\u003e\n\n#### Typography\n\nCSS mint comes with different typographic classes available for textual styling.\n\nExample - \n\n```html\n\u003cdiv class=\"cm-text-primary\"\u003ePrimary Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-success\"\u003eSuccess Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-warning\"\u003eWarning Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-error\"\u003eError Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-left\"\u003eLeft Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-center\"\u003eCenter Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-right\"\u003eRight Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-justify\"\u003e\n   Justified text Justified text Justified text Justified text Justified text Justified text Justified text Justified text Justified\n   text Justified text Justified text Justified text Justified text Justified text Justified text\n   Justified text Justified text Justified text Justified text Justified text Justified text Justified\n   text\n\u003c/div\u003e\n\u003cdiv class=\"cm-text-large\"\u003eLarge Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-small\"\u003eSmall Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-bold\"\u003eBold Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-medium\"\u003eMedium Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-light\"\u003eLight Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-uppercase\"\u003eUppercase Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-lowercase\"\u003eLowercase Text\u003c/div\u003e\n\u003cdiv class=\"cm-text-capitalize\"\u003eCapitalized Text\u003c/div\u003e\n```\n\n![CSS mint typography](https://github.com/ArunMichaelDsouza/CSS-Mint/raw/master/demo/screenshots/typography.png)\n\n\u003cbr/\u003e\n\n#### Utilities\n\nMake any image responsive using the ``cm-resp-img`` class.\n\n```html\n\u003cimg src=\"path_to_image\" class=\"cm-resp-img\"/\u003e\n```\n\nHide any element using the ``cm-hide`` class.\n\n```html\n\u003cdiv class=\"cm-hide\"\u003e\n    This is to be hidden\n\u003c/div\u003e\n```\n\n\u003cbr/\u003e\n\n## Contributors\n\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/4924614\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eArun Michael Dsouza\u003c/b\u003e\u003c/sub\u003e](https://github.com/ArunMichaelDsouza)\u003cbr /\u003e| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/1542831\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCJ Patoilo\u003c/b\u003e\u003c/sub\u003e](https://github.com/cjpatoilo)\u003cbr /\u003e| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/17952318\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBoris K\u003c/b\u003e\u003c/sub\u003e](https://github.com/bokub)\u003cbr /\u003e | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/15611832\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLukas Drgon\u003c/b\u003e\u003c/sub\u003e](https://github.com/LukasDrgon)\u003cbr /\u003e |\n| :---: | :---: | :---: | :---: |\n\n\u003cbr/\u003e\n\n## Support\n\nIf you'd like to help support the development of the project, please consider backing me on Patreon -\n\n[\u003cimg src=\"https://arunmichaeldsouza.com/img/patreon.png\" width=\"180px;\"/\u003e](https://www.patreon.com/bePatron?u=8841116)\n\n\u003cbr/\u003e\n\n## License\n\nMIT Licensed\n\nCopyright (c) 2015 Arun Michael Dsouza (amdsouza92@gmail.com)\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunmichaeldsouza%2Fcss-mint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farunmichaeldsouza%2Fcss-mint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunmichaeldsouza%2Fcss-mint/lists"}