mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-03 20:37:23 +02:00
Code Issues Releases Wiki Activity

Core restructure to move imports to the flavor files, mixin usage changed inside flavor files, updated doc pages and live version files

Browse Source
This commit is contained in:
Angelos Chalaris
2016-12-22 11:43:20 +02:00
parent f469a1dfb7
commit a9d314fc66
23 changed files with 657 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -1,5 +1,10 @@
# Changelog # Changelog
## v2.0.1
- Updated module structure. `_core.scss` no longer contains all `@import` statements, but they are now included in the flavor files.
- Updated documentation for customization to reflect said changes.
## v2.0.0 ## v2.0.0
- New version, rebuilt from scratch. - New version, rebuilt from scratch.

25
README.md
View File

@@ -1,4 +1,4 @@
# mini.css v2.0.0 # mini.css v2.0.1
## A minimal, responsive, style-agnostic CSS toolkit ## A minimal, responsive, style-agnostic CSS toolkit
![Logo](/docs/page_thumb.PNG) ![Logo](/docs/page_thumb.PNG)
@@ -28,7 +28,28 @@ If you want to develop your own flavor or tweak an existing one, head over to th
## Contributing ## Contributing
If you develop a flavor or module, please submit a pull request. ### Flavors
To develop your own flavor:
- Fork into your own repository.
- Add a flavor file in the `src/flavors` folder by duplicating an existing file and renaming it to whatever you want to name it. **Make sure there are no naming conflicts between your flavor and any of the existing flavors**.
- Edit the flavor file as you desire.
- Submit a pull request. Please provide a brief description of your flavor and, if possible, a Codepen or some screenshots showcasing some of the styles in it.
To develop a module:
- Module contribution guidelines are very strict at the moment. New module will only be created upon request and **should always be in a new repository**, unless they are part of a Roadmap of a later version. Please submit an issue before developing a module or asking for new modules, as the discussion of said implementations is key to deciding the direction **mini.css** will follow in the future.
To develop some other part of **mini.css**:
- Create an issue for anything else.
- If you make any changes, submit a pull request with as much information as possible about what you changed.
## Contributors
- Angelos Chalaris (@chalarangelo)
- Rory Primrose (@roryprimrose)
## License ## License

348
dist/mini-default.css vendored
View File

@@ -2,7 +2,7 @@
/* /*
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.0.0 (Fermion) mini.css version: v2.0.1 (Fermion)
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.
@@ -817,6 +817,61 @@ input[type="file"] {
background: #212121; background: #212121;
content: ''; } content: ''; }
/*
Custom elements for forms and input elements.
*/
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: rgba(2, 119, 189, 0.9);
color: #fafafa; }
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
[type="reset"].primary:hover,
[type="reset"].primary:active,
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
background: #0277bd; }
button.secondary, [type="button"].secondary, [type="submit"].secondary,
[type="reset"].secondary, .button.secondary {
background: rgba(198, 40, 40, 0.85);
color: #fafafa; }
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
[type="reset"].secondary:hover,
[type="reset"].secondary:active,
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
background: #c62828; }
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
[type="reset"].tertiary, .button.tertiary {
background: rgba(85, 139, 47, 0.85);
color: #fafafa; }
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
[type="reset"].tertiary:hover,
[type="reset"].tertiary:active,
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
background: #558b2f; }
button.inverse, [type="button"].inverse, [type="submit"].inverse,
[type="reset"].inverse, .button.inverse {
background: #212121;
color: #fafafa; }
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
[type="reset"].inverse:hover,
[type="reset"].inverse:active,
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
background: rgba(33, 33, 33, 0.9); }
button.small, [type="button"].small, [type="submit"].small,
[type="reset"].small, .button.small {
border-radius: 1px;
padding: 4px 6px;
margin: 6px 8px; }
button.large, [type="button"].large, [type="submit"].large,
[type="reset"].large, .button.large {
border-radius: 4px;
padding: 12px 18px;
margin: 10px 8px; }
/* /*
Definitions for the responsive table component. Definitions for the responsive table component.
*/ */
@@ -1038,6 +1093,37 @@ table.striped tr:nth-of-type(2n) > td {
@media (min-width: 320px) { @media (min-width: 320px) {
.card { .card {
max-width: 320px; } } max-width: 320px; } }
/*
Custom elements for cards and containers.
*/
@media (min-width: 480px) {
.card.large {
max-width: 480px; } }
@media (min-width: 240px) {
.card.small {
max-width: 240px; } }
.card.fluid {
max-width: 100%;
width: auto; }
.card.inverse {
background: #212121;
color: #fafafa;
border: 1px solid #424242; }
.card.inverse > .section {
border-bottom: 1px solid #616161; }
.card.inverse > .section:last-child {
border-bottom: 0; }
.card > .section.dark {
background: #e0e0e0; }
.card > .section.darker {
background: #bdbdbd; }
.card > .section.double-padded {
padding: 10px 12px 10px; }
/* /*
Definitions for tabs/horizontal accordions. Definitions for tabs/horizontal accordions.
*/ */
@@ -1199,6 +1285,37 @@ mark {
-webkit-animation: alert-anim 6s linear infinite; -webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite; } animation: alert-anim 6s linear infinite; }
/*
Custom contextual background elements and alerts.
*/
mark.secondary {
background: #f44336; }
mark.tertiary {
background: #558b2f; }
mark.tag {
border-radius: 200px;
padding: 4px 8px; }
mark.inline-block {
font-size: 100%;
line-height: 1.35;
padding: 5px; }
.alert.urgent {
background: #ffca28; }
.alert.critical {
background: #b71c1c;
color: #fafafa; }
.alert.urgent {
border: 1px solid #ff8f00; }
.alert.critical {
border: 1px solid #d50000; }
/* /*
Definitions for progress elements and spinners. Definitions for progress elements and spinners.
*/ */
@@ -1256,6 +1373,62 @@ progress {
-webkit-animation: spinner-donut-anim 1.2s linear infinite; -webkit-animation: spinner-donut-anim 1.2s linear infinite;
animation: spinner-donut-anim 1.2s linear infinite; } animation: spinner-donut-anim 1.2s linear infinite; }
/*
Custom elements for progress elements and spinners.
*/
progress.inline {
display: inline-block;
vertical-align: middle;
width: 60%; }
progress.secondary {
color: #e53935; }
progress.secondary::-webkit-progress-value {
background: #e53935; }
progress.secondary::-moz-progress-bar {
background: #e53935; }
progress.tertiary {
color: #689f38; }
progress.tertiary::-webkit-progress-value {
background: #689f38; }
progress.tertiary::-moz-progress-bar {
background: #689f38; }
progress.nano {
height: 2px;
width: 100%;
margin: 0 auto;
border-radius: 0; }
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
progress.nano::-moz-progress-bar {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
progress.nano[value="1000"]::-webkit-progress-value {
border-radius: 0; }
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0; }
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
progress.nano {
width: -webkit-calc(100% - 2*0);
width: calc(100% - 2*0);
margin: 0 0; } }
.spinner-donut.secondary {
border: 4px solid #ffebee;
border-left: 4px solid #c62828; }
.spinner-donut.tertiary {
border: 4px solid #e8f5e9;
border-left: 4px solid #2e7d32; }
.spinner-donut.large {
border-width: 6px;
width: 32px;
height: 32px; }
/* /*
Definitions for utilities and helper classes. Definitions for utilities and helper classes.
*/ */
@@ -1359,179 +1532,6 @@ ul.breadcrumbs {
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; } margin-right: auto !important; }
/*
Custom elements for forms and input elements.
*/
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: rgba(2, 119, 189, 0.9);
color: #fafafa; }
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
[type="reset"].primary:hover,
[type="reset"].primary:active,
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
background: #0277bd; }
button.secondary, [type="button"].secondary, [type="submit"].secondary,
[type="reset"].secondary, .button.secondary {
background: rgba(198, 40, 40, 0.85);
color: #fafafa; }
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
[type="reset"].secondary:hover,
[type="reset"].secondary:active,
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
background: #c62828; }
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
[type="reset"].tertiary, .button.tertiary {
background: rgba(85, 139, 47, 0.85);
color: #fafafa; }
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
[type="reset"].tertiary:hover,
[type="reset"].tertiary:active,
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
background: #558b2f; }
button.inverse, [type="button"].inverse, [type="submit"].inverse,
[type="reset"].inverse, .button.inverse {
background: #212121;
color: #fafafa; }
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
[type="reset"].inverse:hover,
[type="reset"].inverse:active,
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
background: rgba(33, 33, 33, 0.9); }
button.small, [type="button"].small, [type="submit"].small,
[type="reset"].small, .button.small {
border-radius: 1px;
padding: 4px 6px;
margin: 6px 8px; }
button.large, [type="button"].large, [type="submit"].large,
[type="reset"].large, .button.large {
border-radius: 4px;
padding: 12px 18px;
margin: 10px 8px; }
/*
Custom elements for cards and containers.
*/
@media (min-width: 480px) {
.card.large {
max-width: 480px; } }
@media (min-width: 240px) {
.card.small {
max-width: 240px; } }
.card.fluid {
max-width: 100%;
width: auto; }
.card.inverse {
background: #212121;
color: #fafafa;
border: 1px solid #424242; }
.card.inverse > .section {
border-bottom: 1px solid #616161; }
.card.inverse > .section:last-child {
border-bottom: 0; }
.card > .section.dark {
background: #e0e0e0; }
.card > .section.darker {
background: #bdbdbd; }
.card > .section.double-padded {
padding: 10px 12px 10px; }
/*
Custom contextual background elements and alerts.
*/
mark.secondary {
background: #f44336; }
mark.tertiary {
background: #558b2f; }
mark.tag {
border-radius: 200px;
padding: 4px 8px; }
mark.inline-block {
font-size: 100%;
line-height: 1.35;
padding: 5px; }
.alert.urgent {
background: #ffca28; }
.alert.critical {
background: #b71c1c;
color: #fafafa; }
.alert.urgent {
border: 1px solid #ff8f00; }
.alert.critical {
border: 1px solid #d50000; }
/*
Custom elements for progress elements and spinners.
*/
progress.inline {
display: inline-block;
vertical-align: middle;
width: 60%; }
progress.secondary {
color: #e53935; }
progress.secondary::-webkit-progress-value {
background: #e53935; }
progress.secondary::-moz-progress-bar {
background: #e53935; }
progress.tertiary {
color: #689f38; }
progress.tertiary::-webkit-progress-value {
background: #689f38; }
progress.tertiary::-moz-progress-bar {
background: #689f38; }
progress.nano {
height: 2px;
width: 100%;
margin: 0 auto;
border-radius: 0; }
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
progress.nano::-moz-progress-bar {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
progress.nano[value="1000"]::-webkit-progress-value {
border-radius: 0; }
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0; }
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
progress.nano {
width: -webkit-calc(100% - 2*0);
width: calc(100% - 2*0);
margin: 0 0; } }
.spinner-donut.secondary {
border: 4px solid #ffebee;
border-left: 4px solid #c62828; }
.spinner-donut.tertiary {
border: 4px solid #e8f5e9;
border-left: 4px solid #2e7d32; }
.spinner-donut.large {
border-width: 6px;
width: 32px;
height: 32px; }
/* /*
Custom elements for utilities and helper classes. Custom elements for utilities and helper classes.
*/ */

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

File diff suppressed because one or more lines are too long

2
docs/card.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Card</title> <title>mini.css - Card</title>
<meta charset="utf-8"> <meta charset="utf-8">

2
docs/contextual.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Contextual</title> <title>mini.css - Contextual</title>
<meta charset="utf-8"> <meta charset="utf-8">

2
docs/core.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Core</title> <title>mini.css - Core</title>
<meta charset="utf-8"> <meta charset="utf-8">

6
docs/customization.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Customization</title> <title>mini.css - Customization</title>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -86,7 +86,7 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6">
<h3>Modules &amp; file structure</h3> <h3>Modules &amp; file structure</h3>
<p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement at the very bottom of <code>_core.scss</code> and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the core module.</p> <p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement after all the required variable declarations towards the bottom of your flavor file and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the flavor file.</p>
</div> </div>
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6">
<h3>Variables</h3> <h3>Variables</h3>
@@ -107,7 +107,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<br> <br>
<h2>Building a flavor</h2> <h2>Building a flavor</h2>
<p>Creating your own flavor can be as easy or as complicated as your needs. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br> <p>Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an <code>@import</code> statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h3>Core</h3> <h3>Core</h3>

6
docs/flavors.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Flavors</title> <title>mini.css - Flavors</title>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -78,12 +78,12 @@
<div class="col-sm"> <div class="col-sm">
<h1>Flavors</h1> <h1>Flavors</h1>
<p>One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using the following reference inside your HTML page's <code>&lt;head&gt;</code> tag:</p> <p>One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using the following reference inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br> <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br> <p>There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
<ul style="margin-left:0px; padding-left: 10px"> <ul style="margin-left:0px; padding-left: 10px">
<li class="card fluid"> <li class="card fluid">
<h2 class="section double-padded">Default <small>mini-default</small></h2> <h2 class="section double-padded">Default <small>mini-default</small></h2>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre> <pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css&quot;</span>&gt;</pre>
<p class="section double-padded">The default flavor for <strong>mini.css</strong> 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 <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p> <p class="section double-padded">The default flavor for <strong>mini.css</strong> 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 <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
</li> </li>

2
docs/grid.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Grid</title> <title>mini.css - Grid</title>
<meta charset="utf-8"> <meta charset="utf-8">

4
docs/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</title> <title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</title>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -109,7 +109,7 @@
<div class="col-sm"> <div class="col-sm">
<h2>Setup &amp; usage</h2> <h2>Setup &amp; usage</h2>
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code>&lt;head&gt;</code> tag:</p> <p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br> <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p> <p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6">

2
docs/input_control.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Input Control</title> <title>mini.css - Input Control</title>
<meta charset="utf-8"> <meta charset="utf-8">

2
docs/modules.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Modules</title> <title>mini.css - Modules</title>
<meta charset="utf-8"> <meta charset="utf-8">

2
docs/navigation.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Navigation</title> <title>mini.css - Navigation</title>
<meta charset="utf-8"> <meta charset="utf-8">

2
docs/progress.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Progress</title> <title>mini.css - Progress</title>
<meta charset="utf-8"> <meta charset="utf-8">

4
docs/quick_reference.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Quick Reference</title> <title>mini.css - Quick Reference</title>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -108,7 +108,7 @@
</div> </div>
<div class="section"> <div class="section">
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code>&lt;head&gt;</code> tag:</p> <p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br> <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p> <p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6">

2
docs/tab.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Tab</title> <title>mini.css - Tab</title>
<meta charset="utf-8"> <meta charset="utf-8">

2
docs/table.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Table</title> <title>mini.css - Table</title>
<meta charset="utf-8"> <meta charset="utf-8">

2
docs/utility.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Utility</title> <title>mini.css - Utility</title>
<meta charset="utf-8"> <meta charset="utf-8">

12
docs/v2/DEVLOG.md
View File

@@ -693,3 +693,15 @@
- Added OpenGraph info to all pages. - Added OpenGraph info to all pages.
- Doc page code cleanup. - Doc page code cleanup.
- Updated everything, releasing **v2.0.0**. - Updated everything, releasing **v2.0.0**.
# v2.0.1 Development Log
## 20161222
- Merged the pull request from @roryprimrose.
- Changed the `_typography.scss` file to `_core.scss`.
- Moved the `@import` statements to the flavor files.
- Updated `customization.html` to make sure the notes reflect the new structure of the toolkit.
- Demo pages updated to use the latest version of the toolkit (v2.0.1).
- Updated `CHANGELOG.md` to reflect new changes.
- Moved mixin `@include` statements inside the flavor files.

19
src/flavors/mini-default.scss
View File

@@ -4,7 +4,7 @@
/* /*
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.0.0 (Fermion) mini.css version: v2.0.1 (Fermion)
*/ */
// Basic rules for body and typography // Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color $fore-color: #212121; // Text and general foreground color
@@ -525,9 +525,12 @@ $responsive-padding-large-value:6px 8px; // Padding value for responsiv
$float-prefix: 'float'; // Prefix for float classes $float-prefix: 'float'; // Prefix for float classes
$clearfix-name: 'clearfix'; // Class name for clearfix $clearfix-name: 'clearfix'; // Class name for clearfix
$center-block-name: 'center-block'; // Class name for center block $center-block-name: 'center-block'; // Class name for center block
// Enable mini.css // Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
// that module and marked as such below it.
@import '../mini/core'; @import '../mini/core';
// Use mixins for forms and inputs @import '../mini/grid';
@import '../mini/navigation';
@import '../mini/input_control';
/* /*
Custom elements for forms and input elements. Custom elements for forms and input elements.
*/ */
@@ -543,7 +546,8 @@ $center-block-name: 'center-block'; // Class name for center block
$button-style1-border-radius, $button-style1-padding, $button-style1-margin); $button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style, @include make-button-alt-style ($button-style2-name, $button-style2-border-style,
$button-style2-border-radius, $button-style2-padding, $button-style2-margin); $button-style2-border-radius, $button-style2-padding, $button-style2-margin);
// Use mixins for cards @import '../mini/table';
@import '../mini/card';
/* /*
Custom elements for cards and containers. Custom elements for cards and containers.
*/ */
@@ -557,7 +561,8 @@ $center-block-name: 'center-block'; // Class name for center block
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color, @include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
$card-section-style2-fore-color); $card-section-style2-fore-color);
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding); @include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
// Use mixins for contextual background elements and alerts @import '../mini/tab';
@import '../mini/contextual';
/* /*
Custom contextual background elements and alerts. Custom contextual background elements and alerts.
*/ */
@@ -571,7 +576,7 @@ $center-block-name: 'center-block'; // Class name for center block
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color); @include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius); @include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius); @include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
// Use mixins for progress elements and spinners @import '../mini/progress';
/* /*
Custom elements for progress elements and spinners. Custom elements for progress elements and spinners.
*/ */
@@ -587,7 +592,7 @@ $center-block-name: 'center-block'; // Class name for center block
$spinner-donut-variant2-fore-color); $spinner-donut-variant2-fore-color);
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size, @include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
$spinner-donut-style1-border-thickness); $spinner-donut-style1-border-thickness);
// Use mixins for utilities and helper classes @import '../mini/utility';
/* /*
Custom elements for utilities and helper classes. Custom elements for utilities and helper classes.
*/ */

420
src/mini/_core.scss
View File

@@ -1,11 +1,409 @@
// External file loading. You can comment out modules you do not want to use. /*
@import 'typography'; Browsers resets and base typography.
@import 'grid'; */
@import 'navigation'; $apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true` or `false`).
@import 'input_control'; $base-root-font-size: 16px !default; // Root font sizing for all elements - In `px` only!
@import 'table'; html {
@import 'card'; font-size: $base-root-font-size; // Set root's font sizing.
@import 'tab'; }
@import 'contextual'; @if $apply-defaults-to-all {
@import 'progress'; html, * {
@import 'utility'; font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $body-margin;
color: $fore-color;
background: $back-color;
}
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
article, aside, section, figcaption, figure, main, details, menu {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers.
}
// Correct display for older versions of IE.
audio, video {
display: inline-block;
}
// Hide overflow in IE.
svg:not(:root) {
overflow: hidden;
}
// Show overflow in IE.
input {
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
// Fix display in older versions of Android.
$include-dfn-fix: true !default;
@if $include-dfn-fix {
dfn {
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: $heading-margin;
font-weight: $heading-font-weight;
small {
color: $heading-smalltext-fore-color;
$make-heading-smalltext-block: false !default;
@if $make-heading-smalltext-block {
display: block;
@if $heading-smalltext-b-top-margin != 0 {
margin-top: $heading-smalltext-b-top-margin;
}
@if $heading-smalltext-b-font-size != $small-font-size {
font-size: $heading-smalltext-b-font-size;
}
}
}
}
h1 {
font-size: $h1-font-size;
}
h2 {
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
}
p {
margin: $paragraph-margin;
}
ol, ul {
margin: $list-margin;
padding-left: $list-left-padding;
}
b, strong {
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
overflow: visible;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin;
$horizontal-rule-fancy-style: false !default;
@if $horizontal-rule-fancy-style {
height: 1px;
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
height: 0;
border-top: $horizontal-rule-border-style;
}
}
blockquote {
display: block;
position: relative;
font-style: italic;
@if $blockquote-back-color != $back-color {
background: $blockquote-back-color;
}
@if $blockquote-fore-color != $fore-color {
color: $blockquote-fore-color;
}
// Overwrite defaults
margin: $blockquote-margin;
padding: $blockquote-padding;
@if $blockquote-sidebar-style != 0 {
border-left: $blockquote-sidebar-style;
}
@if $blockquote-border-style != 0 {
border: $blockquote-border-style;
}
@if $blockquote-border-radius != 0 {
border-radius: $blockquote-border-radius;
}
@if $blockquote-box-shadow != none {
box-shadow: $blockquote-box-shadow;
}
&:after {
position: absolute;
font-style: normal;
font-size: $blockquote-cite-font-size;
@if $blockquote-cite-fore-color != $blockquote-fore-color {
color: $blockquote-cite-fore-color;
}
left: $blockquote-cite-left-position;
bottom: $blockquote-cite-bottom-position;
content: '\2014 \2009'attr(cite);
}
}
$use-default-code-fonts: true !default;
@if $use-default-code-fonts {
code, kbd, pre, samp{
font-family: monospace, monospace; // Applies display fix for all code elements
}
}
@else {
code, kbd, pre, samp{
font-family: $code-font-family; // Display fix should be applied manually!
}
}
code {
@if $code-element-border-style != 0{
border: $code-element-border-style;
}
@if $code-element-border-radius != 0 {
border-radius: $code-element-border-radius;
}
@if $code-element-back-color != $back-color {
background: $code-element-back-color;
}
@if $code-element-fore-color != $fore-color {
color: $code-element-fore-color;
}
@if $code-element-padding != 0 {
padding: $code-element-padding;
}
@if $code-element-box-shadow != none {
box-shadow: $code-element-box-shadow;
}
}
pre {
overflow: auto; // Responsiveness
@if $pre-element-border-style != 0 {
border: $pre-element-border-style;
}
@if $pre-element-border-radius != 0 {
border-radius: $pre-element-border-radius;
}
@if $pre-element-back-color != $back-color {
background: $pre-element-back-color;
}
@if $pre-element-fore-color != $fore-color {
color: $pre-element-fore-color;
}
@if $pre-element-padding != 0 {
padding: $pre-element-padding;
}
@if pre-element-margin != 0 {
margin: $pre-element-margin;
}
$add-pre-element-sidebar: false !default;
@if $add-pre-element-sidebar {
border-left: $pre-element-sidebar-style;
}
@if $pre-element-box-shadow != none {
box-shadow: $pre-element-box-shadow;
}
}
kbd {
@if $kbd-element-border-style != 0 {
border: $kbd-element-border-style;
}
@if $kbd-element-border-radius != 0 {
border-radius: $kbd-element-border-radius;
}
@if $kbd-element-back-color != $back-color {
background: $kbd-element-back-color;
}
@if $kbd-element-fore-color != $fore-color {
color: $kbd-element-fore-color;
}
@if $kbd-element-padding != 0 {
padding: $kbd-element-padding;
}
@if $kbd-element-box-shadow != none {
box-shadow: $kbd-element-box-shadow;
}
}
$style-samp-element: false !default;
@if $style-samp-element {
samp{
@if $samp-element-border-style != 0 {
border: $samp-element-border-style;
}
@if $samp-element-border-radius != 0 {
border-radius: $samp-element-border-radius;
}
@if $samp-element-back-color != $back-color {
background: $samp-element-back-color;
}
@if $samp-element-fore-color != $fore-color {
color: $samp-element-fore-color;
}
@if $samp-element-padding != 0 {
padding: $samp-element-padding;
}
}
}
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
small, sup, sub {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sub-font-size {
small, sub {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sup-font-size {
small, sup {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub {
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $sup-font-size == $sub-font-size {
small {
font-size: $small-font-size;
}
sup, sub {
font-size: $sup-font-size;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
}
@else {
small {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub{
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
$apply-link-underline: true !default;
$apply-link-hover-fade: true !default;
a{
color: $link-fore-color;
@if $apply-link-underline {
text-decoration: underline;
}
@else {
text-decoration: none;
}
@if $link-font-weight != 500 {
font-weight: $link-font-weight;
}
@if $apply-link-hover-fade {
opacity: 1;
-webkit-transition: all 0.3 ease 0s;
transition: all 0.3s ease 0s;
}
&:visited {
color: $link-visited-fore-color;
}
@if $apply-link-hover-fade {
&:hover, &:focus, &:active {
opacity: 0.75;
}
}
@else {
&:hover, &:focus, &:active {
color: $link-hover-fore-color;
}
}
}

409
src/mini/_typography.scss
View File

@@ -1,409 +0,0 @@
/*
Browsers resets and base typography.
*/
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true` or `false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - In `px` only!
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
@if $apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $body-margin;
color: $fore-color;
background: $back-color;
}
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
article, aside, section, figcaption, figure, main, details, menu {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers.
}
// Correct display for older versions of IE.
audio, video {
display: inline-block;
}
// Hide overflow in IE.
svg:not(:root) {
overflow: hidden;
}
// Show overflow in IE.
input {
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
// Fix display in older versions of Android.
$include-dfn-fix: true !default;
@if $include-dfn-fix {
dfn {
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: $heading-margin;
font-weight: $heading-font-weight;
small {
color: $heading-smalltext-fore-color;
$make-heading-smalltext-block: false !default;
@if $make-heading-smalltext-block {
display: block;
@if $heading-smalltext-b-top-margin != 0 {
margin-top: $heading-smalltext-b-top-margin;
}
@if $heading-smalltext-b-font-size != $small-font-size {
font-size: $heading-smalltext-b-font-size;
}
}
}
}
h1 {
font-size: $h1-font-size;
}
h2 {
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
}
p {
margin: $paragraph-margin;
}
ol, ul {
margin: $list-margin;
padding-left: $list-left-padding;
}
b, strong {
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
overflow: visible;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin;
$horizontal-rule-fancy-style: false !default;
@if $horizontal-rule-fancy-style {
height: 1px;
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
height: 0;
border-top: $horizontal-rule-border-style;
}
}
blockquote {
display: block;
position: relative;
font-style: italic;
@if $blockquote-back-color != $back-color {
background: $blockquote-back-color;
}
@if $blockquote-fore-color != $fore-color {
color: $blockquote-fore-color;
}
// Overwrite defaults
margin: $blockquote-margin;
padding: $blockquote-padding;
@if $blockquote-sidebar-style != 0 {
border-left: $blockquote-sidebar-style;
}
@if $blockquote-border-style != 0 {
border: $blockquote-border-style;
}
@if $blockquote-border-radius != 0 {
border-radius: $blockquote-border-radius;
}
@if $blockquote-box-shadow != none {
box-shadow: $blockquote-box-shadow;
}
&:after {
position: absolute;
font-style: normal;
font-size: $blockquote-cite-font-size;
@if $blockquote-cite-fore-color != $blockquote-fore-color {
color: $blockquote-cite-fore-color;
}
left: $blockquote-cite-left-position;
bottom: $blockquote-cite-bottom-position;
content: '\2014 \2009'attr(cite);
}
}
$use-default-code-fonts: true !default;
@if $use-default-code-fonts {
code, kbd, pre, samp{
font-family: monospace, monospace; // Applies display fix for all code elements
}
}
@else {
code, kbd, pre, samp{
font-family: $code-font-family; // Display fix should be applied manually!
}
}
code {
@if $code-element-border-style != 0{
border: $code-element-border-style;
}
@if $code-element-border-radius != 0 {
border-radius: $code-element-border-radius;
}
@if $code-element-back-color != $back-color {
background: $code-element-back-color;
}
@if $code-element-fore-color != $fore-color {
color: $code-element-fore-color;
}
@if $code-element-padding != 0 {
padding: $code-element-padding;
}
@if $code-element-box-shadow != none {
box-shadow: $code-element-box-shadow;
}
}
pre {
overflow: auto; // Responsiveness
@if $pre-element-border-style != 0 {
border: $pre-element-border-style;
}
@if $pre-element-border-radius != 0 {
border-radius: $pre-element-border-radius;
}
@if $pre-element-back-color != $back-color {
background: $pre-element-back-color;
}
@if $pre-element-fore-color != $fore-color {
color: $pre-element-fore-color;
}
@if $pre-element-padding != 0 {
padding: $pre-element-padding;
}
@if pre-element-margin != 0 {
margin: $pre-element-margin;
}
$add-pre-element-sidebar: false !default;
@if $add-pre-element-sidebar {
border-left: $pre-element-sidebar-style;
}
@if $pre-element-box-shadow != none {
box-shadow: $pre-element-box-shadow;
}
}
kbd {
@if $kbd-element-border-style != 0 {
border: $kbd-element-border-style;
}
@if $kbd-element-border-radius != 0 {
border-radius: $kbd-element-border-radius;
}
@if $kbd-element-back-color != $back-color {
background: $kbd-element-back-color;
}
@if $kbd-element-fore-color != $fore-color {
color: $kbd-element-fore-color;
}
@if $kbd-element-padding != 0 {
padding: $kbd-element-padding;
}
@if $kbd-element-box-shadow != none {
box-shadow: $kbd-element-box-shadow;
}
}
$style-samp-element: false !default;
@if $style-samp-element {
samp{
@if $samp-element-border-style != 0 {
border: $samp-element-border-style;
}
@if $samp-element-border-radius != 0 {
border-radius: $samp-element-border-radius;
}
@if $samp-element-back-color != $back-color {
background: $samp-element-back-color;
}
@if $samp-element-fore-color != $fore-color {
color: $samp-element-fore-color;
}
@if $samp-element-padding != 0 {
padding: $samp-element-padding;
}
}
}
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
small, sup, sub {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sub-font-size {
small, sub {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sup-font-size {
small, sup {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub {
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $sup-font-size == $sub-font-size {
small {
font-size: $small-font-size;
}
sup, sub {
font-size: $sup-font-size;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
}
@else {
small {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub{
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
$apply-link-underline: true !default;
$apply-link-hover-fade: true !default;
a{
color: $link-fore-color;
@if $apply-link-underline {
text-decoration: underline;
}
@else {
text-decoration: none;
}
@if $link-font-weight != 500 {
font-weight: $link-font-weight;
}
@if $apply-link-hover-fade {
opacity: 1;
-webkit-transition: all 0.3 ease 0s;
transition: all 0.3s ease 0s;
}
&:visited {
color: $link-visited-fore-color;
}
@if $apply-link-hover-fade {
&:hover, &:focus, &:active {
opacity: 0.75;
}
}
@else {
&:hover, &:focus, &:active {
color: $link-hover-fore-color;
}
}
}