Skip to content

Commit 7645114

Browse files
author
Cathy Siller
committed
feat(layout): holy grail
1 parent ea246ec commit 7645114

File tree

7 files changed

+69
-184
lines changed

7 files changed

+69
-184
lines changed

‎source/_less/layout.less‎

Lines changed: 39 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,64 @@
1-
/* Component Explorer Layout */
2-
// TODO: refactor into helix-ui.css
3-
4-
/* ===== LAYOUT ===== */
5-
body {
6-
display: flex;
7-
flex-direction: column;
8-
min-height: 100vh;
1+
html {
2+
height: 100%;
93
}
104

11-
#global-header {
12-
//display: block;
13-
//position: -webkit-sticky;
14-
//position: sticky;
15-
//top: 0px;
16-
z-index: 10;
17-
background-color: black;
18-
}
19-
20-
.global-nav {
5+
.hxApp {
216
display: flex;
22-
flex-wrap: wrap;
23-
24-
.link,
25-
a {
26-
align-items: center;
27-
color: #bdbdbd;
28-
display: inline-flex;
29-
position: relative;
30-
white-space: nowrap;
31-
}
32-
33-
.link,
34-
a {
35-
&.current {
36-
color: #fff;
7+
flex-direction: column;
8+
height: 100%;
9+
margin: 0;
3710

38-
&::after {
39-
content: '';
40-
position: absolute;
41-
height: 4px;
42-
background-color: @red-900;
43-
bottom: 0;
44-
left: 0;
45-
width: 100%;
46-
}
47-
}
11+
&__header {
12+
background-color: @gray-1000;
13+
flex-shrink: 0;
14+
height: 3.5rem;
4815
}
4916

50-
.brand-logo {
17+
&__footer {
5118
align-items: center;
19+
background-color: @gray-950;
20+
color: @gray-300;
5221
display: flex;
53-
justify-content: center;
54-
height: 3rem;
55-
width: @app-nav-width;
22+
flex-shrink: 0;
23+
height: 2.5rem;
24+
padding: 0 20px;
5625

57-
img {
58-
height: 2rem;
26+
nav {
27+
display: inline-block;
5928
}
60-
}
61-
62-
.links {
63-
flex-wrap: wrap;
64-
flex: 1;
65-
}
66-
}
67-
68-
.footer-nav {
69-
display: flex;
70-
flex-wrap: wrap;
71-
72-
.link,
73-
a {
74-
display: inline-flex;
75-
align-items: center;
76-
white-space: nowrap;
77-
}
78-
}
79-
80-
.links {
81-
display: flex;
8229

83-
.link,
84-
a {
85-
height: 3em;
86-
padding: 0 1em;
87-
}
88-
89-
&.align-right {
90-
justify-content: flex-end;
30+
a {
31+
color: @cyan-500;
32+
margin-left: 32px;
33+
}
9134
}
92-
}
9335

94-
#app-container {
95-
flex: 1;
96-
display: flex;
97-
98-
.app-nav-container {
99-
background-color: @gray-975;
36+
&__container {
10037
display: flex;
101-
flex-direction: column;
102-
width: @app-nav-width;
38+
flex-grow: 1;
10339
flex-shrink: 0;
10440
}
10541

106-
}
107-
#app-content {
108-
padding: 20px;
109-
flex: 1;
110-
}
111-
112-
#global-footer {
113-
//flex: 0;
114-
background-color: black;
115-
color: white;
116-
}
117-
118-
.app-nav {
119-
color: @gray-600;
120-
//padding-top: 3.75rem;
121-
122-
header {
123-
padding: 10px;
124-
margin: 0;
125-
text-transform: uppercase;
126-
color: @gray-0;
127-
}
128-
129-
a {
130-
display: block;
131-
padding: 10px;
132-
margin: 0;
133-
color: inherit;
134-
135-
&.current {
136-
color: @gray-0;
137-
background-color: @gray-900;
138-
}
139-
140-
&:hover {
141-
background-color: @gray-800;
142-
color: @gray-0;
143-
text-decoration: none;
144-
}
42+
&__nav {
43+
flex-shrink: 0;
44+
order: -1;
45+
width: @app-nav-width;
14546
}
14647

147-
section a {
148-
padding-left: 1.5rem; /* 24px */
48+
&__content {
49+
flex-grow: 1;
50+
padding: 1em;
14951
}
15052
}
15153

152-
.hxNav--app {
153-
color: white;
154-
155-
.hxNavItem {
156-
display: block;
157-
padding: 10px;
158-
margin: 0;
159-
color: inherit;
54+
.brand-logo {
55+
align-items: center;
56+
display: flex;
57+
height: 3.5rem;
58+
justify-content: center;
59+
width: @app-nav-width;
16060

161-
&:hover {
162-
background-color: #757575;
163-
text-decoration: none;
164-
}
61+
img {
62+
height: 2rem;
16563
}
16664
}
167-
168-
.align-right {
169-
text-align: right;
170-
}

‎source/_templates/application.njk‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
<!DOCTYPE html>
22
<html lang="{{site.language}}">
3-
{% include 'partials/head.njk' %}
4-
<body id="top">
5-
<header id="global-header">
6-
{% include 'partials/global_nav.njk' %}
7-
</header>
3+
{% include 'partials/head.njk' %}
4+
<body class="hxApp" id="top">
5+
<header class="hxApp__header">
6+
{% include 'partials/global_nav.njk' %}
7+
</header>
88

9-
<div id="app-container">
10-
<div class="app-nav-container">
11-
{% include 'partials/app_nav.njk' %}
12-
</div>
9+
<div class="hxApp__container">
10+
<main class="hxApp__content">
11+
{% block layout %}
12+
{# compiled content goes here #}
13+
{% endblock %}
14+
</main>
15+
<nav class="hxApp__nav">
16+
{% include 'partials/app_nav.njk' %}
17+
</nav>
18+
</div>
1319

14-
<main id="app-content">
15-
{% block layout %}
16-
{# compiled content goes here #}
17-
{% endblock %}
18-
</main>
19-
</div>
20+
<footer class="hxApp__footer">
21+
{% include 'partials/footer_nav.njk' %}
22+
</footer>
2023

21-
<footer id="global-footer">
22-
{% include 'partials/footer_nav.njk' %}
23-
</footer>
24-
25-
{% include 'partials/after_footer.njk' %}
26-
</body>
24+
{% include 'partials/after_footer.njk' %}
25+
</body>
2726
</html>

‎source/_templates/partials/app_nav.njk‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@
2727
</hx-reveal>
2828
{% endmacro %}
2929

30-
<nav class="hx-app-nav">
31-
{% for category,items in data.nav %}
32-
{{ navSection(category, items) }}
33-
{% endfor %}
34-
</nav>
30+
{% for category,items in data.nav %}
31+
{{ navSection(category, items) }}
32+
{% endfor %}

‎source/_templates/partials/footer_nav.njk‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<nav class="footer-nav">
2-
<div class="links">
3-
<a href="#">v0000-00-00</a>
4-
</div>
1+
&copy; 2017 Rackspace US, Inc.
2+
<nav>
3+
<a href="https://www.rackspace.com/information/legal/websiteterms">Website Terms</a>
4+
<a href="https://www.rackspace.com/information/legal/privacystatement">Privacy Policy</a>
55
</nav>

‎source/_templates/partials/global_nav.njk‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22
<a class="brand-logo" href="">
33
<img src="images/helix-logo.svg" alt="Logo" />
44
</a>
5-
<div class="links">
6-
{% if page.title %}
7-
<a class="current">{{page.title}}</a>
8-
{% endif %}
9-
</div>
105
</nav>

‎source/components/navigation/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h2 id="app-nav">Application Navigation</h2>
6969
</p>
7070

7171
<div class="demo">
72-
<nav class="hx-app-nav">
72+
<nav class="hxApp__nav">
7373
<a href="#">Link 1-1</a>
7474
<a href="#">Link 1-2</a>
7575
<a href="#">Link 1-3</a>
@@ -94,7 +94,7 @@ <h2 id="app-nav">Application Navigation</h2>
9494
</nav>
9595
</div>
9696
{% code %}html
97-
<nav class="hx-app-nav">
97+
<nav class="hxApp__nav">
9898
<a href="#">Link 1-1</a>
9999
<a href="#">Link 1-2</a>
100100
<a href="#">Link 1-3</a>

‎source/components/navigation/navigation.less‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.hx-app-nav {
1+
.hxApp__nav {
22
@vpad: 0.5rem;
33
@rpad: 0.75rem;
44

@@ -11,7 +11,6 @@
1111
background-color: @gray-975;
1212
color: @gray-400;
1313
font-size: 0.875rem; /* ~14px */
14-
height: 100%; // full height of container
1514
letter-spacing: 0.75px;
1615
padding-top: 2rem;
1716
width: 15rem; /* ~240px */

0 commit comments

Comments
 (0)