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

Toolkit file comparison, minor changes and updates to the files

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-11 16:02:38 +02:00
parent 3e634dc6c0
commit 64af6f2d5f
6 changed files with 89 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
dist/mini-default.css vendored
View file

@ -39,13 +39,12 @@ img {
h1, h2, h3, h4, h5, h6 {
line-height: 1.2em;
margin: 0;
margin: 0.7em 8px;
font-weight: 500; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
color: #424242;
display: block;
margin-top: -0.35em;
font-size: 45%; }
margin-top: -0.35em; }
h1 {
font-size: 2em; }
@ -66,7 +65,7 @@ h6 {
font-size: 0.75em; }
p {
margin: 1px 10px; }
margin: 1px 8px; }
b, strong {
font-weight: 700; }
@ -76,7 +75,7 @@ hr {
border: 0;
overflow: visible;
line-height: 1.2em;
margin: 0.5em 4px;
margin: 0.5em 8px;
height: 1px;
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); }
@ -771,7 +770,6 @@ table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #bdbdbd;
border-radius: 2px;
margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
@ -816,9 +814,8 @@ th:first-child, td:first-child {
tr {
display: block;
border: 1px solid #bdbdbd;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
margin-bottom: 10px; }
margin-bottom: 4px; }
td {
display: block;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -425,3 +425,7 @@
- Added some custom styling for the cards in `index`.
- Changed the `border-radius` of `card`s to `0`.
- Deployed new live demo page.
- Fixed a mixup bug with `header` and `heading`. All the `hX` elements now use `heading` instead of `header` to deal with that problem.
- Slightly tweaked the `margin`s and stuff of `p` and `hX` elements.
- Added file size comparison between toolkits.
- Updated `table` `border-radius`es.

59
docs/v2/index.html
View file

@ -4,7 +4,7 @@
<!-- Live demo styled as of 20161111 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/5dcfabb7f3bdb01834414c27d2cca637e481c3b8/dist/mini-default.min.css">
<!-- Local stylesheet -->
<!-- <link rel="stylesheet" href="../../dist/mini-default.min.css"> -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -101,6 +101,63 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2>Quick overview</h2>
<p>Take a couple of minutes to learn how <strong>mini.css</strong> differs from all those other UI toolkits (Bootstrap, Semantic UI etc).</p>
<hr>
<table>
<caption>Toolkit file size comparison</caption>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>Size (uncompressed)</th>
<th>Size (minified)</th>
<th>Size (gzipped)</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">Bootstrap</td>
<td data-label="Version"><a href="https://github.com/twbs/bootstrap/blob/0b9c4a4007c44201dce9a6cc1a38407005c26c86/dist/css/bootstrap.css">v3.3.7</a></td>
<td data-label="Size (uncompressed)">143 KB</td>
<td data-label="Size (minified)">117 KB</td>
<td data-label="Size (gzipped)">20 KB</td>
</tr>
<tr>
<td data-label="Name">Material Framework</td>
<td data-label="Version"><a href="https://github.com/nt1m/material-framework/blob/c5f7fed174686118dded31aecca311d4cc9d8b07/css/material.css">v3.0</a></td>
<td data-label="Size (uncompressed)">114 KB</td>
<td data-label="Size (minified)">90 KB</td>
<td data-label="Size (gzipped)">18 KB</td>
</tr>
<tr>
<td data-label="Name">mini.css</td>
<td data-label="Version"><a href="https://github.com/chalarangelo/mini.css/blob/v2.0/dist/css/mini-default.css">v2.0</a></td>
<td data-label="Size (uncompressed)">38 KB</td>
<td data-label="Size (minified)">31 KB</td>
<td data-label="Size (gzipped)">6 KB</td>
</tr>
<tr>
<td data-label="Name">Semantic UI</td>
<td data-label="Version"><a href="https://github.com/Semantic-Org/Semantic-UI/blob/0b1b59b0e1c780e842820df5c1904a162034812c/dist/semantic.css">v2.2.6</a></td>
<td data-label="Size (uncompressed)">730 KB</td>
<td data-label="Size (minified)">550 KB</td>
<td data-label="Size (gzipped)">95 KB</td>
</tr>
<tr>
<td data-label="Name">Zurb Foundation</td>
<td data-label="Version"><a href="https://github.com/zurb/foundation-sites/blob/ab172838d6de406204956015c9fd393c5a526e0e/dist/foundation.css">v3.0</a></td>
<td data-label="Size (uncompressed)">90 KB</td>
<td data-label="Size (minified)">64 KB</td>
<td data-label="Size (gzipped)">12 KB</td>
</tr>
</tbody>
</table><br>
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark>&nbsp;The above comparison takes into account only the CSS files of each framework. <strong>mini.css</strong>'s size is an approximation due to the nature of its flavor system. The calculated results were produced using <a href="http://refresh-sf.com/">Refresh-SF</a>.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>

22
src/flavors/mini-default.scss
View file

@ -23,18 +23,18 @@ $h3-font-size: 1.15em; // Font size for h3
$h4-font-size: 1em; // Font size for h4
$h5-font-size: 0.85em; // Font size for h5
$h6-font-size: 0.75em; // Font size for h6
$header-line-height: 1.2em; // Line height for all headers
$header-margin: 0.7em 8px; // Margin for all headers
$header-font-weight: 500; // Font weight for all headers
$header-smalltext-fore-color: #424242; // <small> color in headers
$make-header-smalltext-block: true; // Should <small> elements in headers
$heading-line-height: 1.2em; // Line height for all headings
$heading-margin: 0.7em 8px; // Margin for all headings
$heading-font-weight: 500; // Font weight for all headings
$heading-smalltext-fore-color: #424242; // <small> color in headings
$make-heading-smalltext-block: true; // Should <small> elements in headings
// be displayed as blocks (`true`/`false`) [2]
$header-smalltext-b-font-size: 45%; // Font size of block <small> elements in headers
$header-smalltext-b-top-margin: -0.35em; // Top margin of block <small> elements in headers
$paragraph-margin: 1px 10px; // Paragraph element margin
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
$heading-smalltext-b-top-margin:-0.35em; // Top margin of block <small> elements in headings
$paragraph-margin: 1px 8px; // Paragraph element margin
$bold-font-weight: 700; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.2em; // <hr> line height
$horizontal-rule-margin: 0.5em 4px; // <hr> margin
$horizontal-rule-margin: 0.5em 8px; // <hr> margin
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
// in the <hr> element's border-top)
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
@ -266,7 +266,7 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabl
// [2] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for responsive tables
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
$table-border-radius: 2px; // Border radius for <table> and children
$table-border-radius: 0; // Border radius for <table> and children
$table-margin: 0 auto; // Margin for <table>
$table-box-shadow: // Box shadow for <table>
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
@ -276,7 +276,7 @@ $table-row-padding: 6px; // Padding for <tr> - both views
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
$table-head-back-color: #eceff1; // Background color for <th>
$table-mobile-breakpoint: 768px; // Breakpoint for <table> mobile view
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
$table-mobile-card-spacing: 4px; // Space between <tr> cards - mobile view
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
// in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers

20
src/mini/_core.scss
View file

@ -70,19 +70,19 @@ $include-dfn-fix: true !default;
}
h1, h2, h3, h4, h5, h6 {
line-height: $header-line-height;
margin: $header-margin;
font-weight: $header-font-weight;
line-height: $heading-line-height;
margin: $heading-margin;
font-weight: $heading-font-weight;
small {
color: $header-smalltext-fore-color;
$make-header-smalltext-block: false !default;
@if $make-header-smalltext-block {
color: $heading-smalltext-fore-color;
$make-heading-smalltext-block: false !default;
@if $make-heading-smalltext-block {
display: block;
@if $header-smalltext-b-top-margin != 0 {
margin-top: $header-smalltext-b-top-margin;
@if $heading-smalltext-b-top-margin != 0 {
margin-top: $heading-smalltext-b-top-margin;
}
@if $header-smalltext-b-font-size != $small-font-size {
font-size: $header-smalltext-b-font-size;
@if $heading-smalltext-b-font-size != $small-font-size {
font-size: $heading-smalltext-b-font-size;
}
}
}