diff --git a/README.md b/README.md index 27a1f2d..e3fb07b 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,4 @@ A minimal, responsive CSS framework to get you started. - **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes - **nav**: coming soon - **table**: table styles `GZIPPED SIZE`: 243 bytes -- **helper and utility classes**: coming soon +- **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes diff --git a/css/mini-full.css b/css/mini-full.css index ea38d19..b003890 100644 --- a/css/mini-full.css +++ b/css/mini-full.css @@ -746,3 +746,174 @@ textarea { border-bottom: 1px solid #bdbdbd; } .tbl.bor td, .tbl.bor th { border-bottom: 1px solid #bdbdbd; } + +/* + Image thumbnail style mixin. [1] + Parameters: + - $thumb-name : The class name for the thumbnail style. + - $thumb-padding : The padding between the image and the border. + - $thumb-border : The style of the thumbnail's border. + - $thumb-border-radius : The border radius of the thumbnail. + Notes: + - [1] : This style only applies to `img` elements with the class specified in + `$thumb-name`. +*/ +/* + Mixin for generic border style. + Parameters: + - $border-generic-name : The class name for the generic border. + Notes: + - [1] : The border style uses rgba to create a 1px solid border with 0.25 + opacity around an element, which makes it look properly bordered. + Might be incompatible with older browsers. + - [2] : The border style overwrites any border style as it uses + `!important`, exercise caution when using. +*/ +/* + Mixin for generic border radius styles. + Parameters: + - $border-style-name : The class name for the generic border radius style. + - $border-style-radius : The radius for the generic border radius style. + Notes: + - [1] : The border style overwrites any border style as it uses + `!important`, exercise caution when using. +*/ +/* + Mixin for generic contextual color text styles. + Parameters: + - $colored-text-name : The class name for the contextual color text style. + - $colored-text-color : The color for the contextual color text style. + Notes: + - [1] : The contextual color text style overwrites any text color as it uses + `!important`, exercise caution when using. +*/ +/* + Mixin for generic contextual background text styles. + Parameters: + - $colored-bg-text-name : The class name for the contextual background text style. + - $colored-bg-text-color : The background color for the contextual background text style. + Notes: + - [1] : The contextual background text style overwrites any text color as it + uses `!important`, exercise caution when using. +*/ +/* + Mixin for simple caret utility class. + Parameters: + - $caret-name : The class name for caret utility class. + - $caret-size : The size of the caret utility element. [1] + - $caret-color : The color of the caret utility element. + Notes: + - [1] : The caret is built using the border trick. Sizes can be specified + in either `px` or `em`, but they might take a bit of tweaking to + get right. +*/ +/* + Mixin for simple close sign utility class. + Parameters: + - $close-name : The class name for close utility class. + - $close-color : The color of the close utility element. + - $close-cursor : The cursor for the close utility element. + - $close-font-size : The font-size for the close utility element. + - $close-font-weight : The font-weight for the close utility element. + - $close-hover-color : The color of the close utility element when hovering over it. +*/ +/* + Mixin for quick float classes. [1] + Parameters: + - $drag-left-name : The class name for left drags. + - $drag-right-name : The class name for right drags. + Notes: + - [1] : These classes use `!important` to set the float properties, + exercise caution when using. +*/ +/* + Mixin for center block class. + Parameters: + - $center-block-name : The class name for center block class. +*/ +/* + Mixin for clearfix class. + Parameters: + - $clearfix-name : The class name for the clearfix class. +*/ +/* + Mixin for hidden class. [1] + Parameters: + - $hidden-name : The class name for hidden elements. + Notes: + - [1] : This class uses `!important` to set the display property, + exercise caution when using. +*/ +img.thumb { + padding: 0.25em; + border: 1px solid #ccc; + border-radius: 4px; } + +.bordered { + border: 1px solid rgba(0, 0, 0, 0.25) !important; } + +.rounded { + border-radius: 4px !important; } + +.circle { + border-radius: 50% !important; } + +.txt-blue { + color: #3f84b3 !important; } + +.txt-green { + color: #2db747 !important; } + +.txt-red { + color: #ea4848 !important; } + +.bg-blue { + background-color: #3f84b3 !important; } + +.bg-green { + background-color: #2db747 !important; } + +.bg-red { + background-color: #ea4848 !important; } + +.caret { + display: inline-block; + vertical-align: middle; + line-height: 1; + width: 0; + height: 0; + border-left: 0.35em solid transparent; + border-right: 0.35em solid transparent; + border-top: 0.35em solid #222; } + +.close { + display: inline-block; + vertical-align: middle; + line-height: 1; + color: #aaa; + font-size: 1.3em; + font-weight: 700; + cursor: pointer; } + .close:before { + content: '\00d7'; } + .close:hover { + color: #777; } + +.drg-left { + float: left !important; } + +.drg-right { + float: right !important; } + +.ct-block { + display: block; + margin-left: auto; + margin-right: auto; } + +.cf:before, .cf:after { + content: ""; + display: table; + clear: both; } + +.hidden { + display: none !important; } diff --git a/css/mini-full.min.css b/css/mini-full.min.css index 61991a6..23714af 100644 --- a/css/mini-full.min.css +++ b/css/mini-full.min.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #cfcfcf;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#c2c2c2;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#d5d5d5}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.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:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;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:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{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 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd} \ No newline at end of file +html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #cfcfcf;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#c2c2c2;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#d5d5d5}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.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:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;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:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{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 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#3f84b3!important}.txt-green{color:#2db747!important}.txt-red{color:#ea4848!important}.bg-blue{background-color:#3f84b3!important}.bg-green{background-color:#2db747!important}.bg-red{background-color:#ea4848!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important} \ No newline at end of file diff --git a/scss/mini-full.scss b/scss/mini-full.scss index b7477cc..fecc796 100644 --- a/scss/mini-full.scss +++ b/scss/mini-full.scss @@ -16,4 +16,22 @@ @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 'mini/table'; // Use table mixin to create table with default specs. -@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor); \ No newline at end of file +@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor); +@import '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); \ No newline at end of file diff --git a/scss/mini/_utility.scss b/scss/mini/_utility.scss new file mode 100644 index 0000000..678e9e5 --- /dev/null +++ b/scss/mini/_utility.scss @@ -0,0 +1,182 @@ +/* + Image thumbnail style mixin. [1] + Parameters: + - $thumb-name : The class name for the thumbnail style. + - $thumb-padding : The padding between the image and the border. + - $thumb-border : The style of the thumbnail's border. + - $thumb-border-radius : The border radius of the thumbnail. + Notes: + - [1] : This style only applies to `img` elements with the class specified in + `$thumb-name`. +*/ +@mixin make-thumb($thumb-name, $thumb-padding, $thumb-border, $thumb-border-radius){ + img.#{$thumb-name}{ + padding: $thumb-padding; + border: $thumb-border; + border-radius: $thumb-border-radius; + } +} +/* + Mixin for generic border style. + Parameters: + - $border-generic-name : The class name for the generic border. + Notes: + - [1] : The border style uses rgba to create a 1px solid border with 0.25 + opacity around an element, which makes it look properly bordered. + Might be incompatible with older browsers. + - [2] : The border style overwrites any border style as it uses + `!important`, exercise caution when using. +*/ +@mixin make-border-generic($border-generic-name){ + .#{$border-generic-name}{ + border: 1px solid rgba(0,0,0, 0.25) !important; + } +} +/* + Mixin for generic border radius styles. + Parameters: + - $border-style-name : The class name for the generic border radius style. + - $border-style-radius : The radius for the generic border radius style. + Notes: + - [1] : The border style overwrites any border style as it uses + `!important`, exercise caution when using. +*/ +@mixin make-border-radial-style($border-style-name, $border-style-radius){ + .#{$border-style-name}{ + border-radius: $border-style-radius !important; + } +} +/* + Mixin for generic contextual color text styles. + Parameters: + - $colored-text-name : The class name for the contextual color text style. + - $colored-text-color : The color for the contextual color text style. + Notes: + - [1] : The contextual color text style overwrites any text color as it uses + `!important`, exercise caution when using. +*/ +@mixin make-colored-text($colored-text-name, $colored-text-color){ + .#{$colored-text-name}{ + color: $colored-text-color !important; + } +} +/* + Mixin for generic contextual background text styles. + Parameters: + - $colored-bg-text-name : The class name for the contextual background text style. + - $colored-bg-text-color : The background color for the contextual background text style. + Notes: + - [1] : The contextual background text style overwrites any text color as it + uses `!important`, exercise caution when using. +*/ +@mixin make-colored-bg-text($colored-bg-text-name, $colored-bg-text-color){ + .#{$colored-bg-text-name}{ + background-color: $colored-bg-text-color !important; + } +} +/* + Mixin for simple caret utility class. + Parameters: + - $caret-name : The class name for caret utility class. + - $caret-size : The size of the caret utility element. [1] + - $caret-color : The color of the caret utility element. + Notes: + - [1] : The caret is built using the border trick. Sizes can be specified + in either `px` or `em`, but they might take a bit of tweaking to + get right. +*/ +@mixin make-caret-down($caret-name, $caret-size, $caret-color){ + .#{$caret-name} { + display: inline-block; + vertical-align: middle; + line-height: 1; + width: 0; + height: 0; + border-left: $caret-size solid transparent; + border-right: $caret-size solid transparent; + border-top: $caret-size solid $caret-color; + } +} +/* + Mixin for simple close sign utility class. + Parameters: + - $close-name : The class name for close utility class. + - $close-color : The color of the close utility element. + - $close-cursor : The cursor for the close utility element. + - $close-font-size : The font-size for the close utility element. + - $close-font-weight : The font-weight for the close utility element. + - $close-hover-color : The color of the close utility element when hovering over it. +*/ +@mixin make-close($close-name, $close-color, $close-cursor, $close-font-size, $close-font-weight, $close-hover-color){ + .#{$close-name}{ + display: inline-block; + vertical-align: middle; + line-height: 1; + color: $close-color; + font-size: $close-font-size; + font-weight: $close-font-weight; + cursor: $close-cursor; + &:before { + content: '\00d7'; + } + &:hover{ + color: $close-hover-color; + } + } +} +/* + Mixin for quick float classes. [1] + Parameters: + - $drag-left-name : The class name for left drags. + - $drag-right-name : The class name for right drags. + Notes: + - [1] : These classes use `!important` to set the float properties, + exercise caution when using. +*/ +@mixin make-drags($drag-left-name, $drag-right-name){ + .#{$drag-left-name} { + float: left !important; + } + .#{$drag-right-name} { + float: right !important; + } +} +/* + Mixin for center block class. + Parameters: + - $center-block-name : The class name for center block class. +*/ +@mixin make-center-block($center-block-name){ + .#{$center-block-name} { + display: block; + margin-left: auto; + margin-right: auto; + } +} +/* + Mixin for clearfix class. + Parameters: + - $clearfix-name : The class name for the clearfix class. +*/ +@mixin make-clearfix($clearfix-name){ + .#{$clearfix-name} { + &:before, &:after { + content: ""; + display: table; + clear: both; + } + } +} +/* + Mixin for hidden class. [1] + Parameters: + - $hidden-name : The class name for hidden elements. + Notes: + - [1] : This class uses `!important` to set the display property, + exercise caution when using. +*/ +@mixin make-hidden($hidden-name){ + .#{$hidden-name}{ + display: none !important; + } +} \ No newline at end of file diff --git a/testpage.html b/testpage.html index c9ce55c..d975ff0 100644 --- a/testpage.html +++ b/testpage.html @@ -12,7 +12,7 @@

Heading 2 smaller


Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent est mi, commodo vitae mauris at, sagittis vehicula sem. Quisque malesuada dui at justo maximus, vel placerat nibh blandit. Phasellus quis ipsum aliquam, fringilla ante sit amet, sagittis magna. In at dignissim eros, id vulputate tellus. Quisque orci urna, pretium in porttitor et, rhoncus in nulla. Aenean viverra ante in velit tincidunt, sit amet tincidunt ante suscipit. In malesuada consectetur molestie.


- +

@@ -50,16 +50,16 @@ Suspendisse varius turpis et dui viverra semper.
Heading 6 smaller

-
Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus ut justo. +
Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus ut justo.

-

TODO: Add helper class for bordered that uses 1px solid rgba(0,0,0,0.25) to add a border to elements easily

+

TODO: Add helper class for bordered that uses 1px solid rgba(0,0,0,0.25) to add a border to elements easily

@@ -94,7 +94,7 @@ Suspendisse varius turpis et dui viverra semper.

- +
Nam non diam ante. Curabitur non enim vitae eros luctus porta.
1c
2c
3c