Skip to content

Commit 1e29c20

Browse files
CITguyCITguy
authored
Merge pull request #81 from rackerlabs/remove-bs-dependency
Remove bs dependency
2 parents d2db24a + d6648a2 commit 1e29c20

File tree

9 files changed

+277
-179
lines changed

9 files changed

+277
-179
lines changed

‎source/_less/scaffold.less‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
/* ===== SCAFFOLD ===== */
22
html {
33
font-family: "Roboto", sans-serif;
4+
font-size: 16px;
45
}
56

67
figure {
78
// TODO: update this once spacing system is defined
89
margin-bottom: 1rem;
910
}
11+
12+
// TODO move to lists
13+
ul {
14+
list-style-type: square;
15+
}
16+
ul ol,
17+
ul ul,
18+
ol ol
19+
ol ul {
20+
margin-bottom: 0;
21+
}
22+
dd,
23+
dt {
24+
line-height: 1.5;
25+
}

‎source/_templates/partials/after_footer.njk‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
<!-- intelligently load ES5 Adapter (if needed) -->
2+
<span id="ce-es5-adapter">
3+
<script>
4+
if (!window.customElements) {
5+
var elAdapter = document.querySelector('#ce-es5-adapter');
6+
elAdapter.parentElement.removeChild(elAdapter);
7+
}
8+
</script>
9+
<script src="https://ab2b55b0a26bb32fdc01-2c8b94bcec8e01c366189541a4035ea4.ssl.cf5.rackcdn.com/custom-elements-es5-adapter.js"></script>
10+
</span>
11+
112
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
213
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
314
crossorigin="anonymous"></script>

‎source/_templates/partials/head.njk‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,9 @@
1212
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
1313
crossorigin="anonymous">
1414

15-
<link rel="stylesheet" href="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/css/bootstrap.helix.css">
1615
<link rel="stylesheet" href="helix-ui.css">
1716
<link rel="stylesheet" href="docs.css">
1817

19-
<!-- ES5 Adapter -->
20-
<script src="https://ab2b55b0a26bb32fdc01-2c8b94bcec8e01c366189541a4035ea4.ssl.cf5.rackcdn.com/custom-elements-es5-adapter.js"></script>
2118
<!-- Polyfill Loader -->
2219
<script src="https://ab2b55b0a26bb32fdc01-2c8b94bcec8e01c366189541a4035ea4.ssl.cf5.rackcdn.com/webcomponents-loader.js"></script>
2320
</head>

‎source/components/grid/index.html‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,16 @@ <h3 class="hxSubSectionTitle" id="bootstrap">Bootstrap Compatibility</h3>
3636

3737
<section>
3838
<h3 class="hxSubSectionTitle" id="automatic">Automatic Columns</h3>
39-
<div class="alert alert-info">
40-
<p>
41-
<b>NOTE:</b> Automatic columns are overridden by <a href="#responsive">responsive classes</a>.
42-
</p>
39+
<div class="hxAlert">
40+
<div class="hxAlert__icon">
41+
<hx-icon type="info-circle"></hx-icon>
42+
</div>
43+
<div class="hxAlert__text">
44+
<span class="hxAlert__status">NOTE</span>
45+
Automatic columns are overridden by <a href="#responsive">responsive classes</a>.
46+
</div>
4347
</div>
48+
<br />
4449

4550
<p>
4651
Automatic columns will share row width equally among other automatic columns.
@@ -93,12 +98,17 @@ <h3 class="hxSubSectionTitle" id="automatic">Automatic Columns</h3>
9398

9499
<section>
95100
<h3 class="hxSubSectionTitle" id="explicit">Explicit Columns</h3>
96-
<div class="alert alert-info">
97-
<p>
98-
If the sum of a row's columns exceeds 12, the columns will wrap.
101+
<div class="hxAlert">
102+
<div class="hxAlert__icon">
103+
<hx-icon type="info-circle"></hx-icon>
104+
</div>
105+
<div class="hxAlert__text">
106+
<span class="hxAlert__status">NOTE</span>
107+
If the sum of a row's columns exceeds 12, the columns will wrap.<br />
99108
See <a href="#wrapping">Column Wrapping</a> for more details.
100-
</p>
109+
</div>
101110
</div>
111+
<br />
102112

103113
<p>
104114
Explicit columns will take up a defined percentage of the row.
@@ -183,12 +193,17 @@ <h3 class="hxSubSectionTitle" id="explicit">Explicit Columns</h3>
183193

184194
<section>
185195
<h3 class="hxSubSectionTitle" id="nesting">Nesting Elements</h3>
186-
<div class="alert alert-info">
187-
<p>
188-
<b>Do not apply row and column classes to the same element.</b>
196+
<div class="hxAlert hxAlert--warning">
197+
<div class="hxAlert__icon">
198+
<hx-icon type="exclamation-triangle"></hx-icon>
199+
</div>
200+
<div class="hxAlert__text">
201+
<span class="hxAlert__status">Warning</span>
202+
Do not apply row and column classes to the same element.<br />
189203
Rows and columns must be nested within one another.
190-
</p>
204+
</div>
191205
</div>
206+
<br />
192207

193208
<p>
194209
You can nest rows and columns as deep as necessary. Gutters will align automatically.
@@ -369,11 +384,16 @@ <h3 class="hxSubSectionTitle" id="reordering">Reordering Columns</h3>
369384

370385
<section>
371386
<h3 class="hxSubSectionTitle" id="responsive">Responsive Layout</h3>
372-
<div class="alert alert-info">
373-
<p>
387+
<div class="hxAlert">
388+
<div class="hxAlert__icon">
389+
<hx-icon type="info-circle"></hx-icon>
390+
</div>
391+
<div class="hxAlert__text">
392+
<span class="hxAlert__status">NOTE</span>
374393
Responsive column classes override <a href="#automatic">automatic columns</a>.
375-
</p>
394+
</div>
376395
</div>
396+
<br />
377397

378398
<p>
379399
Each responsive class corresponds to the <em>minimum breakpoint</em>
@@ -537,12 +557,17 @@ <h3 class="hxSubSectionTitle" id="wrapping">Column Wrapping</h3>
537557

538558
<section>
539559
<h3 class="hxSubSectionTitle" id="styling">Styling the Grid</h3>
540-
<div class="alert alert-info">
541-
<p>
542-
<b>Avoid styling rows and columns.</b>
560+
<div class="hxAlert">
561+
<div class="hxAlert__icon">
562+
<hx-icon type="info-circle"></hx-icon>
563+
</div>
564+
<div class="hxAlert__text">
565+
<span class="hxAlert__status">NOTE</span>
566+
Avoid styling rows and columns.<br />
543567
Add a container within a column to apply styling.
544-
</p>
568+
</div>
545569
</div>
570+
<br />
546571

547572
<p>
548573
Because styles for rows and columns are meticulously defined to support

‎source/components/icon/index.html‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,10 @@
66
---
77
{% extends 'component.njk' %}
88
{% block content %}
9-
<div class="alert alert-info">
10-
You will need to include both <code>helix-ui.css</code> and <code>helix-ui.js</code>
11-
in your application to use Icons. Please read the
12-
<a href="/helix-ui/guides/install#web-components">installation guide</a> for more details.
13-
</div>
149

1510
<p>
16-
The <code>&lt;hx-icon&gt;</code> element takes advantage of HTML
17-
<a href="https://www.webcomponents.org/" target="_blank">Web Components</a>
18-
to deliver consistent, stylable, icons for use in Helix applications across
19-
IE 11, Edge, Chrome, Firefox, and Safari.
11+
The <code>&lt;hx-icon&gt;</code> element delivers consistent, stylable,
12+
icons for use in Helix applications.
2013
</p>
2114

2215
<section>
@@ -56,10 +49,18 @@ <h2 class="hxSectionTitle" id="syntax">Example</h2>
5649

5750
<section>
5851
<h2 class="hxSectionTitle" id="styling">Styling</h2>
59-
<div class="alert alert-info">
60-
Icons inherit the <code>color</code> and <code>background-color</code>
61-
of their parent.
52+
<div class="hxAlert">
53+
<div class="hxAlert__icon">
54+
<hx-icon type="info-circle"></hx-icon>
55+
</div>
56+
<div class="hxAlert__text">
57+
<span class="hxAlert__status">NOTE</span>
58+
Icons inherit the <code>color</code> and <code>background-color</code>
59+
of their parent.
60+
</div>
6261
</div>
62+
<br />
63+
6364
<p>
6465
Styling Icons is similar to styling text. You can change properties like,
6566
<code>font-size</code>, <code>color</code>, <code>background-color</code>,

‎source/components/navigation/index.html‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,66 +7,8 @@
77
---
88
{% extends 'component.njk' %}
99
{% block content %}
10-
<section>
11-
<h2 class="hxSectionTitle" id="global-nav">Global Navigation</h2>
12-
<p>
13-
(<em>a.k.a. "Eyebrow"</em>)
14-
Styles the <a href="http://getbootstrap.com/components/#navbar">Navbar Component</a> from Bootstrap.
15-
</p>
16-
17-
<div class="demo">
18-
<nav class="navbar navbar-eyebrow">
19-
<div class="navbar-header">
20-
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#eyebrow-collapse">
21-
<span class="sr-only">Toggle navigation</span>
22-
<span class="icon-bar"></span>
23-
<span class="icon-bar"></span>
24-
<span class="icon-bar"></span>
25-
</button>
26-
<a class="navbar-brand" href="#">
27-
<img src="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/img/rs-logo-white.svg" alt="Rackspace Logo" />
28-
</a>
29-
</div>
30-
<div id="eyebrow-collapse" class="navbar-collapse collapse">
31-
<ul class="nav navbar-nav">
32-
<li><a href="#">Rackspace Cloud</a></li>
33-
</ul>
34-
<ul class="nav navbar-nav navbar-right">
35-
<li class="active"><a href="#">Support</a></li>
36-
<li class="dropdown">
37-
<a href="#" class="dropdown-toggle"
38-
data-toggle="dropdown"
39-
role="button"
40-
aria-haspopup="true"
41-
aria-expanded="false">
42-
43-
myUserName <span class="caret"></span>
44-
</a>
45-
<ul class="dropdown-menu">
46-
<li><a href="#">Account #123456</a></li>
47-
<li role="separator" class="divider"></li>
48-
<li><a href="#">My Profile &amp; Settings</a></li>
49-
<li role="separator" class="divider"></li>
50-
<li class="dropdown-header">Rackspace</li>
51-
<li><a href="#">Billing Overview</a></li>
52-
<li><a href="#">Account Settings</a></li>
53-
<li><a href="#">User Management</a></li>
54-
<li><a href="#">Documents and Forms</a></li>
55-
<li role="separator" class="divider"></li>
56-
<li><a href="#">Logout</a></li>
57-
</ul>
58-
</li>
59-
</ul>
60-
</div><!--/.nav-collapse -->
61-
</nav>
62-
</div>
63-
</section>
64-
6510
<section>
6611
<h2 class="hxSectionTitle" id="app-nav">Application Navigation</h2>
67-
<p>
68-
Custom HelixUI classes for styling a left-hand, application layer, navigation list.
69-
</p>
7012

7113
<div class="demo">
7214
<nav class="hxApp__nav">

‎source/components/table/table.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
// Table style reset
99
table {
1010
background-color: transparent;
11+
border-collapse: collapse;
12+
border-spacing: 0;
1113
border: none;
1214
font-size: 1rem; // 16px
1315
margin: 0;
@@ -36,6 +38,7 @@ table {
3638
line-height: 1;
3739
margin: 0;
3840
padding: 0;
41+
text-align: left;
3942
}
4043
}
4144
}

‎source/components/typography/typography.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ h3,
1313
h4,
1414
h5,
1515
h6 {
16+
font-weight: 400;
1617
line-height: 1;
1718
margin: 0;
1819
}

0 commit comments

Comments
 (0)