beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updates for release of v2

Browse source
This commit is contained in:
Angelos Chalaris 2016-12-20 13:44:28 +02:00
parent 55eb72e020
commit 99a2bbd796
7 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.npmignore
View file

@ -1,2 +1,3 @@
docs/v1
docs/v2
docs/v2
docs/page_thumb.png

26
README.md
View file

@ -1,32 +1,34 @@
# mini.css v1.1.0
## A minimal Sass-y responsive mobile-first style-agnostic CSS framework
# mini.css v2.0.0
## A minimal, responsive, style-agnostic CSS toolkit
![Demo page](/docs/demo.png)
You can learn all about using it, its modules and components, as well as see a live demo [here](https://chalarangelo.github.io/mini.css/).
**mini.css** is a tiny CSS toolkit (under 7KB gzipped) that works well on most modern browsers and devices and allows you to customize it quickly and easily. It's written in Sass and tries to make use of HTML5 semantics and modern patterns to deal with common web design problems. You can learn all about using it, its modules and components, as well as see a live demo [here](https://chalarangelo.github.io/mini.css/).
## Setup
**mini.css** is available in both Bower and NPM:
bower install mini.css
**mini.css** is available in both NPM and Bower:
npm install mini.css
bower install mini.css
To give **mini.css** a try using the default flavor, paste the following code inside your HTML page's `<head>` tag:
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/dist/flavors/mini-default.min.css">
To try out **mini.css** using the default flavor, copy and paste the following code inside your HTML page's `<head>` tag:
Replace `dist` with a release tag from the [Releases page](https://github.com/Chalarangelo/mini.css/releases).
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/version/dist/mini-default.min.css">
Alternatively, you can use one of the other [flavors](https://github.com/Chalarangelo/mini.css/tree/master/flavors). Simply replace the final part of the URL with the flavor's CSS file (minified or not) and you're good to go!
Replace `version` with a release tag (`v2.0.0` or later) from the [Releases page](https://github.com/Chalarangelo/mini.css/releases).
Alternatively, you can use one of the other [flavors](https://chalarangelo.github.io/mini.css/flavors.html). Simply replace the final part of the URL with the flavor's CSS file (minified or not) and you're good to go!
## Customization
If you want to develop your own flavor or tweak an existing one, head over to the [SCSS](https://github.com/Chalarangelo/mini.css/tree/master/scss) folder, grab all the files and duplicate the [mini-default.scss](https://github.com/Chalarangelo/mini.css/blob/master/flavors/mini-default.scss) file from the flavors folder to start building your own flavor.
If you want to develop your own flavor or tweak an existing one, head over to the [Customization page](https://chalarangelo.github.io/mini.css/customization.html) to get started.
If you want to know all about the framework, the mixins and the variables, check the [wiki](https://github.com/Chalarangelo/mini.css/wiki).
## Contributing
If you develop a flavor or module, please submit a pull request.
## License

3
bower.json
View file

@ -19,7 +19,8 @@
],
"ignore": [
"docs/v1",
"docs/v2"
"docs/v2",
"docs/page_thumb.png"
],
"homepage": "https://chalarangelo.github.io/mini.css/"
}

4
docs/index.html
View file

@ -13,8 +13,8 @@
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
<meta property="og:type" content="website"/>
<meta property="og:description" content="mini.css v2 (Fermion) helps you build quick, modern, responsive websites and web apps with minimal effort."/>
<meta property="og:image" content="favicon.png">
<meta property="og:description" content="mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png">
<style>

BIN
docs/page_thumb.PNG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

6
docs/quick_reference.html
View file

@ -537,7 +537,7 @@
<li><code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> color variants</li>
<li><code>.small</code> and <code>.large</code> size variants</li>
<li>Create responsive button groups by wrapping multiple button elements inside a <code>.button-group</code> wrapper</li>
<li>Button groups are responsive, but might display incorrectly in older browsers</li>
<li>Button groups are responsive, but might be displayed incorrectly in older browsers</li>
<li>Mix size and color variants, don't mix two variants of the same type</li>
<li>Avoid using different size variants inside a <code>.button-group</code></li>
</ul>
@ -899,7 +899,7 @@
<h3>Notes</h3>
<ul>
<li>Use the <code>.stacked</code> class to create stacked tabs</li>
<li>Use <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> to input elements to add accessibility</li>
<li>Use <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> to input elements in order to add accessibility</li>
<li>Use either checkboxes or radio buttons as the <code>&lt;input&gt;</code> elements of stacked tabs</li>
<li>Use single checkbox in a <code>.stacked</code> tabs container, but not a single radio button</li>
</ul>
@ -928,7 +928,7 @@
<ul>
<li>Use the <code>&lt;mark&gt;</code> element for highlighting text</li>
<li><code>.secondary</code> and <code>.tertiary</code> classes offer color variants</li>
<li>Highlighted text is inline by default, us the <code>.inline-block</code> class for longer text highlights</li>
<li>Highlighted text is inline by default, use the <code>.inline-block</code> class for longer text highlights</li>
<li>Use the <code>.tag</code> class for highlighted tags</li>
<li>Combine color variants with the <code>.inline-block</code> or <code>.tag</code> class, do not combine color variants or <code>.tag</code> and <code>.inline-block</code> with each other</li>
<li>Do not nest <code>&lt;mark&gt;</code> elements, unless the outer element is an <code>.inline-block</code></li>

1
docs/v2/DEVLOG.md
View file

@ -689,3 +689,4 @@
- Documented `contextual` in `quick reference`.
- Documented `progress` in `quick reference`.
- Documented `utility` in `quick reference`.
- Updated **README** and OpenGraph in `index`.