Skip to content

Commit 46bcf98

Browse files
leoj3nleoj3n
committed
Rework the flexbox code
1 parent db0f9e9 commit 46bcf98

File tree

2 files changed

+186
-124
lines changed

2 files changed

+186
-124
lines changed

‎site/default/static/styles/styles.less

Lines changed: 181 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,206 @@
1+
/**
2+
* @stylesheet styles.less Styles
3+
* @parent bit-docs/theme
4+
*
5+
* @description Styles for the generated site.
6+
*/
7+
18
@import "locate://bit-docs-site/styles/variables.less";
29

3-
.flex-mixin {
4-
display: -webkit-box;
5-
display: -moz-box;
6-
display: -ms-flexbox;
7-
display: -webkit-flex;
8-
display: flex;
9-
}
10+
/*
11+
Mobile:
12+
┌─────────────────────────────────┐
13+
│ html ▶ box-sizing: border-box ├ Everything border-box.
14+
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
15+
│ ┃ body ▶ margin: auto ┣━━ Kill default margins.
16+
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
17+
│ ┃ ┃ header ┃ ┃ │
18+
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
19+
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
20+
│ ┃ ┃ .content ┃ ┃ │
21+
│ ┃ ┃ ┏━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ │
22+
│ ┃ ┃ ┃ .sidebar ┃ ┃ ┃ │
23+
│ ┃ ┃ ┃ ┏━━━━━━━━━━━━━━━━━┓ ┃ ┃ ┃ │
24+
│ ┃ ┃ ┃ ┃ ul ▶ padding: 0 ┣━━━━━━━━ Make flush with parent.
25+
│ ┃ ┃ ┃ ┗━━━━━━━━━━━━━━━━━┛ ┃ ┃ ┃ │
26+
│ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ │
27+
│ ┃ ┃ ┏━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ │
28+
│ ┃ ┃ ┃ .main ┃ ┃ ┃ │
29+
│ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ │
30+
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
31+
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
32+
│ ┃ ┃ footer ┃ ┃ │
33+
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
34+
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
35+
└─────────────────────────────────┘
36+
*/
1037

38+
// Everything inherits border-box sizing
39+
// https://css-tricks.com/box-sizing
1140
html {
12-
height: 100%;
1341
box-sizing: border-box;
14-
}
1542

16-
*, *:before, *:after {
17-
box-sizing: inherit; // https://css-tricks.com/box-sizing/
43+
*, *:before, *:after {
44+
box-sizing: inherit;
45+
}
1846
}
1947

2048
body {
21-
.flex-mixin;
22-
width: 100%;
23-
height: 100vh;
2449
margin: auto;
25-
flex-direction: column;
26-
justify-content: space-between;
2750
font-family: @defaultFontFamily;
2851
}
2952

30-
header, footer {
31-
width: 100%;
32-
flex-shrink: 0; // retain height
53+
// Consistent content padding
54+
header, footer, .sidebar, .main {
55+
padding-left: 25px;
56+
padding-right: 25px;
3357
}
3458

3559
.content {
36-
flex-grow: 1; // fill space vertical
37-
flex-shrink: 1; // IE10 sets flex-shrink to 0
60+
// Navigation list flush with parent
61+
.sidebar {
62+
ul {
63+
padding: 0;
64+
}
3865

39-
@media @desktops {
40-
.flex-mixin;
41-
overflow: auto; // scroll .content when .main overflows
42-
}
66+
li {
67+
list-style-type: none;
4368

44-
.sidebar {
45-
overflow: auto; // scroll .sidebar when <ul> overflows
46-
flex-shrink: 0; // retain width
69+
li {
70+
padding-left: 25px;
71+
}
4772

48-
.current>a {
49-
font-weight: bold;
73+
.current>a {
74+
font-weight: bold;
75+
}
5076
}
5177
}
5278

5379
.main {
54-
flex-grow: 1; // fill space horizontal
55-
flex-shrink: 1;
56-
padding-left: 25px;
57-
padding-right: 25px;
5880
overflow-x: hidden; // hide <pre> code overflow
5981
}
60-
}
82+
}
83+
84+
/*
85+
Desktop:
86+
┌──────────────────────────────────────────────────────┐
87+
│ html ▶ height: 100% ├ Get window height.
88+
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
89+
│ ┃ body ▶ height: 100%, ┣━━ Use html/window height.
90+
│ ┃ flex-direction: column ┣━━ Children are in column.
91+
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
92+
│ ┃ ┃ header ▶ flex: none ┣━━━━ Use content height.
93+
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
94+
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
95+
│ ┃ ┃ .content ▶ flex: auto, ┣━━━━ Fill remaining height.
96+
│ ┃ ┃ flex-direction: row ┃ ┃ │ Children are in a row.
97+
│ ┃ ┃ ┏━━━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ │
98+
│ ┃ ┃ ┃ .sidebar ▼ ┃ ┃ .main ▼ ┃ ┃ ┃ │
99+
│ ┃ ┃ ┃ flex: none, ┃ ┃ flex: auto ┃ ┃ ┃ │
100+
│ ┃ ┃ ┃ overflow-y: auto ┃ ┃ overflow-y: auto ┃ ┃ ┃ │
101+
│ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ │
102+
│ ┃ ┃ ┣ Use content width. ┃ ┣ Fill width. ┃ ┃ ┃ │
103+
│ ┃ ┃ ┣ Fill height. ┃ ┣ Fill height. ┃ ┃ ┃ │
104+
│ ┃ ┃ ┣ Scroll vertical. ┃ ┣ Scroll vertical. ┃ ┃ ┃ │
105+
│ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━┛ ┗━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ │
106+
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
107+
│ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ │
108+
│ ┃ ┃ footer ▶ flex: none ┣━━━━ Use content height.
109+
│ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ │
110+
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
111+
└──────────────────────────────────────────────────────┘
112+
*/
113+
114+
// Flexbox bugs: https://github.com/philipwalton/flexbugs
115+
116+
.flex {
117+
display: -webkit-box;
118+
display: -webkit-flex;
119+
display: -moz-box;
120+
display: -ms-flexbox;
121+
display: flex;
122+
}
123+
124+
.flex-row {
125+
.flex;
126+
-webkit-box-orient: horizontal;
127+
-webkit-box-direction: normal;
128+
-webkit-flex-direction: row;
129+
-moz-box-orient: horizontal;
130+
-moz-box-direction: normal;
131+
-ms-flex-direction: row;
132+
flex-direction: row;
133+
}
134+
135+
.flex-column {
136+
.flex;
137+
-webkit-box-orient: vertical;
138+
-webkit-box-direction: normal;
139+
-webkit-flex-direction: column;
140+
-moz-box-orient: vertical;
141+
-moz-box-direction: normal;
142+
-ms-flex-direction: column;
143+
flex-direction: column;
144+
}
145+
146+
// flex: 0 1 auto;
147+
.flex-initial {
148+
-webkit-box-flex: 0;
149+
-webkit-flex: 0 1 auto;
150+
-moz-box-flex: 0;
151+
-ms-flex: 0 1 auto;
152+
flex: 0 1 auto;
153+
}
154+
155+
// flex: 1 1 auto;
156+
.flex-auto {
157+
-webkit-box-flex: 1;
158+
-webkit-flex: 1 1 auto;
159+
-moz-box-flex: 1;
160+
-ms-flex: 1 1 auto;
161+
flex: 1 1 auto;
162+
}
163+
164+
// flex: 0 0 auto;
165+
.flex-none {
166+
-webkit-box-flex: 0;
167+
-webkit-flex: 0 0 auto;
168+
-moz-box-flex: 0;
169+
-ms-flex: 0 0 auto;
170+
flex: 0 0 auto;
171+
}
172+
173+
@media @desktops {
174+
// flex elements fill this space and scroll themselves
175+
html, body {
176+
width: 100%;
177+
height: 100%;
178+
}
179+
180+
body {
181+
.flex-column; // flex column immediate children
182+
}
183+
184+
header, footer {
185+
.flex-none; // use content height
186+
}
187+
188+
.content {
189+
.flex-auto; // fill remaining height
190+
191+
.flex-row; // flex row immediate children
192+
193+
// Note: Don't add border, padding or margin to a flex-row or flex-column,
194+
// because IE 10-11 incorrectly assumes content-box sizing for flex-basis.
195+
196+
.sidebar {
197+
.flex-none; // use content width
198+
overflow-y: auto; // scroll vertically
199+
}
200+
201+
.main {
202+
.flex-auto; // fill remaining width
203+
overflow-y: auto; // scroll vertically
204+
}
205+
}
206+
}

‎site/default/static/styles/variables.less

Lines changed: 5 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,15 @@
11
/**
22
* @stylesheet variables.less Variables
3-
* @parent Styles.theme 0
3+
* @parent bit-docs/theme
44
*
5-
* @description
6-
* Variables hold all sorts of site-wide visual configurations. This site has color palettes, logo images, and font declarations set, which are demo'd throughout this live style guide.
7-
**/
5+
* @description Variables to hold site-wide visual configurations.
6+
*/
87

9-
// Variables used to set the font appearance.
8+
// Font appearance
109

1110
@defaultFontFamily: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
12-
@defaultFontWeight: 300;
13-
14-
15-
/**
16-
* @styles color-palette Color Palette
17-
*
18-
* @description
19-
* Variables used to define the site's color palette.
20-
* @iframe demos/color-palette.html 630
21-
**/
22-
@night: #000000;
23-
@darkSkies: #484848;
24-
@thunderStorm: #706f70;
25-
@cloud: #999999;
26-
@haze: #cccccc;
27-
@fog: #eae9e9;
28-
@clear: #ffffff;
29-
@nigthRain: #165489;
30-
@rain: #1f54c6;
31-
@sunrise: #f7f8c3;
32-
@sunset: #d9534f;
33-
34-
35-
// Variables used to define color on text elements.
36-
37-
@colorHeader: @darkSkies;
38-
@colorLinks: @rain;
39-
@colorCode: @sunrise;
40-
@colorNav: @darkSkies;
41-
@colorSignature: @darkSkies;
42-
@fontColorParamsReturns: @fog;
43-
44-
45-
// Variables used to set the color on containers and other elements.
46-
47-
@pageBackground: @fog;
48-
@sidebarBackground: @haze;
49-
@colorTags: @darkSkies;
50-
@footerHeight: 80px;
51-
@headerHeight: 54px;
52-
@colorParamsReturns: @darkSkies;
53-
54-
55-
// Variables used to set the color on code syntax.
56-
57-
@pp-bg: @fog;
58-
59-
@str-color: #dd1144;
60-
@kwd-color: #333333;
61-
@com-color: #999988;
62-
@type-color: #445588;
63-
@lit-color: #445588;
64-
@pun-color: #333333;
65-
@opn-color: #333333;
66-
@clo-color: #333333;
67-
@tag-color: #navy;
68-
@atn-color: #teal;
69-
@atv-color: #dd1144;
70-
@dec-color: #333333;
71-
@var-color: #teal;
72-
@fun-color: #990000;
73-
74-
75-
// Variables used to set the color on elements when printed or projected.
76-
77-
@str-color-pp: #006600;
78-
@kwd-color-pp: #006;
79-
@com-color-pp: #600;
80-
@typ-color-pp: #404;
81-
@lit-color-pp: #004444;
82-
@pun-color-pp: #444400;
83-
@opn-color-pp: #444400;
84-
@clo-color-pp: #444400;
85-
@tag-color-pp: #006;
86-
@atn-color-pp: #440044;
87-
@atv-color-pp: #006600;
88-
89-
90-
// Variables used to set a logo on the header and on the footer
91-
92-
@logo: "../img/logo.svg";
93-
@logoFooter: "../img/logo-grey.svg";
94-
@logoWidth: 170px;
9511

9612
// Breakpoints for use with @media
9713

9814
@smartphones: ~"only screen and (max-width: 767px)";
99-
@desktops: ~"only screen and (min-width: 767px)";
15+
@desktops: ~"only screen and (min-width: 767px)";

0 commit comments

Comments
 (0)