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

Rebranded as framework, updated files accordingly

Browse source
This commit is contained in:
Angelos Chalaris 2017-02-07 16:05:36 +02:00
parent 08d07f0a98
commit 504360d012
9 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
LICENSE
View file

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2016 Angelos Chalaris
Copyright (c) 2016-2017 Angelos Chalaris
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

4
bower.json
View file

@ -1,6 +1,6 @@
{
"name": "mini.css",
"description": "A minimal, responsive, style-agnostic CSS toolkit.",
"description": "A minimal, responsive, style-agnostic CSS framework.",
"main": "flavors/mini-default.min.css",
"authors": [
"Angelos Chalaris (Chalarangelo)"
@ -17,7 +17,7 @@
"style-agnostic",
"Sass"
],
"ignore": [
"ignore": [
"docs/v1",
"docs/v2",
"docs/page_thumb.png"

2
docs/grid.html
View file

@ -57,7 +57,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Easy page layout is one of the main advantages of using a CSS toolkit over writing your own styles. The <strong>grid</strong> module utilizes the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> to provide you with a modern and responsive layout grid system for all your needs. Rules in the <strong>grid</strong> module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.</p><br>
<p>Easy page layout is one of the main advantages of using a CSS framework over writing your own styles. The <strong>grid</strong> module utilizes the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> to provide you with a modern and responsive layout grid system for all your needs. Rules in the <strong>grid</strong> module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>

2
docs/input_control.html
View file

@ -411,7 +411,7 @@
</div>
</div>
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p>File upload buttons are commonly a sore spot in UI toolkits. We try to remedy this problem by hiding the <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code>, while maintaining accessiblity and using a linked <code>&lt;label&gt;</code> of the <code>.button</code> class to display it in a modern way.</p>
<p>File upload buttons are commonly a sore spot in CSS frameworks. We try to remedy this problem by hiding the <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code>, while maintaining accessiblity and using a linked <code>&lt;label&gt;</code> of the <code>.button</code> class to display it in a modern way.</p>
<h3>Sample code</h3>
<pre>&lt;input type=&quot;file&quot; id=&quot;file-input&quot;&gt;
&lt;label for=&quot;file-input&quot; class=&quot;button&quot;&gt;Upload file...&lt;/label&gt;</pre>

2
docs/quick_reference.html
View file

@ -37,7 +37,7 @@
<div class="row" style="padding-top: 40px;">
<div class="col-sm">
<h1>Quick Reference</h1>
<p>If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the toolkit and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules.html">modules</a> page.</p>
<p>If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules.html">modules</a> page.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br>
</div>
</div>

2
docs/table.html
View file

@ -61,7 +61,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Presenting information the right way is very important, especially so when dealing with large amounts of data. The <strong>table</strong> module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most UI toolkits nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.</p><br>
<p>Presenting information the right way is very important, especially so when dealing with large amounts of data. The <strong>table</strong> module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most CSS frameworks nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>

2
docs/utility.html
View file

@ -55,7 +55,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Every website or app has different needs and no UI toolkit can predict them all. The <strong>utility</strong> module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, floats, centering and clearfix classes, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.</p><br>
<p>Every website or app has different needs and no CSS framework can predict them all. The <strong>utility</strong> module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, floats, centering and clearfix classes, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>

3
docs/v2/DEVLOG.md
View file

@ -835,3 +835,6 @@
- Updated existing documentation for `grid` module.
- Setup the `media object` section of `grid.html`, just the basic demo for now.
- Documented `media object`. Resolves #22.
- Rebranded as a **CSS framework** instead of a **UI toolkit**.
- Updated `LICENSE`.
- Updated `package.json` and `bower.json`.

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "mini.css",
"version": "2.0.2",
"description": "A minimal, responsive, style-agnostic CSS toolkit.",
"description": "A minimal, responsive, style-agnostic CSS framework.",
"main": "flavors/mini-default.min.css",
"directories": {
"doc": "docs"