Skip to content
This repository was archived by the owner on Feb 7, 2023. It is now read-only.

Commit ab46aca

Browse files
bradfrostbradfrost
committed
Added ids to Pattern Lab html and body tags so as not to conflict with user styles. Inserted styleguide.css into head via JS
1 parent 337793d commit ab46aca

File tree

6 files changed

+51
-65
lines changed

6 files changed

+51
-65
lines changed

‎public/styleguide/css/styleguide.css

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,12 @@
4949
/*------------------------------------*\
5050
$STYLE GUIDE INTERFACE
5151
\*------------------------------------*/
52-
html, body {
52+
#patternlab-html, #patternlab-body {
5353
margin: 0;
5454
padding: 0;
5555
background: #dddddd;
5656
-webkit-text-size-adjust: 100%; }
5757

58-
html#pattern-frame {
59-
background: #fff; }
60-
6158
.sg-nav-wrapper {
6259
overflow: hidden;
6360
background: #dddddd; }
@@ -535,12 +532,7 @@ html#pattern-frame {
535532
font-weight: normal;
536533
font-style: normal; }
537534

538-
/* Use the following CSS code if you want to have a class per icon */
539-
/*
540-
Instead of a list of all class selectors,
541-
you can use the generic selector below, but it's slower:
542-
[class*="icon-"] {
543-
*/
535+
/* Pattern Lab icon fonts */
544536
.icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .sg-header .sg-nav-toggle, .icon-checkbox-unchecked, .sg-checkbox, .icon-checkbox-checked, .sg-checkbox.active, .icon-eye {
545537
font-family: 'icons';
546538
speak: none;

‎public/styleguide/css/styleguide.scss

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -105,17 +105,13 @@ $animate-quick: 0.2s;
105105
$STYLE GUIDE INTERFACE
106106
\*------------------------------------*/
107107

108-
html, body {
108+
#patternlab-html, #patternlab-body {
109109
margin: 0;
110110
padding: 0;
111111
background: $sg-tertiary;
112112
-webkit-text-size-adjust: 100%;
113113
}
114114

115-
html#pattern-frame {
116-
background: #fff;
117-
}
118-
119115
.sg-nav-wrapper {
120116
overflow: hidden;
121117
background: $sg-tertiary;
@@ -191,7 +187,7 @@ html#pattern-frame {
191187
ol{
192188
li{
193189
//3rd level nav item
194-
a{
190+
a {
195191
padding-left: 2em;
196192
text-transform: none;
197193
}
@@ -777,12 +773,7 @@ html#pattern-frame {
777773
font-style: normal;
778774
}
779775

780-
/* Use the following CSS code if you want to have a class per icon */
781-
/*
782-
Instead of a list of all class selectors,
783-
you can use the generic selector below, but it's slower:
784-
[class*="icon-"] {
785-
*/
776+
/* Pattern Lab icon fonts */
786777
.icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-checkbox-unchecked, .icon-checkbox-checked, .icon-eye {
787778
font-family: 'icons';
788779
speak: none;

‎public/styleguide/js/styleguide.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,11 @@
374374
var $sgSrc = $sgViewport.attr('src'),
375375
$vp = $sgViewport.contents(),
376376
$sgPattern = $vp.find('.sg-pattern');
377+
378+
//Inject styleguide CSS into iframe
379+
//The styleguide CSS is being injected via Javascript as to keep the user-generated source code as clean as possible.
380+
//Final code won't include any trace of Pattern Lab
381+
$vp.find("head").prepend($("<link/>", { rel: "stylesheet", href: "../../styleguide/css/styleguide.css", type: "text/css" })).prepend('<!--styleguide.css is inserted for annotation and demo purposes. Will not be included in final code. -->');
377382

378383
//Code View Trigger
379384
$('#sg-t-code').click(function(e){

‎source/_patternlab-files/index.mustache

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title id="title">Pattern Lab</title>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width" />
7-
<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />
8-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
9-
<script>window.jQuery || document.write('<script src="styleguide/js/jquery.js"><\/script>')</script>
10-
</head>
11-
<body>
12-
<!--Style Guide Header-->
13-
<header class="sg-header" role="banner">
14-
<a href="#sg-nav-container" class="sg-nav-toggle">Menu</a>
15-
<div class="sg-nav-container" id="sg-nav-container">
16-
{{> patternNav }}
17-
{{> ishControls }}
18-
</div>
19-
</header>
20-
<!--End Style Guide Header-->
2+
<html id="patternlab-html">
3+
<head id="patternlab-head">
4+
<title id="title">Pattern Lab</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width" />
7+
<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
9+
<script>window.jQuery || document.write('<script src="styleguide/js/jquery.js"><\/script>')</script>
10+
</head>
11+
<body id="patternlab-body">>
12+
<!--Style Guide Header-->
13+
<header class="sg-header" role="banner">
14+
<a href="#sg-nav-container" class="sg-nav-toggle">Menu</a>
15+
<div class="sg-nav-container" id="sg-nav-container">
16+
{{> patternNav }}
17+
{{> ishControls }}
18+
</div>
19+
</header>
20+
<!--End Style Guide Header-->
2121

22-
<!-- Iframe -->
23-
<div id="sg-vp-wrap">
24-
<div id="sg-cover"></div>
25-
<div id="sg-gen-container">
26-
<iframe id="sg-viewport" sandbox="allow-same-origin allow-scripts"></iframe>
27-
<div id="sg-rightpull-container">
28-
<div id="sg-rightpull"></div>
29-
</div>
22+
<!-- Iframe -->
23+
<div id="sg-vp-wrap">
24+
<div id="sg-cover"></div>
25+
<div id="sg-gen-container">
26+
<iframe id="sg-viewport" sandbox="allow-same-origin allow-scripts"></iframe>
27+
<div id="sg-rightpull-container">
28+
<div id="sg-rightpull"></div>
3029
</div>
3130
</div>
32-
<!--end iFrame-->
33-
34-
<script src="styleguide/js/data-saver.js"></script>
35-
{{> patternPaths }}
36-
{{> viewAllPaths }}
37-
<script src="styleguide/js/url-handler.js"></script>
38-
{{> websockets }}
39-
<script src="listeners/synclisteners.js"></script>
40-
<script src="styleguide/js/styleguide.js"></script>
41-
</body>
31+
</div>
32+
<!--end iFrame-->
33+
34+
<script src="styleguide/js/data-saver.js"></script>
35+
{{> patternPaths }}
36+
{{> viewAllPaths }}
37+
<script src="styleguide/js/url-handler.js"></script>
38+
{{> websockets }}
39+
<script src="listeners/synclisteners.js"></script>
40+
<script src="styleguide/js/styleguide.js"></script>
41+
</body>
4242
</html>

‎source/_patternlab-files/pattern-header-footer/header.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html id="pattern-frame">
2+
<html>
33
<head>
44
<title>Pattern Lab Pattern</title>
55
<meta charset="UTF-8">
@@ -9,8 +9,6 @@
99
Remember that patterns are displayed from two-levels deep (e.g. patterns/patterntype-patternsubtype-patternname/patterntype-patternsubtype-patternname.html)
1010
Therefore all calls to assets should have the ../../ in order to work in an apache-less environment
1111
-->
12-
13-
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
1412
<link rel="stylesheet" href="../../css/style.css" media="all" />
1513
</head>
1614
<body>

‎source/_patternlab-files/styleguide.mustache

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
2+
<html id="patternlab-html">
3+
<head id="patternlab-head">
44
<title>Style Guide</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width" />
77
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
88
<link rel="stylesheet" href="../../css/style.css" media="all" />
99
</head>
10-
<body>
10+
<body id="patternlab-body">
1111

1212
<!--Style Guide Main Content-->
1313
<div class="sg-main" role="main">

0 commit comments

Comments
 (0)