mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-20 12:22:24 +02:00
Code Issues Releases Wiki Activity

Forms almost complete, documentation incomplete

Browse Source
This commit is contained in:
Angelos Chalaris 2016-08-23 19:02:32 +03:00
parent 8284e4c320
commit c8682bca67
7 changed files with 213 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -5,7 +5,7 @@ A minimal, responsive CSS framework to get you started.
- **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,186 bytes
- **button**: button styles `GZIPPED SIZE`: 427 bytes
- **form**: coming soon
- **form**: form styles `GZIPPED SIZE` 517 bytes
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
- **nav**: coming soon
- **table**: coming soon

80
css/mini-full.css
View File

@ -12,7 +12,7 @@ html {
body {
margin: 0;
color: #222;
background-color: #efefef; }
background-color: #f5f5f5; }
/*
Correct display in IE 9-.
@ -65,7 +65,7 @@ hr {
margin: 0.7em 0;
height: 0;
border: 0;
border-top: 1px solid #c9c9c9; }
border-top: 1px solid #cfcfcf; }
/*
Style for all small text and size for sub and sup.
@ -100,10 +100,10 @@ kbd, code, pre {
border-radius: 4px; }
code, pre {
background-color: #d5d5d5; }
background-color: gainsboro; }
kbd {
color: #f8f8f8;
color: #fefefe;
background-color: #222; }
pre {
@ -252,7 +252,7 @@ button, html [type="button"], [type="reset"], [type="submit"] {
Style for fieldset.
*/
fieldset {
border: 1px solid #c9c9c9;
border: 1px solid #cfcfcf;
border-radius: 4px;
margin: 0 2px;
padding: 0.35em 0.65em 0.75em; }
@ -627,3 +627,73 @@ textarea {
.lg-no {
display: none; } }
/*
Mixin for the forms.
Parameters:
- $frm-name : The class name of the form.
- $frm-border : The border of the form elements.
- $frm-border-radius : The border-radius of the form elements.
- $frm-margin : The margin of the form elements.
- $frm-padding : The padding of the form elements.
- $frm-focus-color : The color used to mark the focused form element.
- $frm-invalid-color : The color used to mark an invalid form element.
- $frm-disabled-cursor : The cursor style when hovering over disabled form elements.
- $frm-disabled-opacity : The opacity of the form elements when disabled.
- $frm-readonly-bg-color : The background color of the form elements when they are readonly.
- $frm-readonly-border-color : The border color of the form elements when they are readonly.
- $frm-select-height : The height for non-multiline select elements in the form.
- $frm-label-margin : The margin for the form's label elements.
- $frm-ctrl-group-name : The class name of the control groups in the form.
- $frm-ctl-group-margin : The margin for control groups inside the form.
- $frm-inline-name : The class name for forms with inline style.
- $frm-aligned-name : The class name for forms with aligned style.
- $frm-aligned-label-width : The width of labels in forms with aligned style. [1]
Notes:
// TODO: write notes - does [1] qualify? Should I write more notes? We'll see - probably note that elements like submit and button are not styled etc.
*/
.frm input[type="color"], .frm input[type^="date"], .frm input[type$="time"], .frm input[type="email"],
.frm input[type="month"], .frm input[type="week"], .frm input[type="text"], .frm input[type="password"],
.frm input[type="url"], .frm input[type="number"], .frm input[type="search"], .frm input[type="tel"],
.frm select, .frm textarea {
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: none; }
.frm input:not([type]) {
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: none; }
.frm input, .frm select, .frm textarea {
display: block;
margin: 0.2em;
padding: 0.3em; }
.frm input:focus, .frm select:focus, .frm textarea:focus {
border-color: #2678b3; }
.frm input[disabled], .frm select[disabled], .frm textarea[disabled] {
cursor: not-allowed;
opacity: 0.65; }
.frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus {
border-color: #e9322d; }
.frm input[readonly], .frm select[readonly], .frm textarea[readonly] {
background-color: gainsboro;
border-color: #b5b5b5; }
.frm input[type="checkbox"], .frm input[type="radio"] {
display: inline-block; }
.frm select {
height: 1.9em; }
.frm select[multiple] {
height: auto; }
.frm label {
margin: 0.5em 0 0 0.2em; }
.frm.inline input, .frm.inline select, .frm.inline textarea, .frm.inline label, .frm.aligned input, .frm.aligned select, .frm.aligned textarea, .frm.aligned label {
display: inline-block; }
.frm.inline .ctrl-group {
display: inline-block; }
.frm.aligned .ctrl-group label {
text-align: right;
vertical-align: middle;
width: 15em;
margin-top: 0; }
.frm .ctrl-group {
margin: 0 0 0.3em 0; }

2
css/mini-full.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
scss/mini-full.scss
View File

@ -11,3 +11,6 @@
@import '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 '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);

99
scss/mini/_form.scss Normal file
View File

@ -0,0 +1,99 @@
/*
Mixin for the forms.
Parameters:
- $frm-name : The class name of the form.
- $frm-border : The border of the form elements.
- $frm-border-radius : The border-radius of the form elements.
- $frm-margin : The margin of the form elements.
- $frm-padding : The padding of the form elements.
- $frm-focus-color : The color used to mark the focused form element.
- $frm-invalid-color : The color used to mark an invalid form element.
- $frm-disabled-cursor : The cursor style when hovering over disabled form elements.
- $frm-disabled-opacity : The opacity of the form elements when disabled.
- $frm-readonly-bg-color : The background color of the form elements when they are readonly.
- $frm-readonly-border-color : The border color of the form elements when they are readonly.
- $frm-select-height : The height for non-multiline select elements in the form.
- $frm-label-margin : The margin for the form's label elements.
- $frm-ctrl-group-name : The class name of the control groups in the form.
- $frm-ctl-group-margin : The margin for control groups inside the form.
- $frm-inline-name : The class name for forms with inline style.
- $frm-aligned-name : The class name for forms with aligned style.
- $frm-aligned-label-width : The width of labels in forms with aligned style. [1]
Notes:
// TODO: write notes - does [1] qualify? Should I write more notes? We'll see - probably note that elements like submit and button are not styled etc.
*/
@mixin make-frm( $frm-name, $frm-border, $frm-border-radius,
$frm-margin, $frm-padding, $frm-focus-color,
$frm-invalid-color, $frm-disabled-cursor, $frm-disabled-opacity,
$frm-readonly-bg-color, $frm-readonly-border-color,
$frm-select-height, $frm-label-margin, $frm-ctrl-group-name,
$frm-ctrl-group-margin, $frm-inline-name,
$frm-aligned-name, $frm-aligned-label-width){
.#{$frm-name}{
input[type="color"], input[type^="date"], input[type$="time"], input[type="email"],
input[type="month"], input[type="week"], input[type="text"], input[type="password"],
input[type="url"], input[type="number"], input[type="search"], input[type="tel"],
select, textarea{
box-sizing: border-box;
border: $frm-border;
border-radius: $frm-border-radius;
box-shadow: none;
}
input:not([type]){
box-sizing: border-box;
border: $frm-border;
border-radius: $frm-border-radius;
box-shadow: none;
}
input, select, textarea{
display: block;
margin: $frm-margin;
padding: $frm-padding;
&:focus{
border-color: $frm-focus-color;
}
&[disabled]{
cursor: $frm-disabled-cursor;
opacity: $frm-disabled-opacity;
}
&:invalid, &:focus:invalid, &:focus:invalid:focus{
border-color: $frm-invalid-color;
}
&[readonly]{
background-color: $frm-readonly-bg-color;
border-color: $frm-readonly-border-color;
}
}
input[type="checkbox"], input[type="radio"]{
display: inline-block;
}
select{
height: $frm-select-height;
&[multiple]{
height: auto;
}
}
label{
margin: $frm-label-margin;
}
&.#{$frm-inline-name}, &.#{$frm-aligned-name}{
input, select, textarea, label{
display: inline-block;
}
}
&.#{$frm-inline-name}{
.ctrl-group{
display: inline-block;
}
}
&.#{$frm-aligned-name} .#{$frm-ctrl-group-name} label{
text-align: right;
vertical-align: middle;
width: $frm-aligned-label-width;
margin-top: 0;
}
.#{$frm-ctrl-group-name}{
margin: $frm-ctrl-group-margin;
}
}
}

4
scss/mini/_variables.scss
View File

@ -3,7 +3,7 @@ $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: #efefef; // Body background color
$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
@ -32,7 +32,7 @@ $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: #2678b3; // Hyperlink visited hover 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

32
testpage.html
View File

@ -62,5 +62,37 @@ Suspendisse varius turpis et dui viverra semper.</pre>
<button type="button" class="green sm btn">Sample button</button>
<blockquote cite="https://www.google.com">Nam non diam ante. Curabitur non enim vitae eros luctus porta.</blockquote>
<div class="grid-container"><div class="row"><div class="col xs-4 sm-6" style="background: red;">1c</div><div class="col xs-8 sm-6" style="background: blue;">2c</div></div><div class="row"><div class="col xs-1 sm-no md-no lg-no" style="background: purple;"></div><div class="col xs-10 sm-12" style="background: yellow;">3c</div></div></div>
<br><br>
<form class="frm inline">
<fieldset>
<div class="ctrl-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="ctrl-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="ctrl-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="ctrl-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
</div><div>
<button type="submit" class="btn lg blue">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>