Skip to content

Commit e0fa570

Browse files
keenanpaynekeenanpayne
committed
Add styles for nonresponsive websites
1 parent eaeb244 commit e0fa570

8 files changed

Lines changed: 247 additions & 6 deletions

File tree

‎dist/concise.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ template,
5858
@media (min-width: 30em) {
5959
:root {
6060
font-size: 16px; } }
61+
:root .nonresponsive {
62+
font-size: 16px; }
6163

6264
*,
6365
::after,
@@ -258,6 +260,10 @@ button, input[type="submit"],
258260
form [row] {
259261
margin-bottom: 24px; } }
260262

263+
.nonresponsive form, .nonresponsive
264+
form [row] {
265+
margin-bottom: 24px; }
266+
261267
input:not([type="submit"]),
262268
select,
263269
textarea {
@@ -421,6 +427,22 @@ input[type="range"] {
421427
.form--inline input + label {
422428
margin-left: 1em; } }
423429

430+
.nonresponsive .form--inline input,
431+
.nonresponsive .form--inline select,
432+
.nonresponsive .form--inline textarea {
433+
display: inline-block;
434+
margin-bottom: 0;
435+
vertical-align: middle;
436+
width: auto; }
437+
438+
.nonresponsive .form--inline label {
439+
display: inline;
440+
margin-right: .5em;
441+
vertical-align: middle; }
442+
443+
.nonresponsive .form--inline input + label {
444+
margin-left: 1em; }
445+
424446
.input--small {
425447
font-size: 0.75em;
426448
height: 24px; }
@@ -567,6 +589,27 @@ h6,
567589
.kilo {
568590
font-size: 3.25em; } }
569591

592+
.nonresponsive h1,
593+
.nonresponsive .h1 {
594+
font-size: 3em; }
595+
596+
.nonresponsive h2,
597+
.nonresponsive .h2 {
598+
font-size: 2.25em; }
599+
600+
.nonresponsive h3,
601+
.nonresponsive .h3 {
602+
font-size: 1.75em; }
603+
604+
.nonresponsive .giga {
605+
font-size: 5em; }
606+
607+
.nonresponsive .mega {
608+
font-size: 4em; }
609+
610+
.nonresponsive .kilo {
611+
font-size: 3.25em; }
612+
570613
ul,
571614
ol {
572615
padding-left: 1.5em;
@@ -631,6 +674,23 @@ dd {
631674
.dl--horizontal dd:after {
632675
clear: both; } }
633676

677+
.nonresponsive .dl--horizontal dt {
678+
clear: left;
679+
float: left;
680+
overflow: hidden;
681+
text-align: right;
682+
text-overflow: ellipsis;
683+
white-space: nowrap;
684+
width: 150px; }
685+
686+
.nonresponsive .dl--horizontal dd {
687+
margin-left: 165px; }
688+
.nonresponsive .dl--horizontal dd:before, .nonresponsive .dl--horizontal dd:after {
689+
content: "";
690+
display: table; }
691+
.nonresponsive .dl--horizontal dd:after {
692+
clear: both; }
693+
634694
@media print {
635695
@page {
636696
margin: .5cm; }
@@ -791,6 +851,16 @@ table {
791851
table td {
792852
padding: 0 2.5em; } }
793853

854+
.nonresponsive {
855+
width: auto; }
856+
.nonresponsive th,
857+
.nonresponsive td {
858+
padding: 0 2.5em; }
859+
860+
.nonresponsive th,
861+
.nonresponsive td {
862+
line-height: 48px; }
863+
794864
.table--responsive {
795865
overflow: auto;
796866
width: 100%; }
@@ -1033,6 +1103,75 @@ address {
10331103
[column~="+11"] {
10341104
margin-left: 91.66667%; } }
10351105

1106+
.nonresponsive [column~="1"] {
1107+
width: 8.33333%; }
1108+
1109+
.nonresponsive [column~="2"] {
1110+
width: 16.66667%; }
1111+
1112+
.nonresponsive [column~="3"] {
1113+
width: 25%; }
1114+
1115+
.nonresponsive [column~="4"] {
1116+
width: 33.33333%; }
1117+
1118+
.nonresponsive [column~="5"] {
1119+
width: 41.66667%; }
1120+
1121+
.nonresponsive [column~="6"] {
1122+
width: 50%; }
1123+
1124+
.nonresponsive [column~="7"] {
1125+
width: 58.33333%; }
1126+
1127+
.nonresponsive [column~="8"] {
1128+
width: 66.66667%; }
1129+
1130+
.nonresponsive [column~="9"] {
1131+
width: 75%; }
1132+
1133+
.nonresponsive [column~="10"] {
1134+
width: 83.33333%; }
1135+
1136+
.nonresponsive [column~="11"] {
1137+
width: 91.66667%; }
1138+
1139+
.nonresponsive [column~="12"] {
1140+
width: 100%; }
1141+
1142+
.nonresponsive [column~="+1"] {
1143+
margin-left: 8.33333%; }
1144+
1145+
.nonresponsive [column~="+2"] {
1146+
margin-left: 16.66667%; }
1147+
1148+
.nonresponsive [column~="+3"] {
1149+
margin-left: 25%; }
1150+
1151+
.nonresponsive [column~="+4"] {
1152+
margin-left: 33.33333%; }
1153+
1154+
.nonresponsive [column~="+5"] {
1155+
margin-left: 41.66667%; }
1156+
1157+
.nonresponsive [column~="+6"] {
1158+
margin-left: 50%; }
1159+
1160+
.nonresponsive [column~="+7"] {
1161+
margin-left: 58.33333%; }
1162+
1163+
.nonresponsive [column~="+8"] {
1164+
margin-left: 66.66667%; }
1165+
1166+
.nonresponsive [column~="+9"] {
1167+
margin-left: 75%; }
1168+
1169+
.nonresponsive [column~="+10"] {
1170+
margin-left: 83.33333%; }
1171+
1172+
.nonresponsive [column~="+11"] {
1173+
margin-left: 91.66667%; }
1174+
10361175
.text--muted {
10371176
color: #aaa !important; }
10381177

‎dist/concise.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/layout/_base.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ template,
7272
@media (min-width: $bp-extra-small) {
7373
font-size: $font-base-size + px;
7474
}
75+
76+
.nonresponsive { font-size: $font-base-size + px; }
7577
}
7678

7779
*,

‎src/core/layout/_forms.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ form [row] {
77
@media (min-width: $bp-extra-small) {
88
margin-bottom: unitSize(3);
99
}
10+
11+
.nonresponsive & { margin-bottom: unitSize(3); }
1012
}
1113

1214
input:not([type="submit"]),
@@ -34,6 +36,7 @@ textarea {
3436
}
3537

3638
input:not([type="submit"]) {
39+
3740
line-height: normal;
3841
min-height: unitSize(3);
3942

@@ -236,6 +239,27 @@ input[type="range"] {
236239
}
237240
}
238241

242+
.nonresponsive {
243+
.form--inline {
244+
input,
245+
select,
246+
textarea {
247+
display: inline-block;
248+
margin-bottom: 0;
249+
vertical-align: middle;
250+
width: auto;
251+
}
252+
253+
label {
254+
display: inline;
255+
margin-right: .5em;
256+
vertical-align: middle;
257+
}
258+
259+
input + label { margin-left: 1em; }
260+
}
261+
}
262+
239263

240264
//
241265
// Input Modifiers

‎src/core/layout/_headings.scss‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,17 @@ h1,
6868
}
6969

7070
h2,
71-
.h2 { font-size: pxToEm($h2-size * .75);
71+
.h2 {
72+
font-size: pxToEm($h2-size * .75);
7273

7374
@media (min-width: $bp-small) {
7475
font-size: pxToEm($h2-size);
7576
}
7677
}
7778

7879
h3,
79-
.h3 { font-size: pxToEm($h3-size * .75);
80+
.h3 {
81+
font-size: pxToEm($h3-size * .75);
8082

8183
@media (min-width: $bp-small) {
8284
font-size: pxToEm($h3-size);
@@ -98,25 +100,50 @@ h6,
98100
// -----
99101

100102
// Giga
101-
.giga { font-size: pxToEm($giga-size * .75);
103+
.giga {
104+
font-size: pxToEm($giga-size * .75);
102105

103106
@media (min-width: $bp-small) {
104107
font-size: pxToEm($giga-size);
105108
}
106109
}
107110

108111
// Mega
109-
.mega { font-size: pxToEm($mega-size * .75);
112+
.mega {
113+
font-size: pxToEm($mega-size * .75);
110114

111115
@media (min-width: $bp-small) {
112116
font-size: pxToEm($mega-size);
113117
}
114118
}
115119

116120
// Kilo
117-
.kilo { font-size: pxToEm($kilo-size * .75);
121+
.kilo {
122+
font-size: pxToEm($kilo-size * .75);
118123

119124
@media (min-width: $bp-small) {
120125
font-size: pxToEm($kilo-size);
121126
}
122127
}
128+
129+
130+
//
131+
// Non-Responsive
132+
// --------------
133+
134+
.nonresponsive {
135+
h1,
136+
.h1 { font-size: pxToEm($h1-size); }
137+
138+
h2,
139+
.h2 { font-size: pxToEm($h2-size); }
140+
141+
h3,
142+
.h3 { font-size: pxToEm($h3-size); }
143+
144+
.giga { font-size: pxToEm($giga-size); }
145+
146+
.mega { font-size: pxToEm($mega-size); }
147+
148+
.kilo { font-size: pxToEm($kilo-size); }
149+
}

‎src/core/layout/_lists.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,3 +81,23 @@ dd { margin-bottom: unitSize(1, 2); }
8181
}
8282
}
8383
}
84+
85+
.nonresponsive {
86+
.dl--horizontal {
87+
dt {
88+
clear: left;
89+
float: left;
90+
overflow: hidden;
91+
text-align: right;
92+
text-overflow: ellipsis;
93+
white-space: nowrap;
94+
width: 150px;
95+
}
96+
97+
dd {
98+
@include clearfix();
99+
100+
margin-left: 165px;
101+
}
102+
}
103+
}

‎src/core/layout/_tables.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,18 @@ table {
5555
}
5656
}
5757

58+
.nonresponsive {
59+
& {
60+
width: auto;
61+
62+
th,
63+
td { padding: 0 2.5em; }
64+
}
65+
66+
th,
67+
td { line-height: unitSize(6); }
68+
}
69+
5870

5971
//
6072
// Responsive

‎src/core/utils/_atgrid.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,4 +172,21 @@ $only-semantic: false !default;
172172
}
173173
}
174174
}
175+
176+
// Non-responsive grid
177+
.nonresponsive {
178+
// Create columns
179+
@for $i from 1 through $num-columns {
180+
[#{$prefix}column~="#{$i}"] {
181+
width: (($i / $num-columns) * 100%);
182+
}
183+
}
184+
185+
// Offset for columns
186+
@for $i from 1 through ($num-columns - 1) {
187+
[#{$prefix}column~="+#{$i}"] {
188+
margin-left: (($i / $num-columns) * 100%);
189+
}
190+
}
191+
}
175192
}

0 commit comments

Comments
 (0)