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

Commit ddcbc4c

Browse files
bradfrostbradfrost
committed
Pattern Code View
-Restructured pattern wrapper HTML in order to extract code view. - Added HTML header - Added CSS header and placeholder for CSS content - Added "This pattern contains…" placeholder for lineage - Style changes
1 parent bc093aa commit ddcbc4c

File tree

6 files changed

+101
-71
lines changed

6 files changed

+101
-71
lines changed

‎public/styleguide/css/styleguide.css

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -401,35 +401,27 @@
401401
/*------------------------------------*\
402402
$STYLE GUIDE CONTENT
403403
\*------------------------------------*/
404-
/* Section Head */
405-
.sg-head {
406-
margin: 2em 0;
407-
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
408-
font-size: 70%;
409-
font-weight: normal;
410-
padding: 1em 0; }
411-
.sg-head a {
412-
display: block;
413-
border-bottom: 1px solid #222222;
414-
color: #222;
415-
text-decoration: none; }
416-
.sg-head a:hover {
417-
color: gray;
418-
border-bottom-color: gray; }
419-
420404
/* Section Pattern */
421405
.sg-pattern {
422406
margin-bottom: 2em;
423407
padding: 0 1em;
424408
overflow: hidden; }
425409

426-
/* Section Sub-head */
427-
.sg-sub a:link {
428-
color: gray;
429-
border-bottom-color: gray; }
430-
.sg-sub a:link:hover {
431-
color: #222222;
432-
border-bottom-color: #222222; }
410+
/* Section Head */
411+
.sg-pattern-head {
412+
margin: 2em 0;
413+
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
414+
font-size: 70%;
415+
font-weight: normal;
416+
padding: 1em 0;
417+
border-bottom: 1px solid gray; }
418+
.sg-pattern-head a {
419+
display: block;
420+
color: gray;
421+
text-decoration: none;
422+
cursor: pointer; }
423+
.sg-pattern-head a:hover {
424+
color: #222222; }
433425

434426
/* Clean View */
435427
.sg-clean .sg-main {
@@ -439,15 +431,32 @@
439431
clear: both;
440432
background: #dddddd;
441433
color: #222222;
442-
padding: 1em;
434+
padding: 1em 0.5em;
443435
margin: 1em 0; }
444436

445-
.sg-code {
446-
white-space: -moz-pre-wrap;
447-
white-space: -pre-wrap;
448-
white-space: -o-pre-wrap;
437+
.sg-code pre {
438+
white-space: -moz-pre-line;
439+
white-space: -pre-line;
440+
white-space: -o-pre-line;
449441
word-wrap: break-word;
450-
white-space: pre-wrap; }
442+
white-space: pre-line;
443+
border: 1px solid rgba(0, 0, 0, 0.1);
444+
padding: 0.5em; }
445+
446+
.sg-code-contains {
447+
margin-bottom: 1rem;
448+
font-size: 85%;
449+
color: gray; }
450+
.sg-code-contains code {
451+
padding: 0.2em;
452+
background: rgba(0, 0, 0, 0.3);
453+
color: #f7f7f7;
454+
position: relative;
455+
top: -2px; }
456+
457+
.sg-code-head {
458+
color: gray;
459+
font-size: 1em; }
451460

452461
.demo {
453462
overflow: hidden;

‎public/styleguide/css/styleguide.scss

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ $sg-font-size-large : 120%;
6767
$sg-space : 1em;
6868
$sg-doublespace : $sg-space*2;
6969
$sg-pad : 1em;
70-
$sg-halfpad : $sg-pad/2;
70+
$sg-pad-half : $sg-pad/2;
7171

7272
/* Dimensions */
7373
$offset-top: 2em;
@@ -150,7 +150,7 @@ $animate-quick: 0.2s;
150150
box-shadow: inset 0 1px 0 #5f6164,inset 0 -1px 0 #2e2f2f,0 1px 3px rgba(0,0,0,0.3);
151151

152152
* {
153-
-moz-box-sizing: border-box;
153+
-moz-box-sizing: border-box;
154154
-webkit-box-sizing: border-box;
155155
box-sizing: border-box;
156156
}
@@ -593,44 +593,34 @@ $animate-quick: 0.2s;
593593
$STYLE GUIDE CONTENT
594594
\*------------------------------------*/
595595

596+
/* Section Pattern */
597+
.sg-pattern {
598+
margin-bottom: $sg-doublespace;
599+
padding: 0 $sg-pad;
600+
overflow: hidden;
601+
}
602+
596603
/* Section Head */
597-
.sg-head {
604+
.sg-pattern-head {
598605
margin: $sg-doublespace 0;
599606
font-family: $sg-font;
600607
font-size: $sg-font-size-sm;
601608
font-weight: normal;
602609
padding: $sg-pad 0;
610+
border-bottom: 1px solid $sg-secondary;
603611

604612
a {
605613
display: block;
606-
border-bottom: 1px solid $sg-primary;
607-
color: #222;
614+
color: $sg-secondary;
608615
text-decoration: none;
616+
cursor: pointer;
609617

610618
&:hover {
611-
color: $sg-secondary;
612-
border-bottom-color: $sg-secondary;
619+
color: $sg-primary;
613620
}
614621
}
615622
}
616623

617-
/* Section Pattern */
618-
.sg-pattern {
619-
margin-bottom: $sg-doublespace;
620-
padding: 0 $sg-pad;
621-
overflow: hidden;
622-
}
623-
624-
/* Section Sub-head */
625-
.sg-sub a:link {
626-
color: $sg-secondary;
627-
border-bottom-color: $sg-secondary;
628-
&:hover {
629-
color: $sg-primary;
630-
border-bottom-color: $sg-primary;
631-
}
632-
}
633-
634624
/* Clean View */
635625
.sg-clean .sg-main {
636626
padding: 0;
@@ -642,16 +632,39 @@ $animate-quick: 0.2s;
642632
clear: both;
643633
background: $sg-tertiary;
644634
color: $sg-primary;
645-
padding: $sg-pad;
635+
padding: $sg-pad $sg-pad-half;
646636
margin: $sg-space 0;
647637
}
648638

649639
.sg-code {
650-
white-space: -moz-pre-wrap;
651-
white-space: -pre-wrap;
652-
white-space: -o-pre-wrap;
653-
word-wrap: break-word;
654-
white-space: pre-wrap;
640+
pre {
641+
white-space: -moz-pre-line;
642+
white-space: -pre-line;
643+
white-space: -o-pre-line;
644+
word-wrap: break-word;
645+
white-space: pre-line;
646+
border: 1px solid $sg-tone;
647+
padding: $sg-pad-half;
648+
}
649+
}
650+
651+
.sg-code-contains {
652+
margin-bottom: 1rem;
653+
font-size: 85%;
654+
color: $sg-secondary;
655+
656+
code {
657+
padding: 0.2em;
658+
background: $sg-tone-2;
659+
color: $sg-quinary;
660+
position: relative;
661+
top: -2px;
662+
}
663+
}
664+
665+
.sg-code-head {
666+
color: $sg-secondary;
667+
font-size: 1em;
655668
}
656669

657670
// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
@@ -663,7 +676,7 @@ $animate-quick: 0.2s;
663676
background: $sg-tertiary;
664677
color: $sg-secondary;
665678
text-align: center;
666-
margin-bottom: $sg-halfpad;
679+
margin-bottom: $sg-pad-half;
667680
padding: 1em !important;
668681

669682
&:nth-of-type(2n) {

‎public/styleguide/js/styleguide.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,7 @@
383383

384384
var $sgSrc = $sgViewport.attr('src'),
385385
$vp = $sgViewport.contents(),
386-
$sgPattern = $vp.find('.sg-pattern');
386+
$sgPattern = $vp.find('.sg-pattern-body');
387387

388388
//Code View Trigger
389389
$('#sg-t-code').click(function(e){
@@ -402,12 +402,16 @@
402402
function buildCodeView() {
403403
$sgPattern.each(function(index) {
404404
$this = $(this),
405-
$thisHTML = $this.html().replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]}),
406-
$thisCode = $( '<code></code>' ).html($thisHTML);
405+
$thisHTML = $this.html().replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]}),
406+
$codeWrapper = $('<div class="sg-code"><div class="sg-code-contains">This pattern contains: <code>atoms-logo</code> <code>molecule-primary-nav</code> <code>molecule-search-form</code></div><h3 class="sg-code-head">HTML</h3><pre class="sg-code-html"></pre><h3 class="sg-code-head">CSS</h3><pre class="sg-code-css"></pre></div>'), //Wrapper content for each pattern
407+
$htmlCode = $( '<code></code>' ).html($thisHTML), //The pattern's HTML code
408+
$cssCode = $( '<code></code>' ).html('CSS goes here'); //The pattern's CSS code
407409

408-
$('<pre class="sg-code" />').html($thisCode).appendTo($this); //Create new node, fill it with the code text, then append it to the pattern
410+
$codeWrapper.find('.sg-code-html').html($htmlCode); //Add pattern's HTML code to the HTML code container
411+
$codeWrapper.find('.sg-code-css').html($cssCode); //Add pattern's CSS code to the CSS code container
412+
$codeWrapper.appendTo($this); //Add code wrapper to the end of the pattern
409413
});
410-
$vp.find('.sg-code').show();
414+
$vp.find('.sg-code').show(); //Show all code views in the viewport
411415
}
412416

413417
});

‎source/_patternlab-files/styleguide.mustache

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,10 @@
1616
<div id="patterns">
1717
{{# partials }}
1818
<div class="sg-pattern">
19-
<h2 class="sg-head sg-sub" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20-
{{{ patternPartial }}}
19+
<h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20+
<div class="sg-pattern-body">
21+
{{{ patternPartial }}}
22+
</div>
2123
</div>
2224
{{/ partials }}
2325
</div> <!--end #patterns-->

‎source/_patternlab-files/viewall.mustache

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,10 @@
1616
<div id="patterns">
1717
{{# partials }}
1818
<div class="sg-pattern">
19-
<h2 class="sg-head sg-sub" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20-
{{{ patternPartial }}}
19+
<h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
20+
<div class="sg-pattern-body">
21+
{{{ patternPartial }}}
22+
</div>
2123
</div>
2224
{{/ partials }}
2325
</div> <!--end #patterns-->

‎source/_patterns/02-organisms/00-global/00-header.mustache

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!-- Begin .header -->
22
<header class="header cf" role="banner">
33
{{> atoms-logo }}
4-
<a href="#search-form" class="nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>
5-
<a href="#menu" class=" nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>
4+
<a href="#search-form" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>
5+
<a href="#nav" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>
66
{{> molecules-primary-nav }}
77
{{> molecules-search }}
88
</header>

0 commit comments

Comments
 (0)