One of the core ideas behind mini.css is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using mini.css, you usually try out the default flavor, using one of the following references inside your HTML page's <head> tag:
<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">-
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.2/dist/mini-default.min.css">
There are, however a handful of other flavors included with mini.css. Below, you can see a full list of them:
The default flavor for mini.css uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners with blurred shadows to give it a material-like design. All of the colors used in this flavor are based on Google's Material design color palette.
@@ -56,7 +56,7 @@Lite is a light flavor that uses a the default palette (light gray background and gray-black foreground color). It uses the default naming conventions (.primary, .secondary etc.). The grid system has 12 columns and most components use sharp corners without shadows. To make the flavor lighter, button groups, horizontal tables, certain card and progress styles, along with spinner donuts, tooltips, navigation bars and alerts are not included.
Sucroa is a full flavor that uses a yellow-pink-lilac background color palette with dark purple-black foreground colors. It uses the default naming conventions (.primary, .secondary etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. The card module's .dark and .darker classes have been replaced by the .light and .lighter classes respectively. Finally, .animated alerts and .horizontal tables are not available.
Author: Angeliki Daskalakis
-Latest version: v2.1.1
+Latest version: v2.1.2
Size: 7 KB (loads external fonts)
Nord is a full flavor that uses the Nord color palette (arctic, north-bluish color palette). It uses the default naming conventions (.primary, .secondary etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. All modules and components that are available in the default flavor are also available in Nord.
mini.css is published in NPM and bower, so you can easily download it, using your preferred package manager:
+mini.css is published in npm, yarn and bower, so you can easily download it, using your preferred package manager:
npm install mini.css
bower install mini.css
npm install mini.css
yarn add mini.css
bower install mini.css
After donwloading mini.css, pick a Flavor and use it for your project.
Alternatively, you can use either GitCDN or RawGit to import the default flavor of mini.css. Simply add one of the following references inside your HTML page's <head> tag:
<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">-
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.2/dist/mini-default.min.css">
Finally, you can find mini.css on cdnjs, which you can use to include it in your projects.
You can download mini.css using either NPM or Bower:
+You can download mini.css using npm, yarn or Bower:
npm install mini.css
bower install mini.css
npm install mini.css
yarn add mini.css
bower install mini.css
You can import the default flavor of mini.css in your webpage by simply adding one of the following references inside your HTML page's <head> tag:
<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">-
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.2/dist/mini-default.min.css">
You can also find mini.css on cdnjs, which you can use to include it in your projects.
We strongly suggest you add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 89f5c83..227d68b 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -1014,3 +1014,8 @@ - Bumped all flavor files to include updated `::placeholder` definitions. - Updated `.animated` `.alert`s to deal with the way `webkit` renders them (#35). - Bumped flavors again. +- Updated the way the version tag of the homepage displays (or not) on mobile devices. +- Fixed capitalization for `npm` in all pages, updated version tag everywhere (hopefully), getting ready for **v2.1.2**. +- Updated flavor files with latest version tag. +- Checked `yarn`'s packaging, all systems nominal, added to download options. +- Updated CHANGELOG and README. diff --git a/package.json b/package.json index ccbafd3..eec69f7 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "url": "git+https://github.com/Chalarangelo/mini.css.git" }, "devDependencies": { - "node-sass": "^4.5.2", + "node-sass": "^4.5.2" }, "keywords": [ "css", diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index 1a0fc24..e4197b9 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -5,7 +5,7 @@ Flavor name: Default (mini-default) Author: Angelos Chalaris (chalarangelo@gmail.com) Maintainers: Angelos Chalaris - mini.css version: v2.1.1 (Fermion) + mini.css version: v2.1.2 (Fermion) */ // Basic rules for body and typography $fore-color: #212121; // Text and general foreground color diff --git a/src/flavors/mini-lite.scss b/src/flavors/mini-lite.scss index 0514880..32ed06d 100644 --- a/src/flavors/mini-lite.scss +++ b/src/flavors/mini-lite.scss @@ -7,7 +7,7 @@ Flavor name: Lite (mini-lite) Author: Angelos Chalaris (chalarangelo@gmail.com) Maintainers: Angelos Chalaris - mini.css version: v2.1.1 (Fermion) + mini.css version: v2.1.2 (Fermion) */ // Basic rules for body and typography $fore-color: #212121; // Text and general foreground color diff --git a/src/flavors/mini-nord.scss b/src/flavors/mini-nord.scss index d81013e..192488c 100644 --- a/src/flavors/mini-nord.scss +++ b/src/flavors/mini-nord.scss @@ -5,7 +5,7 @@ Flavor name: Nord (mini-nord) Author: tphecca (https://github.com/tphecca) Maintainers: tphecca - mini.css version: v2.1.1 (Fermion) + mini.css version: v2.1.2 (Fermion) */ // This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord // Basic rules for body and typography diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss index 942ddc8..31f10c1 100644 --- a/src/flavors/mini-sucroa.scss +++ b/src/flavors/mini-sucroa.scss @@ -5,7 +5,7 @@ Flavor name: Sucroa (mini-sucroa) Author: Angeliki Daskalakis Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com) - mini.css version: v2.1.1 (Fermion) + mini.css version: v2.1.2 (Fermion) */ // Google Fonts imports and usage @import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');