From e31baf3c2c7a0726f3f8d0a3c2d86966926430df Mon Sep 17 00:00:00 2001 From: Hackzzila Date: Tue, 9 May 2017 21:21:40 -0500 Subject: [PATCH 1/9] update diamond files --- README.md | 2 +- diamond.json | 7 +++++++ package.json | 4 ---- 3 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 diamond.json diff --git a/README.md b/README.md index 3d2d49c..275af6f 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ Then you can include the main file inside your project: // --------- // Concise Core -@import "[concise.css]"; +@import "~concise.css"; ``` ### Copy the source files diff --git a/diamond.json b/diamond.json new file mode 100644 index 0000000..38bec9e --- /dev/null +++ b/diamond.json @@ -0,0 +1,7 @@ +{ + "name": "concise.css", + "version": "4.1.2", + "description": "A lightweight front-end framework that provides functionality without the bloat.", + "main": "concise.scss", + "postProcessor": "diamond.js" +} \ No newline at end of file diff --git a/package.json b/package.json index fd0b804..4eec325 100644 --- a/package.json +++ b/package.json @@ -43,9 +43,5 @@ "build:dev": "jake default", "stats": "stylestats dist/concise.css", "stats:min": "stylestats dist/concise.min.css" - }, - "diamond": { - "main": "concise.scss", - "postCompile": "diamond.js" } } From 5f7ea1594fffd8a840699e976381a1bae75652bd Mon Sep 17 00:00:00 2001 From: Rane Date: Sat, 13 May 2017 22:35:21 +0300 Subject: [PATCH 2/9] Fixed nested grid issue. no-gutters only to child columns. --- src/_atgrid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_atgrid.scss b/src/_atgrid.scss index e55e728..c0f5db8 100644 --- a/src/_atgrid.scss +++ b/src/_atgrid.scss @@ -55,7 +55,7 @@ margin-left: 0; margin-right: 0; - [#{$prefix}column] { + > [#{$prefix}column] { padding-left: 0; padding-right: 0; } From 78119a8ee4ed21d27811fd9a0f2d0b142c46a18c Mon Sep 17 00:00:00 2001 From: Kamil Date: Mon, 5 Jun 2017 00:50:25 +0200 Subject: [PATCH 3/9] [ref: #280] Add Flexbox order Thanks to @smbdelse --- dist/concise.css | 63 ++++++++++++++++++++++++++++++++++++++++++++ dist/concise.min.css | 2 +- src/_atgrid.scss | 10 +++++++ test.html | 26 ++++++++++++++++++ 4 files changed, 100 insertions(+), 1 deletion(-) diff --git a/dist/concise.css b/dist/concise.css index 2984172..b22b2db 100644 --- a/dist/concise.css +++ b/dist/concise.css @@ -679,6 +679,69 @@ table { [column~="bottom"] { -ms-flex-item-align: end; align-self: flex-end; } + +@media (min-width: 480px) { + [column~="n1"] { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + [column~="n2"] { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + } + [column~="n3"] { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + } + [column~="n4"] { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + } + [column~="n5"] { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; + } + [column~="n6"] { + -webkit-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; + } + [column~="n7"] { + -webkit-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; + } + [column~="n8"] { + -webkit-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; + } + [column~="n9"] { + -webkit-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; + } + [column~="n10"] { + -webkit-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; + } + [column~="n11"] { + -webkit-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; + } + [column~="n12"] { + -webkit-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; + } +} @media (min-width: 480px) { [column~="1"] { diff --git a/dist/concise.min.css b/dist/concise.min.css index f1e7920..51b4ee6 100644 --- a/dist/concise.min.css +++ b/dist/concise.min.css @@ -1 +1 @@ -@charset "UTF-8";article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}:root{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:#fff;color:#444;font-size:16px;text-rendering:optimizeLegibility}@media (min-width:480px){:root{font-size:18px}}code,kbd,pre,samp{font-family:Consolas,monospace;font-size:.83333rem;background-color:#f5f5f5}code,kbd{vertical-align:middle;display:inline-block;padding:0 .4em}pre{padding:.75rem 1em}pre>code{white-space:pre}kbd{background-color:transparent;outline:1px solid #dcdcdc}hr{background-color:#dcdcdc;height:1px;overflow:visible;border:0}nav ol,nav ul{padding-left:0}nav li{list-style:none}dt{font-weight:700}blockquote{padding:0 1em}blockquote cite,blockquote footer{color:#777;font-size:83.33333%;margin-top:.75rem}blockquote cite:before,blockquote footer:before{content:"— "}abbr{-webkit-font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"pnum" 1,"tnum" 0,"onum" 1,"lnum" 0,"smcp" 1,"c2sc" 1;font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"pnum" 1,"tnum" 0,"onum" 1,"lnum" 0,"smcp" 1,"c2sc" 1;text-transform:uppercase}abbr[title]{border-bottom:1px solid #dcdcdc;cursor:help;text-decoration:none}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}progress{vertical-align:baseline}small,sub,sup{font-size:83.33333%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em;-webkit-font-feature-settings:"subs" 1;font-feature-settings:"subs" 1}sup{top:-.25em;-webkit-font-feature-settings:"sups" 1;font-feature-settings:"sups" 1}::-moz-selection{background-color:#ebe1d3;text-shadow:none}::selection{background-color:#ebe1d3;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#c65146;text-decoration:none;-webkit-transition-duration:.15s;transition-duration:.15s}a:focus,a:hover{color:#7f2f27}a:hover{outline-width:0}table{border-collapse:collapse;border-spacing:0}input,select,textarea{background-color:transparent;border-style:none;color:inherit;font:inherit}input:focus,select:focus,textarea:focus{outline:2px solid #2b90d9}button,input,input[type=submit]{overflow:visible}button,input[type=submit],select{text-transform:none}[type=reset],[type=submit],button,html [type=button],input[type=submit]{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #dcdcdc;padding:1.5rem 1em}legend{display:table;max-width:100%;white-space:normal;padding:0 .5em}textarea{overflow:auto;resize:vertical;height:auto;padding:.375rem .5em}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input[type=range]{border:none;padding:0;width:100%;-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-moz-range-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-ms-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-webkit-slider-runnable-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-moz-range-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem}input[type=range]::-ms-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem}input[type=range]::-webkit-slider-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem;-webkit-appearance:none}button,input[type=submit]{background-color:#c65146;border:none;color:#fff;cursor:pointer;font-size:.83333rem;line-height:2.25rem;padding:0 1.5em;-webkit-transition:background-color .15s;transition:background-color .15s;white-space:nowrap}button:focus,button:hover,input[type=submit]:focus,input[type=submit]:hover{background-color:#cc6359;text-decoration:none;outline:none}button:active,input[type=submit]:active{background-color:#d2766d}button[disabled],input[disabled][type=submit]{background-color:#eee;color:#fff;cursor:not-allowed}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}[tabindex],a,area,button,input,input[type=submit],label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden][aria-hidden=false]{clip:rect(0,0,0,0);display:inherit;position:absolute}[hidden][aria-hidden=false]:focus{clip:auto}*{margin:0}*+*{margin-top:1.5rem}a,body,br [column],code,dd,div,h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,input,kbd,label,li,option,select,span,textarea{margin-top:0}h1{font-size:2.0736rem}h2{font-size:1.728rem}h3{font-size:1.44rem}h4{font-size:1.2rem}h5{font-size:1rem}h6{font-size:.83333rem}h1,h2,h3,h4,h5,h6{color:#222;font-family:Helvetica,Arial,sans-serif;line-height:1.3}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:inherit;vertical-align:0;font-size:83.33333%}h1,h2,h3{margin:.75rem 0 .375rem}h1 a,h2 a,h3 a{color:inherit}h1 a:focus,h1 a:hover,h2 a:focus,h2 a:hover,h3 a:focus,h3 a:hover{color:#c65146;text-decoration:none}h4,h5,h6{margin:.375rem 0}ol,ul{padding-left:1em}ol ol,ol ul,ul ol,ul ul{padding-left:1.5em}ol{padding-left:0;counter-reset:a}ol li{list-style:none}ol li:before{content:counters(a,".") ". ";counter-increment:a;margin-right:.2em}input:not([type=submit]),select,textarea{width:100%;font-size:.83333rem;min-height:2.25rem}input:not([type=submit])[disabled],select[disabled],textarea[disabled]{background-color:#eee;cursor:not-allowed;border:0}input:not([type=submit]):not([type=range]),select,textarea{border:1px solid #dcdcdc;padding:0 .75em}input[type=checkbox],input[type=file],input[type=image],input[type=radio]{height:auto;width:auto}input[type=checkbox],input[type=radio]{line-height:normal;padding:0;vertical-align:middle}input[type=file]{border:none;line-height:1.5rem;padding:0}select{background-color:transparent;padding-left:.5em;width:auto;min-width:10em;height:2.25rem}select[disabled]{color:#777}select[multiple]{height:auto;width:100%;padding:0}select::-ms-expand{display:none}select::-ms-value{color:currentColor}select option{padding:0 .75em}label{display:block;font-size:.83333rem;line-height:2.25rem}input[type=checkbox]+label,input[type=radio]+label{display:inline-block;margin-left:.5em}table{width:100%}@media (min-width:480px){table{width:auto}}table tfoot,table thead{background-color:#f5f5f5;text-align:left}table td,table th{line-height:2.25rem;overflow:visible;padding:0 1em}table caption{font-size:.83333rem;font-style:italic;line-height:3rem;text-align:center}[container]{margin-left:auto;margin-right:auto;max-width:1200px;padding-left:1rem;padding-right:1rem;overflow:auto}[grid]{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:-1rem;margin-right:-1rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width:480px){[grid]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}[column]{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-left:1rem;padding-right:1rem}[grid~=no-gutters]{margin-left:0;margin-right:0}[grid~=no-gutters] [column]{padding-left:0;padding-right:0}[grid~=no-collapse]{-ms-flex-flow:row nowrap;flex-flow:row nowrap}[grid~=wrap]{-ms-flex-wrap:wrap;flex-wrap:wrap}[grid~=no-wrap]{-ms-flex-wrap:nowrap;flex-wrap:nowrap}[grid~=wrap-reverse]{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}[grid~=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[grid~=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[grid~=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[grid~=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[grid~=justify-start]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[grid~=justify-end]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[grid~=justify-center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[grid~=justify-between]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[grid~=justify-around]{-ms-flex-pack:distribute;justify-content:space-around}[grid~=top]{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[grid~=center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[grid~=bottom]{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[grid~=baseline]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[grid~=stretch]{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[column~=top]{-ms-flex-item-align:start;align-self:flex-start}[column~=center]{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}[column~=bottom]{-ms-flex-item-align:end;align-self:flex-end}@media (min-width:480px){[column~="1"]{-webkit-box-flex:0;-ms-flex:0 1 8.33333%;flex:0 1 8.33333%;max-width:8.33333%}[column~="2"]{-webkit-box-flex:0;-ms-flex:0 1 16.66667%;flex:0 1 16.66667%;max-width:16.66667%}[column~="3"]{-webkit-box-flex:0;-ms-flex:0 1 25%;flex:0 1 25%;max-width:25%}[column~="4"]{-webkit-box-flex:0;-ms-flex:0 1 33.33333%;flex:0 1 33.33333%;max-width:33.33333%}[column~="5"]{-webkit-box-flex:0;-ms-flex:0 1 41.66667%;flex:0 1 41.66667%;max-width:41.66667%}[column~="6"]{-webkit-box-flex:0;-ms-flex:0 1 50%;flex:0 1 50%;max-width:50%}[column~="7"]{-webkit-box-flex:0;-ms-flex:0 1 58.33333%;flex:0 1 58.33333%;max-width:58.33333%}[column~="8"]{-webkit-box-flex:0;-ms-flex:0 1 66.66667%;flex:0 1 66.66667%;max-width:66.66667%}[column~="9"]{-webkit-box-flex:0;-ms-flex:0 1 75%;flex:0 1 75%;max-width:75%}[column~="10"]{-webkit-box-flex:0;-ms-flex:0 1 83.33333%;flex:0 1 83.33333%;max-width:83.33333%}[column~="11"]{-webkit-box-flex:0;-ms-flex:0 1 91.66667%;flex:0 1 91.66667%;max-width:91.66667%}[column~="12"]{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}[column~="+1"]{margin-left:8.33333%}[column~="+2"]{margin-left:16.66667%}[column~="+3"]{margin-left:25%}[column~="+4"]{margin-left:33.33333%}[column~="+5"]{margin-left:41.66667%}[column~="+6"]{margin-left:50%}[column~="+7"]{margin-left:58.33333%}[column~="+8"]{margin-left:66.66667%}[column~="+9"]{margin-left:75%}[column~="+10"]{margin-left:83.33333%}[column~="+11"]{margin-left:91.66667%}[column~="+12"]{margin-left:100%}}@media print{@page{margin:2cm}*,:after,:before{background:transparent!important;color:#000!important;-webkit-filter:none!important;filter:none!important;text-shadow:none!important}:root{background-color:#fff;color:#000;font:12pt/1.4 Georgia,Times New Roman,Times,serif}body{width:100%!important;margin:0!important;padding:0!important}h1,h2,h3,h4,h5,h6{page-break-after:avoid;font-family:Georgia,Times New Roman,Times,serif}h1{font-size:19pt}h2{font-size:17pt}h3{font-size:15pt}h4,h5,h6{font-size:14pt}img{max-width:100%!important;page-break-after:avoid;page-break-inside:avoid}a[href^="#"]:after,audio,embed,footer,nav,object,video{display:none;visibility:hidden}h2,h3,p{orphans:3;widows:3}a,a:visited{color:#000;font-size:.57em;text-decoration:underline;word-wrap:break-word}a:visited[href]:after,a[href]:after{content:" (" attr(href) ")";font-size:smaller}q:after{content:" (Source: " attr(cite) ")"}abbr[title]:after{content:" (" attr(title) ")"}a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}code,pre{background-color:transparent;border:1px solid #dcdcdc}blockquote,code,pre{page-break-inside:avoid}blockquote{border:none}thead{display:table-header-group}img,tr{page-break-inside:avoid}ol{padding-left:1.25em}ul{padding-left:0;list-style:none}ul ul,ul ul ul{padding-left:1.5em}ol li,ul li{content:"» "}} \ No newline at end of file +@charset "UTF-8";article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}:root{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:#fff;color:#444;font-size:16px;text-rendering:optimizeLegibility}@media (min-width:480px){:root{font-size:18px}}code,kbd,pre,samp{font-family:Consolas,monospace;font-size:.83333rem;background-color:#f5f5f5}code,kbd{vertical-align:middle;display:inline-block;padding:0 .4em}pre{padding:.75rem 1em}pre>code{white-space:pre}kbd{background-color:transparent;outline:1px solid #dcdcdc}hr{background-color:#dcdcdc;height:1px;overflow:visible;border:0}nav ol,nav ul{padding-left:0}nav li{list-style:none}dt{font-weight:700}blockquote{padding:0 1em}blockquote cite,blockquote footer{color:#777;font-size:83.33333%;margin-top:.75rem}blockquote cite:before,blockquote footer:before{content:"— "}abbr{-webkit-font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"pnum" 1,"tnum" 0,"onum" 1,"lnum" 0,"smcp" 1,"c2sc" 1;font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"pnum" 1,"tnum" 0,"onum" 1,"lnum" 0,"smcp" 1,"c2sc" 1;text-transform:uppercase}abbr[title]{border-bottom:1px solid #dcdcdc;cursor:help;text-decoration:none}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}progress{vertical-align:baseline}small,sub,sup{font-size:83.33333%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em;-webkit-font-feature-settings:"subs" 1;font-feature-settings:"subs" 1}sup{top:-.25em;-webkit-font-feature-settings:"sups" 1;font-feature-settings:"sups" 1}::-moz-selection{background-color:#ebe1d3;text-shadow:none}::selection{background-color:#ebe1d3;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#c65146;text-decoration:none;-webkit-transition-duration:.15s;transition-duration:.15s}a:focus,a:hover{color:#7f2f27}a:hover{outline-width:0}table{border-collapse:collapse;border-spacing:0}input,select,textarea{background-color:transparent;border-style:none;color:inherit;font:inherit}input:focus,select:focus,textarea:focus{outline:2px solid #2b90d9}button,input,input[type=submit]{overflow:visible}button,input[type=submit],select{text-transform:none}[type=reset],[type=submit],button,html [type=button],input[type=submit]{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #dcdcdc;padding:1.5rem 1em}legend{display:table;max-width:100%;white-space:normal;padding:0 .5em}textarea{overflow:auto;resize:vertical;height:auto;padding:.375rem .5em}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input[type=range]{border:none;padding:0;width:100%;-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-moz-range-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-ms-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-webkit-slider-runnable-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-moz-range-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem}input[type=range]::-ms-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem}input[type=range]::-webkit-slider-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem;-webkit-appearance:none}button,input[type=submit]{background-color:#c65146;border:none;color:#fff;cursor:pointer;font-size:.83333rem;line-height:2.25rem;padding:0 1.5em;-webkit-transition:background-color .15s;transition:background-color .15s;white-space:nowrap}button:focus,button:hover,input[type=submit]:focus,input[type=submit]:hover{background-color:#cc6359;text-decoration:none;outline:none}button:active,input[type=submit]:active{background-color:#d2766d}button[disabled],input[disabled][type=submit]{background-color:#eee;color:#fff;cursor:not-allowed}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}[tabindex],a,area,button,input,input[type=submit],label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden][aria-hidden=false]{clip:rect(0,0,0,0);display:inherit;position:absolute}[hidden][aria-hidden=false]:focus{clip:auto}*{margin:0}*+*{margin-top:1.5rem}a,body,br [column],code,dd,div,h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,input,kbd,label,li,option,select,span,textarea{margin-top:0}h1{font-size:2.0736rem}h2{font-size:1.728rem}h3{font-size:1.44rem}h4{font-size:1.2rem}h5{font-size:1rem}h6{font-size:.83333rem}h1,h2,h3,h4,h5,h6{color:#222;font-family:Helvetica,Arial,sans-serif;line-height:1.3}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:inherit;vertical-align:0;font-size:83.33333%}h1,h2,h3{margin:.75rem 0 .375rem}h1 a,h2 a,h3 a{color:inherit}h1 a:focus,h1 a:hover,h2 a:focus,h2 a:hover,h3 a:focus,h3 a:hover{color:#c65146;text-decoration:none}h4,h5,h6{margin:.375rem 0}ol,ul{padding-left:1em}ol ol,ol ul,ul ol,ul ul{padding-left:1.5em}ol{padding-left:0;counter-reset:a}ol li{list-style:none}ol li:before{content:counters(a,".") ". ";counter-increment:a;margin-right:.2em}input:not([type=submit]),select,textarea{width:100%;font-size:.83333rem;min-height:2.25rem}input:not([type=submit])[disabled],select[disabled],textarea[disabled]{background-color:#eee;cursor:not-allowed;border:0}input:not([type=submit]):not([type=range]),select,textarea{border:1px solid #dcdcdc;padding:0 .75em}input[type=checkbox],input[type=file],input[type=image],input[type=radio]{height:auto;width:auto}input[type=checkbox],input[type=radio]{line-height:normal;padding:0;vertical-align:middle}input[type=file]{border:none;line-height:1.5rem;padding:0}select{background-color:transparent;padding-left:.5em;width:auto;min-width:10em;height:2.25rem}select[disabled]{color:#777}select[multiple]{height:auto;width:100%;padding:0}select::-ms-expand{display:none}select::-ms-value{color:currentColor}select option{padding:0 .75em}label{display:block;font-size:.83333rem;line-height:2.25rem}input[type=checkbox]+label,input[type=radio]+label{display:inline-block;margin-left:.5em}table{width:100%}@media (min-width:480px){table{width:auto}}table tfoot,table thead{background-color:#f5f5f5;text-align:left}table td,table th{line-height:2.25rem;overflow:visible;padding:0 1em}table caption{font-size:.83333rem;font-style:italic;line-height:3rem;text-align:center}[container]{margin-left:auto;margin-right:auto;max-width:1200px;padding-left:1rem;padding-right:1rem;overflow:auto}[grid]{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:-1rem;margin-right:-1rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width:480px){[grid]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}[column]{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-left:1rem;padding-right:1rem}[grid~=no-gutters]{margin-left:0;margin-right:0}[grid~=no-gutters] [column]{padding-left:0;padding-right:0}[grid~=no-collapse]{-ms-flex-flow:row nowrap;flex-flow:row nowrap}[grid~=wrap]{-ms-flex-wrap:wrap;flex-wrap:wrap}[grid~=no-wrap]{-ms-flex-wrap:nowrap;flex-wrap:nowrap}[grid~=wrap-reverse]{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}[grid~=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[grid~=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[grid~=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[grid~=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[grid~=justify-start]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[grid~=justify-end]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[grid~=justify-center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[grid~=justify-between]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[grid~=justify-around]{-ms-flex-pack:distribute;justify-content:space-around}[grid~=top]{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[grid~=center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[grid~=bottom]{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[grid~=baseline]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[grid~=stretch]{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[column~=top]{-ms-flex-item-align:start;align-self:flex-start}[column~=center]{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}[column~=bottom]{-ms-flex-item-align:end;align-self:flex-end}@media (min-width:480px){[column~=n1]{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[column~=n2]{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}[column~=n3]{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}[column~=n4]{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}[column~=n5]{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}[column~=n6]{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}[column~=n7]{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}[column~=n8]{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}[column~=n9]{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}[column~=n10]{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}[column~=n11]{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}[column~=n12]{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}}@media (min-width:480px){[column~="1"]{-webkit-box-flex:0;-ms-flex:0 1 8.33333%;flex:0 1 8.33333%;max-width:8.33333%}[column~="2"]{-webkit-box-flex:0;-ms-flex:0 1 16.66667%;flex:0 1 16.66667%;max-width:16.66667%}[column~="3"]{-webkit-box-flex:0;-ms-flex:0 1 25%;flex:0 1 25%;max-width:25%}[column~="4"]{-webkit-box-flex:0;-ms-flex:0 1 33.33333%;flex:0 1 33.33333%;max-width:33.33333%}[column~="5"]{-webkit-box-flex:0;-ms-flex:0 1 41.66667%;flex:0 1 41.66667%;max-width:41.66667%}[column~="6"]{-webkit-box-flex:0;-ms-flex:0 1 50%;flex:0 1 50%;max-width:50%}[column~="7"]{-webkit-box-flex:0;-ms-flex:0 1 58.33333%;flex:0 1 58.33333%;max-width:58.33333%}[column~="8"]{-webkit-box-flex:0;-ms-flex:0 1 66.66667%;flex:0 1 66.66667%;max-width:66.66667%}[column~="9"]{-webkit-box-flex:0;-ms-flex:0 1 75%;flex:0 1 75%;max-width:75%}[column~="10"]{-webkit-box-flex:0;-ms-flex:0 1 83.33333%;flex:0 1 83.33333%;max-width:83.33333%}[column~="11"]{-webkit-box-flex:0;-ms-flex:0 1 91.66667%;flex:0 1 91.66667%;max-width:91.66667%}[column~="12"]{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}[column~="+1"]{margin-left:8.33333%}[column~="+2"]{margin-left:16.66667%}[column~="+3"]{margin-left:25%}[column~="+4"]{margin-left:33.33333%}[column~="+5"]{margin-left:41.66667%}[column~="+6"]{margin-left:50%}[column~="+7"]{margin-left:58.33333%}[column~="+8"]{margin-left:66.66667%}[column~="+9"]{margin-left:75%}[column~="+10"]{margin-left:83.33333%}[column~="+11"]{margin-left:91.66667%}[column~="+12"]{margin-left:100%}}@media print{@page{margin:2cm}*,:after,:before{background:transparent!important;color:#000!important;-webkit-filter:none!important;filter:none!important;text-shadow:none!important}:root{background-color:#fff;color:#000;font:12pt/1.4 Georgia,Times New Roman,Times,serif}body{width:100%!important;margin:0!important;padding:0!important}h1,h2,h3,h4,h5,h6{page-break-after:avoid;font-family:Georgia,Times New Roman,Times,serif}h1{font-size:19pt}h2{font-size:17pt}h3{font-size:15pt}h4,h5,h6{font-size:14pt}img{max-width:100%!important;page-break-after:avoid;page-break-inside:avoid}a[href^="#"]:after,audio,embed,footer,nav,object,video{display:none;visibility:hidden}h2,h3,p{orphans:3;widows:3}a,a:visited{color:#000;font-size:.57em;text-decoration:underline;word-wrap:break-word}a:visited[href]:after,a[href]:after{content:" (" attr(href) ")";font-size:smaller}q:after{content:" (Source: " attr(cite) ")"}abbr[title]:after{content:" (" attr(title) ")"}a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}code,pre{background-color:transparent;border:1px solid #dcdcdc}blockquote,code,pre{page-break-inside:avoid}blockquote{border:none}thead{display:table-header-group}img,tr{page-break-inside:avoid}ol{padding-left:1.25em}ul{padding-left:0;list-style:none}ul ul,ul ul ul{padding-left:1.5em}ol li,ul li{content:"» "}} diff --git a/src/_atgrid.scss b/src/_atgrid.scss index c0f5db8..d5ca4fd 100644 --- a/src/_atgrid.scss +++ b/src/_atgrid.scss @@ -83,6 +83,16 @@ [#{$prefix}grid~="row-reverse"] { flex-direction: row-reverse; } [#{$prefix}grid~="column"] { flex-direction: column; } [#{$prefix}grid~="column-reverse"] { flex-direction: column-reverse; } + + // + // Reorder items above breakpoint + // + + @media ($breakpoint) { + @for $i from 1 through $num-columns { + [#{$prefix}column~="n#{$i}"] { order: #{$i}; } + } + } // // Justify content diff --git a/test.html b/test.html index cdc5f73..128e308 100644 --- a/test.html +++ b/test.html @@ -259,6 +259,32 @@

Heading 2 Link Helper text

1 +xs-1 +sm-2 +md-3 +lg-4 +xl-5 + +
+
+ 1st +
+ +
+ 2nd +
+ +
+ 3rd +
+ +
+ 4th +
+ +
+ 5th +
+ +
+ 6th +
+
From 5db929f1eb6e1fbc8efbf5bee7753379aa27789d Mon Sep 17 00:00:00 2001 From: James Kolce Date: Fri, 7 Jul 2017 10:48:23 -0600 Subject: [PATCH 4/9] Remove outdated browser compatibility note --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 275af6f..a6f0d7b 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,6 @@ The core of the framework only includes styles for native HTML elements. Compone Concise CSS is written using a custom CSS preprocessor, built on top of Sass and some PostCSS plugins; this means that you can still write Sass code as usual, but you can also enjoy of other custom features, like the `lh` unit provided to handle vertical rhythm. -**Browser Compatibility:** Since the core of of Concise CSS only includes general normalization styles, it should work with no problems on IE>9. Add-ons like Concise UI use Flexbox, so they will only work on modern browsers (including IE>11|Edge). If you find a problem with certain browser let us know and we will try to fix it. - ## Installation There are 4 different options to install Concise CSS in your website, although the recommended way is to use NPM. From 9b914c058fb83d9fa3c8f0b882a52a3ae68a4c9a Mon Sep 17 00:00:00 2001 From: dziajl Date: Mon, 28 Aug 2017 19:34:22 +0200 Subject: [PATCH 5/9] No auto margin to
(#281) --- src/_base.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/_base.scss b/src/_base.scss index 1a78b73..5f6c3bd 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -707,6 +707,7 @@ textarea, a, textarea, body, + main, span, dd, code, From 5cc67b1dc7c8a1718aa0a02e5c7ed0f44ab05ec3 Mon Sep 17 00:00:00 2001 From: Keenan Payne Date: Tue, 15 Oct 2019 12:26:11 -0700 Subject: [PATCH 6/9] Remove notes for CDN because it has been deprecated --- README.md | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/README.md b/README.md index a6f0d7b..62a9732 100644 --- a/README.md +++ b/README.md @@ -12,29 +12,6 @@ Concise CSS is written using a custom CSS preprocessor, built on top of Sass and ## Installation -There are 4 different options to install Concise CSS in your website, although the recommended way is to use NPM. - -### Using our CDN - -If you just want to try Concise CSS or of you do not have plans to customize the styles, you can use our CDN, this is the easier way to get started with the framework—and if you like it—is recommended to switch to NPM so that you can customize the styles. - - -```HTML - - - - - -``` - -That is for the latest version, if you want to use a specific one you can do something like the following: - -```HTML - - - - - ``` ### Install with NPM From c3faec47b2fae15fa42a415c34d7ddca9406f6ab Mon Sep 17 00:00:00 2001 From: Keenan Payne Date: Mon, 25 May 2020 18:10:03 -0700 Subject: [PATCH 7/9] Revert "Remove notes for CDN because it has been deprecated" This reverts commit 5cc67b1dc7c8a1718aa0a02e5c7ed0f44ab05ec3. --- README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/README.md b/README.md index 62a9732..a6f0d7b 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,29 @@ Concise CSS is written using a custom CSS preprocessor, built on top of Sass and ## Installation +There are 4 different options to install Concise CSS in your website, although the recommended way is to use NPM. + +### Using our CDN + +If you just want to try Concise CSS or of you do not have plans to customize the styles, you can use our CDN, this is the easier way to get started with the framework—and if you like it—is recommended to switch to NPM so that you can customize the styles. + + +```HTML + + + + + +``` + +That is for the latest version, if you want to use a specific one you can do something like the following: + +```HTML + + + + + ``` ### Install with NPM From 1d92adbff3b470f57b57df25dd44fd8c8424fa15 Mon Sep 17 00:00:00 2001 From: Keenan Payne Date: Mon, 25 May 2020 18:11:26 -0700 Subject: [PATCH 8/9] Make CDN link protocol-agnostic --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a6f0d7b..51a148e 100644 --- a/README.md +++ b/README.md @@ -21,20 +21,20 @@ If you just want to try Concise CSS or of you do not have plans to customize the ```HTML - + - + ``` That is for the latest version, if you want to use a specific one you can do something like the following: ```HTML - + - + ``` ### Install with NPM From 0a493d0156ab292a5bdd6425ddb8ecdaa62d4213 Mon Sep 17 00:00:00 2001 From: Keenan Payne Date: Wed, 17 Jun 2020 20:58:41 -0600 Subject: [PATCH 9/9] Add notes about semantic versions of Concise with CDN --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 51a148e..bf05bb3 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,10 @@ If you just want to try Concise CSS or of you do not have plans to customize the ``` -That is for the latest version, if you want to use a specific one you can do something like the following: +#### Semantic versioning with CDN +All major and minor versions of Concise exist in its own folder on the CDN. You can use specific versions of Concise with the CDN by prefixing the CSS file with the version number in the URL. + +For example, you can use the latest version as such: ```HTML @@ -37,6 +40,8 @@ That is for the latest version, if you want to use a specific one you can do som ``` +**Note:** All patch versions of Concise get published automatically to the non-prefixed URL. Patch versions are not organized into a folder. + ### Install with NPM Execute the following command to install Concise CSS from NPM. If you are new to NPM, you can check their [documentation](https://docs.npmjs.com/).