Chalarangelo / mini.css

A minimal, responsive, style-agnostic CSS framework!
https://chalarangelo.github.io/mini.css
MIT License
2.96k stars 210 forks source link
css css-framework framework front-end frontend mini responsive sass sass-framework web-development

mini.css

A minimal, responsive, style-agnostic CSS framework

npm license website

Logo

mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox.

Setup & usage

You have 4 options when it comes to setting up mini.css:

  1. Use a package manager (recommended)
  2. Use GitCDN
  3. Use Rawgit
  4. Use cdnjs (preferred for older releases)

For instructions on how to use, best practices, templates and other usage information, please visit the framework's documentation.

Method 1: Use a package manager (recommended)

  1. Install mini.css using npm, yarn or bower.

    npm install mini.css
    yarn add mini.css
    bower install mini.css
  2. Pick one of the available flavors and use its CSS file.

  3. Start working on your project. Detailed documentation is available on the framework's website, so be sure to check it out.

Method 2: Use GitCDN

mini.css is also hosted on GitCDN, an open-source service, so you can easily grab the latest release's distributables. Simply link to your preferred flavor inside your HTML page's <head> tag:

<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/{mini-flavor}.css" />

Remember to replace {mini-flavor} with the flavor's name (e.g. mini-default or mini-default.min for the default flavor).

Method 3: Use RawGit

mini.css is also hosted on RawGit, another open-source service, so you can easily grab a specific release's distributables. Simply link to a release and your preferred flavor inside your HTML page's <head> tag:

<link rel="stylesheet" href="https://github.com/Chalarangelo/mini.css/blob/master/cdn.rawgit.com/Chalarangelo/mini.css/{release-tag}/dist/{mini-flavor}.css" />

Remember to replace {release-tag} with a release from the Releases page and {mini-flavor} with the flavor's name (e.g. mini-default or mini-default.min for the default flavor).

Method 4: Use cdnjs (preferred for older releases)

If you would rather use an older version of the framework, you should head over to cdnjs for a list of releases and flavor files supplied with them.

Flavors & customizaton

Flavors are one of the key features of mini.css, allowing you to customize your website's design and make your project stand out. We provide you with a few pre-defined flavors that might suit your needs and will help you figure out how to use the framework and create websites and apps with it.

But you can easily build you own flavors by using our flavor generator tool, which allows you to customize almost everything. Take your time and create the perfect flavo to suit your needs.


Contributing

Maintainers & contributors

The team behind mini.css is as follows:

Special thanks to these fine folks for helping in the development of mini.css:

License

mini.css is an open-source framework and is licensed under the MIT License.