{"id":13629268,"url":"https://github.com/cardinalcss/cardinalcss","last_synced_at":"2026-02-23T10:06:35.675Z","repository":{"id":5299943,"uuid":"6481005","full_name":"cardinalcss/cardinalcss","owner":"cardinalcss","description":"A modular, “mobile-first” CSS framework built with performance and scalability in mind.","archived":false,"fork":false,"pushed_at":"2019-05-21T15:35:38.000Z","size":1725,"stargazers_count":715,"open_issues_count":0,"forks_count":75,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-04-12T14:49:53.780Z","etag":null,"topics":["css","css-framework"],"latest_commit_sha":null,"homepage":"http://cardinalcss.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cardinalcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-10-31T21:32:19.000Z","updated_at":"2025-04-02T13:44:19.000Z","dependencies_parsed_at":"2022-07-05T06:31:13.770Z","dependency_job_id":null,"html_url":"https://github.com/cardinalcss/cardinalcss","commit_stats":null,"previous_names":["cbracco/cardinal"],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cardinalcss%2Fcardinalcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cardinalcss%2Fcardinalcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cardinalcss%2Fcardinalcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cardinalcss%2Fcardinalcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cardinalcss","download_url":"https://codeload.github.com/cardinalcss/cardinalcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249326185,"owners_count":21251735,"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","css-framework"],"created_at":"2024-08-01T22:01:06.138Z","updated_at":"2025-12-12T04:17:45.907Z","avatar_url":"https://github.com/cardinalcss.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Cardinal\n\n[![npm version](https://badge.fury.io/js/cardinalcss.svg)](https://badge.fury.io/js/cardinalcss)\n[![Bower version](https://badge.fury.io/bo/cardinal.svg)](https://badge.fury.io/bo/cardinal)\n\nBuild more with less.\n\n⚠️ THIS REPO IS NO LONGER BEING ACTIVELY MAINTAINED. USE AT YOUR OWN RISK! ⚠️\n\n- [Go to Website](http://cardinalcss.com)\n- [Review the CHANGELOG](https://github.com/cbracco/cardinal/blob/master/CHANGELOG.md)\n\n# Table of Contents\n\n- [What is Cardinal?](#what-is-cardinal)\n- [Features](#features)\n- [Dependencies](#dependencies)\n- [Getting Started](#getting-started)\n  - [Package Managers](#package-managers)\n    - [Updating Cardinal](#updating-cardinal)\n  - [LESS Plugin](#less-plugin)\n  - [Direct Download](#direct-download)\n- [Customizing](#customizing)\n  - [Including Partials](#including-partials)\n  - [Modifying Variables](#modifying-variables)\n- [Further Documentation](#further-documentation)\n- [Browser Support](#browser-support)\n- [Contributing](#contributing)\n- [Versioning](#versioning)\n- [Credits](#credits)\n- [License](#license)\n\n# What is Cardinal?\n\nCardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind.\n\nThe purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications. Cardinal omits many aesthetic design decisions that often bog down other CSS frameworks (which are often [UI toolkits, not frameworks](https://speakerdeck.com/csswizardry/what-is-a-css-framework-anyway)), leaving the design and creativity up to you.\n\n# Features\n\n- “Mobile-first” CSS written for the [LESS preprocessor](http://lesscss.org/)\n- [normalize.css](https://github.com/necolas/normalize.css)\n- Sensible global styles, variables, and useful mixins\n- A flexible grid system and encapsulated styles for common UI objects (buttons, forms, tables, etc.)\n- A collection of utility classes optimized for great gzip compression\n- The entire framework, minified and gzipped, clocks in at a mere **11.27kB**\n\n# Dependencies\n\nIf you would like to install Cardinal with the [Bower](http://bower.io/) package manager tool, you will first need to install [Node.js](http://nodejs.org/) on your machine or server. Once you have Node.js installed, make sure npm is installed ([info here](http://blog.npmjs.org/post/85484771375/how-to-install-npm)), and use it to install Bower, like so:\n\n```\nnpm install -g bower\n```\n\nAlso, Cardinal depends on the awesome tool [Autoprefixer](https://github.com/postcss/autoprefixer), which adds the proper vendor prefixes that provide the [specified browser support](#browser-support) for this project. This way, you don’t have to worry about manually including the correct prefixes while writing LESS/CSS. You are encouraged to incorporate Autoprefixer into your build process (this is easy to do with tools like [Grunt](http://gruntjs.com/) or [Gulp](http://gulpjs.com/)).\n\n# Getting Started\n\nThere are several ways that you can use Cardinal in your new and existing web projects.\n\n## Package Managers\n\nThe fastest way to get up-and-running with Cardinal is by using a package manager, like so:\n\n**Bower**\n\nTo install Cardinal with [Bower](http://bower.io/), run the following command(s) from your terminal:\n\n```\ncd your-project-directory\nbower install --save cardinal\n```\nOnce installed, you can find Cardinal here:\n\n```\nyour-project-directory\n│\n└───bower_components\n    │\n    └───cardinal\n```\n\n**npm**\n\nTo install Cardinal with [npm](https://www.npmjs.com), run the following command(s) from your terminal:\n\n```\ncd your-project-directory\nnpm install --save cardinalcss\n```\nOnce installed, you can find Cardinal here:\n\n```\nyour-project-directory\n│\n└───node_modules\n    │\n    └───cardinalcss\n```\n\n### Updating Cardinal\n\nYou can grab the latest version of Cardinal by running the following command(s):\n\n**Bower**\n\n```\nbower update cardinal\n```\n\n**npm**\n\n```\nnpm update cardinal\n```\n\n## LESS Plugin\n\nThere is also a [LESS.js plugin available](https://github.com/bassjobsen/less-plugin-cardinal) for Cardinal, created and maintained by [@bassjobsen](https://github.com/bassjobsen). You can use this plugin to include Cardinal in your project before your custom project code.\n\n**Installation**\n\n```\nnpm install less\nnpm install less-plugin-cardinal\n```\n\n**Usage**\n\n```\nlessc custom.less --cardinal\n```\n\n## Direct Download\n\nIf you do not want to use a package manager to integrate Cardinal into your project, you can also download it directly:\n\n**Build from Source**\n\nTo do so, you need to already have Node.js and npm installed on your machine. Cardinal uses Gulp to build and watch the CSS files.\n\n```\ngit clone git@github.com:cbracco/cardinal.git\ncd cardinal\nnpm install\ngulp\n```\n\n**Download the Zip**\n\nYou can also download the `.zip` file and proceed however you wish. Include the minified CSS file in the `\u003chead\u003e` of your project, or modify the LESS files directly (not recommended, since it will be difficult to update to future versions). It’s your world!\n\n- [Download the zip](https://github.com/cbracco/cardinal/archive/master.zip)\n\n# Customizing\n\n## Including Partials\n\nThe easiest way to include Cardinal in your project is to include the entire thing before your project files, like so:\n\n```\n//\n// Vendor\n//\n\n@import url(\"../../path/to/bower_components/cardinal/cardinal.less\");\n\n//\n// Project\n//\n\n@import url(\"project-file.less\");\n```\n\nHowever, you don’t have to use the entire Cardinal framework. The only required partials are located in the `base/` directory:\n\n```\n//\n// Vendor\n//\n\n//\n// Base\n//\n// These variables, mixins, and styles are required if you want to use this\n// framework, and they should be included in the following order.\n//\n\n// Base -\u003e Variables\n\n@import url(\"base/variables.less\");\n\n// Base -\u003e Mixins\n\n@import url(\"base/mixins/to-rem.less\");\n@import url(\"base/mixins/media-queries.less\");\n@import url(\"base/mixins/antialiasing.less\");\n@import url(\"base/mixins/clearing.less\");\n@import url(\"base/mixins/font-face.less\");\n@import url(\"base/mixins/momentum-scrolling.less\");\n@import url(\"base/mixins/text-truncate.less\");\n@import url(\"base/mixins/vertically-centered.less\");\n\n// Base -\u003e Normalize\n\n@import url(\"base/normalize.less\");\n\n// Base -\u003e Reset\n\n@import url(\"base/reset.less\");\n\n// Base -\u003e Debug (DO NOT USE THIS STYLESHEET IN PRODUCTION!)\n\n//@import url(\"base/debug.less\");\n\n// Base -\u003e Default Styles\n\n@import url(\"base/root.less\");\n@import url(\"base/anchors.less\");\n@import url(\"base/text-elements.less\");\n@import url(\"base/headings.less\");\n@import url(\"base/lists.less\");\n@import url(\"base/horizontal-rules.less\");\n@import url(\"base/blockquotes.less\");\n@import url(\"base/code.less\");\n@import url(\"base/embedded-content.less\");\n@import url(\"base/form-elements.less\");\n@import url(\"base/tables.less\");\n@import url(\"base/print.less\");\n```\n\nBeyond that, you can use whatever grid system, components, and utilities you would like. The `base/` directory just sets some good base styles for the framework.\n\n## Modifying Variables\n\nAfter getting started and including Cardinal, you will probably want to begin customizing it to suit your project. Cardinal has a bunch of LESS variables located in the `base/variables.less` file that can be tweaked to your needs. **These variables should not be edited directly.** The recommended way to make changes to Cardinal LESS variables is to create your own project-specific variables file (e.g. `project-variables.less`), and override the default variables in this file, like so:\n\n```\n// project-variables.less\n\n// Typography -\u003e Font Sizes -\u003e Base\n\n$font-size: 17;\n\n//\n// Typography -\u003e Line height\n//\n\n$line-height: 26;\n```\n\nThis file should be included in your main LESS file after you’ve included Cardinal.\n\n# Further Documentation\n\nThere is a `README.md` file included in each major directory of this project that further details the code located in those directories.\n\n- [Base](https://github.com/cbracco/cardinal/tree/master/base)\n- [Components](https://github.com/cbracco/cardinal/tree/master/components)\n- [Layout](https://github.com/cbracco/cardinal/tree/master/layout)\n- [Utilities](https://github.com/cbracco/cardinal/tree/master/utilities)\n\n# Browser support\n\nCardinal supports most modern browsers:\n\n* Google Chrome 25+\n* Mozilla Firefox 19+\n* Safari 6.0+\n* iOS Safari 6.0+\n* Opera 12.1+\n* Android 4.2+\n* Internet Explorer 9+\n\n# Contributing\n\nIs something broken? Do you have ideas or feature requests? Please [submit an issue](https://github.com/cbracco/cardinal/issues/new) here on GitHub. Or, if you are feeling especially motivated, write some code and submit a pull request!\n\n**IMPORTANT**: Before doing a bunch of work, please consult the [CONTRIBUTING.md document](https://github.com/cbracco/cardinal/blob/master/CONTRIBUTING.md), which gives detailed instructions on how to contribute to this project. If you do not follow the instructions, your code will probably not make it into this project.\n\n# Versioning\n\nCardinal will be maintained using the [Semantic Versioning](http://semver.org/) guidelines. From here on out, releases will be numbered using the following format:\n\n`major.minor.patch`\n\n* Breaking backwards compatibility increments `major`, while resetting `minor` and `patch`.\n* New code that does not break backwards compatibility increments `minor`, while resetting `patch`.\n* Bug fixes and other small changes increment `patch`.\n\n# Credits\n\nCardinal is a project by [@cbracco](http://twitter.com/cbracco). Its principles and techniques are very influenced by the following projects, organizations, and individuals:\n\n- [OOCSS](http://oocss.org/) ([@stubbornella](https://github.com/stubbornella/))\n- [inuit.css](https://github.com/inuitcss/) ([@csswizardry](https://github.com/csswizardry/))\n- [SUIT CSS](https://suitcss.github.io/) ([@necolas](https://github.com/necolas/))\n- [TACHYONS](http://tachyons.io/) ([@mrmrs](https://github.com/mrmrs/))\n- [Basscss](http://www.basscss.com/) ([@jxnblk](https://github.com/jxnblk/))\n- [Scally](https://github.com/chris-pearce/scally/) ([@chris-pearce](https://github.com/chris-pearce/))\n- [Atomic CSS](http://acss.io/) ([@yahoo](https://github.com/yahoo/))\n- [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/) ([@h5bp](https://github.com/h5bp/))\n- [Kraken](https://github.com/cferdinandi/kraken/) ([@cferdinandi](https://github.com/cferdinandi/))\n\n...and any others I may have forgotten \u0026mdash; let me know if I have, and I will certainly add them. \n\nMany thanks for your hard work and great ideas!\n\n# License\n\nCardinal is licensed under the MIT Open Source license. For more information, see the [LICENSE.md](https://github.com/cbracco/cardinal/blob/master/LICENSE.md) file in this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcardinalcss%2Fcardinalcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcardinalcss%2Fcardinalcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcardinalcss%2Fcardinalcss/lists"}