forked from bjankord/Style-Guide-Boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
80 lines (72 loc) · 3.94 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?php include_once('functions.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Style Guide Boilerplate</title>
<meta name="viewport" content="width=device-width">
<!-- Style Guide Boilerplate Styles -->
<link rel="stylesheet" href="css/sg-style.css">
<!-- Replace below stylesheet with your own stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="#main" class="sg-visually-hidden sg-visually-hidden-focusable">Skip to main content</a>
<div id="top" class="sg-header sg-container">
<h1 class="sg-logo">STYLE GUIDE <span>BOILERPLATE</span></h1>
<form id="js-sg-nav" action="" method="post" class="sg-nav">
<label for="js-sg-section-switcher" class="sg-visually-hidden">Navigation</label>
<select id="js-sg-section-switcher" class="sg-section-switcher" name="sg_section_switcher">
<option value="">Jump To Section:</option>
<optgroup label="Intro">
<option value="#sg-about">About</option>
<option value="#sg-colors">Colors</option>
<option value="#sg-fontStacks">Font-Stacks</option>
</optgroup>
<optgroup label="Base HTML">
<?php listMarkupAsOptions('base'); ?>
</optgroup>
<optgroup label="Patterns">
<?php listMarkupAsOptions('patterns'); ?>
</optgroup>
</select>
<input type="hidden" name="sg_uri" value="<?php echo $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?>">
<button type="submit" class="sg-submit-btn">Go</button>
</form><!--/.sg-nav-->
</div><!--/.sg-header-->
<div id="main" class="sg-body sg-container">
<div class="sg-info">
<div class="sg-about sg-section">
<h2 class="sg-h2"><a id="sg-about" class="sg-anchor">About</a></h2>
<p>Comments and documentation about your style guide. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis enim labore facilis consequuntur! Veritatis neque est suscipit tenetur temporibus enim consequatur deserunt perferendis. Neque nemo iusto minima deserunt amet.</p>
</div><!--/.sg-about-->
<div class="sg-colors sg-section">
<h2 class="sg-h2"><a id="sg-colors" class="sg-anchor">Colors</a></h2>
<div class="sg-color sg-color--a"><span class="sg-color-swatch"><span class="sg-animated">#88ffda</span></span></div>
<div class="sg-color sg-color--b"><span class="sg-color-swatch"><span class="sg-animated">#4dd3c9</span></span></div>
<div class="sg-color sg-color--c"><span class="sg-color-swatch"><span class="sg-animated">#339db0</span></span></div>
<div class="sg-color sg-color--d"><span class="sg-color-swatch"><span class="sg-animated">#2078aa</span></span></div>
<div class="sg-color sg-color--e"><span class="sg-color-swatch"><span class="sg-animated">#3a517a</span></span></div>
<div class="sg-color sg-color--f"><span class="sg-color-swatch"><span class="sg-animated">#384355</span></span></div>
<div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div><!--/.sg-colors-->
<div class="sg-font-stacks sg-section">
<h2 class="sg-h2"><a id="sg-fontStacks" class="sg-anchor">Font Stacks</a></h2>
<p class="sg-font sg-font-primary">"HelveticaNeue", "Helvetica", Arial, sans-serif;</p>
<p class="sg-font sg-font-secondary">Georgia, Times, "Times New Roman", serif;</p>
<div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div><!--/.sg-font-stacks-->
</div><!--/.sg-info-->
<div class="sg-base-styles">
<h1 class="sg-h1">Base HTML</h1>
<?php showMarkup('base'); ?>
</div><!--/.sg-base-styles-->
<div class="sg-pattern-styles">
<h1 class="sg-h1">Patterns<small> - Design and markup patterns unique to your site.</small></h1>
<?php showMarkup('patterns'); ?>
</div><!--/.sg-pattern-styles-->
</div><!--/.sg-body-->
<script src="js/sg-plugins.js"></script>
<script src="js/sg-scripts.js"></script>
</body>
</html>