Quick demo page, default flavor built, cleanup needed
This commit is contained in:
Angelos Chalaris
parent
ffc21074a3
commit
1fc15a9ded
|
|
@ -381,10 +381,10 @@ textarea {
|
|||
margin: 2px 0;
|
||||
padding: 6px 12px;
|
||||
color: #2a2a2a;
|
||||
background: #c2c2c2;
|
||||
background: #eaeaea;
|
||||
cursor: pointer; }
|
||||
.btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus {
|
||||
background: #d5d5d5; }
|
||||
background: #fdfdfd; }
|
||||
.btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
|
|
@ -966,7 +966,8 @@ img.thumb {
|
|||
box-sizing: border-box;
|
||||
background-color: #ddd; }
|
||||
.nav .logo {
|
||||
font-size: 135%; }
|
||||
font-size: 135%;
|
||||
color: #272727; }
|
||||
.nav ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
|
|
@ -982,6 +983,7 @@ img.thumb {
|
|||
color: #272727;
|
||||
margin: 0; }
|
||||
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
||||
color: #272727;
|
||||
background: #cacaca; }
|
||||
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
||||
cursor: not-allowed;
|
||||
|
|
@ -1012,6 +1014,7 @@ img.thumb {
|
|||
margin: 10px;
|
||||
font-size: 1.75em;
|
||||
padding: 8px;
|
||||
color: #272727;
|
||||
background-color: #ddd;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
|
|
|
|||
2
css/mini-full.min.css
vendored
2
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
docs/favicon.png
Normal file
BIN
docs/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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">
|
||||
<meta name="description" content="mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="../flavors/mini-default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox" class="hidden" id="nav-toggle">
|
||||
<div class="nav fixed">
|
||||
<span class="logo"> <img src="favicon.png" style="height: 34px; width: auto; display: inline-block; vertical-align: middle;"> mini.css </span>
|
||||
<ul>
|
||||
<li><a href="#why-mini-css" class="link">Why mini.css?</a></li>
|
||||
<li><a href="#core-modules" class="link">Core modules</a></li>
|
||||
<li><a href="#customization" class="link">Customization</a></li>
|
||||
<li><a href="#extra-modules" class="link">Extra modules</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<label for="nav-toggle"></label>
|
||||
<br>
|
||||
<div class="grid-container">
|
||||
<div class="row">
|
||||
<div class="col xs-no md-1"></div>
|
||||
<div class="col xs-12 md-10">
|
||||
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<p>If you want to create your own flavor, get involved or report an issue, head over to <strong>mini.css</strong>'s <a href="https://github.com/Chalarangelo/mini.css">Github page</a>. If you want to give <strong>mini.css</strong> a try using the default flavor, paste the following code inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://github.com/Chalarangelo/mini.css/tree/master/flavors/mini-default.min.css"></pre>
|
||||
|
||||
<!-- <p>TODO: INSERT IMAGE SHOWCASING IT HERE!</p> -->
|
||||
<br>
|
||||
|
||||
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
||||
<p><strong>mini.css</strong> is a very light framework without any Javascript or excessive styling, that allows you to quickly build your own styles exactly the way you want them. Also, it works great on mobile devices. So, the three main reasons to give it a try are</p>
|
||||
<ul>
|
||||
<li>Size</li>
|
||||
<li>Responsiveness</li>
|
||||
<li>Customization</li>
|
||||
</ul>
|
||||
<h3>mini.css is tiny</h3>
|
||||
<p><strong>mini.css</strong> is really small, just below 3KB gzipped, making it ideal if you want to build a page that load really fast. Comparing this to <a href="http://getbootstrap.com">Twitter Bootstrap</a>, one of the most popular frameworks out there which is about 100KB gzipped, you can probably see why you might want to try out mini.css.</p>
|
||||
|
||||
<h3>mini.css is mobile-friendly</h3>
|
||||
<p>Mobile devices are becoming more and more important when designing for web and <strong>mini.css</strong> knows that. In fact, it is built with mobile devices as a priority, not an afterthought. What this means is that your websites will work well on mobile devices without a lot of tweaking.<sup>*</sup> If you are not convinced, open this page in your phone.</p>
|
||||
<small>(*): We do not want to claim that any website will ever instantly work 100% the way you want on mobile, but mini.css eliminates a lot of the tedious work of making your websites mobile-friendly, so you can focus on the interesting parts that actually need your attention.</small>
|
||||
|
||||
<h3>mini.css is style-agnostic</h3>
|
||||
<p><strong>mini.css</strong> does not force you to use some default colors that make all websites look similar. In fact it does not force you to use any styling that is preset by the author of the framework. It comes in <strong>flavors</strong>. That's right, everything is customizable to the point that you can make it look entirely different from almost any other website built with mini.css. How? Well, using the very powerful features that <a href="http://sass-lang.com/">Sass (SCSS)</a> provides and by having a well-documented <a href="https://github.com/Chalarangelo/mini.css/wiki">Wiki</a> to help you customize it as much as you like.</p>
|
||||
<br>
|
||||
|
||||
<h2 id="core-modules">Core modules</h2><hr>
|
||||
<p>Frameworks are all about modules. Some are important, others not so much. This is why <strong>mini.css</strong> allows you to pick which modules you want in your custom flavor. We have already separated them into core modules and extras, so that you can easily choose what you like. What we think is vital to the core experience:</p>
|
||||
|
||||
<h3>Base</h3>
|
||||
<p>By using a modified version of <a href="https://necolas.github.io/normalize.css/">normalize.css</a> combined with a long list of variables, a customized base is created that makes your pages work well in all browsers and devices. The base is usually about 1.2KB<sup>*</sup> making it so tiny you'll hardly even notice it in page loading. Also, the framework's base contains your customized typography rules and colors.</p>
|
||||
|
||||
<h3>Responsive grid</h3>
|
||||
<p><strong>mini.css</strong> comes with a reponsive grid that lets you build pages that look great on all devices without having to constantly tweak your page's layout. It can be customized to as many columns as you like, too, and it's only about 450 bytes.<sup>*</sup></p>
|
||||
|
||||
<h3>Navigation</h3>
|
||||
<p>Navigation is made simple with the navigation bar module, that lets you build customized navigation bars that work great in mobile devices. These navigation elements are probably one of the heavier modules at about 530 bytes.<sup>*</sup></p>
|
||||
|
||||
<h3>Tables</h3>
|
||||
<p>Instead of the old-school default tables that you usually see, you can style them the way you like them without overloading your page. The tables module is about 250 bytes<sup>*</sup> and allows you to utilise a variety of styles for your tables.</p>
|
||||
|
||||
<h3>Forms</h3>
|
||||
<p>Custom styling for forms is also available as a module and it allows you to make pretty forms the way you like them, without a lot of effort. Another reasonably heavy component in comparison to some other, with its size being about 520 bytes.<sup>*</sup></p>
|
||||
|
||||
<h3>Buttons</h3>
|
||||
<p>Button styles are tiny and they work great without excessive fluff. You can have as many as you like and they almost do not affect your page's performance, as their size is about 430 bytes.<sup>*</sup></p>
|
||||
|
||||
<h3>Utilities and helper classes</h3>
|
||||
<p>Lots of things that you might use quite often are not included in the framework's base module. This is where the utilities module comes in with a variety of classes for quick floats, centering content, making generic borders and simple icons or just hiding elements. This module is entirely customizable, allowing you to pick any pieces you like, but in total its size is about 450 bytes.<sup>*</sup></p>
|
||||
|
||||
<small>(*): Size metrics are based on gzipped size of each module for the default flavor. Your flavor might be larger or smaller, depending on how you use the variables provided. However, for most cases, the provided metrics are representative of your final size. Combining all modules might make your final gzipped CSS file smaller than the sum of the modules' sizes. </small>
|
||||
<br><br>
|
||||
|
||||
<h2 id="customization">Customization</h2><hr>
|
||||
<p><strong>mini.css</strong> does not force you to use a default style, instead it claims to be style-agnostic and wears this title like a badge, allowing you to create unique flavors that you can use any way you like. You can customize virtually anything using the provided Sass mixins and variables, so that you include exactly what you want in your stylesheet without any excessive styles. Or you can build a bunch of flavors and change them on the fly to see what fits better. It's up to you, the developer, to design a great website and we do not want to take that away from you. We just provide the tools and you can use them in any way you see fit. by the way, the <a href="https://github.com/Chalarangelo/mini.css/wiki">wiki</a> is a great place for you to start customizing your flavor!</p>
|
||||
<br>
|
||||
|
||||
<h2 id="extra-modules">Extra modules</h2><hr>
|
||||
<p>Coming soon! <small>In the meantime, why don't you check out the framework's <a href="https://github.com/Chalarangelo/mini.css">Github page</a>?</small></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1050
flavors/mini-default.css
Normal file
1050
flavors/mini-default.css
Normal file
File diff suppressed because it is too large
Load diff
1
flavors/mini-default.min.css
vendored
Normal file
1
flavors/mini-default.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
93
flavors/mini-default.scss
Normal file
93
flavors/mini-default.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
// Base
|
||||
$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family
|
||||
$base-font-size: 1em; // Font-size
|
||||
$base-line-height: 1.5; // Line-height
|
||||
$body-margin: 0; // Margin for body
|
||||
$body-bg-color: #f5f5f5; // Body background color
|
||||
$body-color: #222; // Body text color
|
||||
$header-line-height-multiplier: 0.8; // Multiplier for line height of headers
|
||||
$header-margin: 0.7em 0; // Margin for headers
|
||||
$header-font-weight: 500; // Font weight for headers
|
||||
$h1-multiplier: 2; // Header 1 font-sze multiplier
|
||||
$h2-multiplier: 1.5; // Header 2 font-sze multiplier
|
||||
$h3-multiplier: 1.15; // Header 3 font-sze multiplier
|
||||
$h4-multiplier: 1; // Header 4 font-sze multiplier
|
||||
$h5-multiplier: 0.8; // Header 5 font-sze multiplier
|
||||
$h6-multiplier: 0.7; // Header 6 font-sze multiplier
|
||||
$header-small-color: lighten($body-color, 20%); // Header small text color
|
||||
$header-small-font-weight: 200; // Header small font weight
|
||||
$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule
|
||||
$hr-margin: 0.7em 0; // Margin for horizontal rule
|
||||
$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule
|
||||
$small-font-size: 75%; // Font size for small, sub and sup elements
|
||||
$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements
|
||||
$list-margin-top: 0; // Top margin for lists
|
||||
$list-margin-bottom: 0.6em; // Bottom margin for lists
|
||||
$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements
|
||||
$code-padding: 2px 4px; // Padding for code and pre elements
|
||||
$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color
|
||||
$code-border-radius: 4px; // Border radius for code, pre and kbd elements
|
||||
$kbd-bg-color: $body-color; // Kbd background color
|
||||
$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color
|
||||
$a-color: #2678b3; // Hyperlink text color
|
||||
$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color
|
||||
$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color
|
||||
$a-visited-hover-color: $a-color; // Hyperlink visited hover text color
|
||||
$mark-bg-color: #ffff33; // Mark background color
|
||||
$mark-color: $body-color; // Mark text color
|
||||
$sub-bottom: -0.25em; // Sub bottom
|
||||
$sup-top: -0.5em; // Sup top
|
||||
$button-fonts: $base-fonts; // Font-family for buttons and inputs
|
||||
$button-font-size: 100%; // Font size for buttons and inputs
|
||||
$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs
|
||||
$button-margin: 0; // Margin for buttons and inputs
|
||||
$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset
|
||||
$fieldset-border-radius: 4px; // Border radius for fieldset
|
||||
$fieldset-margin: 0 2px; // Margin for fieldset
|
||||
$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
||||
// Button default colors
|
||||
$btn-default-color: #2a2a2a; // Default text color for buttons
|
||||
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
||||
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
||||
$btn-b-bg-color: #337ab7; // Color for button style 1
|
||||
$btn-g-bg-color: #5cb85c; // Color for button style 2
|
||||
$btn-r-bg-color: #d9534f; // Color for button style 3
|
||||
@import '../scss/mini/base';
|
||||
@import '../scss/mini/button';
|
||||
// Use button mixins to create buttons with default specs.
|
||||
@include make-btn(btn, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65);
|
||||
@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color, darken, 7.5%);
|
||||
@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color, darken, 7.5%);
|
||||
@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color, darken, 7.5%);
|
||||
@include make-btn-size(btn, lg, 9px 15px, 135%);
|
||||
@include make-btn-size(btn, sm, 4px 8px, 80%);
|
||||
@import '../scss/mini/grid';
|
||||
// Use grid mixin to create grid with default specs.
|
||||
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);
|
||||
@import '../scss/mini/form';
|
||||
// Use form mixin to create form with default specs.
|
||||
@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em);
|
||||
@import '../scss/mini/table';
|
||||
// Use table mixin to create table with default specs.
|
||||
@include make-tbl(tbl, 1px solid #777, 0, 0.5em, #4e4e4e, #f5f5f5, #ddd, #f4f4f4, #111, hor, bor);
|
||||
@import '../scss/mini/utility';
|
||||
// Use utility mixins to create utility classes with default specs.
|
||||
@include make-thumb(thumb, 0.25em, 1px solid #ccc, 4px);
|
||||
@include make-border-generic(bordered);
|
||||
@include make-border-radial-style(rounded, 4px);
|
||||
@include make-border-radial-style(circle, 50%);
|
||||
@include make-colored-text(txt-blue, $btn-b-bg-color);
|
||||
@include make-colored-text(txt-green, $btn-g-bg-color);
|
||||
@include make-colored-text(txt-red, $btn-r-bg-color);
|
||||
@include make-colored-bg-text(bg-blue, $btn-b-bg-color);
|
||||
@include make-colored-bg-text(bg-green, $btn-g-bg-color);
|
||||
@include make-colored-bg-text(bg-red, $btn-r-bg-color);
|
||||
@include make-caret-down(caret, 0.35em, #222);
|
||||
@include make-close(close, #aaa, pointer, 1.3em, 700, #777);
|
||||
@include make-drags(drg-left, drg-right);
|
||||
@include make-center-block(ct-block);
|
||||
@include make-clearfix(cf);
|
||||
@include make-hidden(hidden);
|
||||
@import '../scss/mini/nav';
|
||||
// Use nav mixin to create nav with default specs.
|
||||
@include make-nav(nav, vertical, fixed, logo, 135%, link, 10px, #fff, #222, lighten, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);
|
||||
|
|
@ -54,6 +54,7 @@
|
|||
background-color: #{$nav-bg-color};
|
||||
.#{$nav-logo-name}{
|
||||
font-size: $nav-logo-size;
|
||||
color: #{$nav-color};
|
||||
}
|
||||
ul{
|
||||
display: inline-block;
|
||||
|
|
@ -70,8 +71,9 @@
|
|||
color: #{$nav-color};
|
||||
margin: 0;
|
||||
}
|
||||
& .#{$nav-link-name}{
|
||||
.#{$nav-link-name}{
|
||||
&:hover, &:active, &:focus{
|
||||
color: #{$nav-color};
|
||||
@if $nav-hover-style == 'lighten'{
|
||||
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
|
|
@ -126,6 +128,7 @@
|
|||
margin: $nav-fixed-collapse-label-margin;
|
||||
font-size: $nav-fixed-collapse-label-font-size;
|
||||
padding: #{$nav-padding};
|
||||
color: #{$nav-color};
|
||||
background-color: $nav-bg-color;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ $fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
|||
// Button default colors
|
||||
$btn-default-color: #2a2a2a; // Default text color for buttons
|
||||
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
||||
$btn-default-bg-color: #c2c2c2; // Default background color for buttons
|
||||
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
||||
$btn-b-bg-color: #3f84b3; // Color for button style 1
|
||||
$btn-g-bg-color: #2db747; // Color for button style 2
|
||||
$btn-r-bg-color: #ea4848; // Color for button style 3
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="generator" content="http://chalarangelo.github.io/htmltemplategenerator/">
|
||||
<link rel="stylesheet" href="css/mini-full.css">
|
||||
<link rel="stylesheet" href="themes/mini-default.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Heading 1 <small>smaller</small></h1><br>
|
||||
|
|
|
|||
Loading…
Reference in a new issue