This repository has been archived by the owner on Mar 6, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
executable file
·161 lines (141 loc) · 5.75 KB
/
index.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Base</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="dist/css/site.min.css">
</head>
<body>
<div class="container">
<header>
<h1>Getting Started</h1>
<p>This is a basic HTML template to help you get started with <a href="http://base.gs"><strong>Base</strong></a>. Apart from the grid system, Base includes a sensible reset to start styling your site on.</p>
<hr>
</header>
<section class="main">
<article>
<div class="grid-reference">
<h2>Quick Reference</h2>
<p>These quick guides will help you get started. For more detailed instructions check out the documentation.</p>
<h3>Grid <em>(_layout.scss)</em></h3>
<table>
<tr>
<th>Mixin</th>
<th>Usage</th>
</tr>
<tr>
<td>
<code>@include container()</code>
</td>
<td>
<em>Apply to an element wrapping the column structure</em>
</td>
</tr>
<tr>
<td>
<code>@include columns($columns, $offset, $gutter)</code>
</td>
<td>
<code>@include columns(8, 0, 0)</code>
</td>
</tr>
<tr>
<td>
<code>@include responsive-columns($breakpoint, $columns, $offset);</code>
</td>
<td>
<em>Apply to overwrite default breakpoint columns</em>
</td>
</tr>
</table>
</div>
<div>
<h3>Grid Settings<em>(_variables.scss)</em></h3>
<p>Grid breakpoints and settings are set in <code>_variables.scss</code></p>
<p>Check grid examples <a href="/grid.html">here</a>
</div>
<div>
<h3>Breakpoints <em>(_variables.scss)</em></h3>
<table>
<tr>
<th>Mixin</th>
<th>Usage</th>
</tr>
<tr>
<td>
<code>@include respond-to($breakpoint-name)</code>
</td>
<td>
<code>@include respond-to('mobile') { <br/> /* custom styles */ } </code>
</td>
</tr>
</table>
</div>
<div>
<h3>Buttons <em>(_buttons.scss)</em></h3>
<button>.button</button>
<button class="disabled">.button.disabled</button><br>
<button class="primary">.button-primary</button>
<button class="primary disabled">.button-primary.disabled</button><br>
<button class="secondary">.button-secondary</button>
<button class="secondary disabled">.button-secondary.disabled</button><br>
<p>Social icons are achived by prefixing icon text with:<br><code><span class="icon-[socialNework]"></code></p>
<button class="facebook"><span class="icon-facebook"></span>.button-facebook</button>
<button class="facebook disabled">.button-facebook.disabled</button><br>
<button class="twitter"><span class="icon-twitter">.button-twitter</button>
<button class="twitter disabled">.button-twitter.disabled</button><br>
<button class="huge">.button.huge</button>
</div>
<div>
<h3>Forms <em>(_forms.scss)</em></h3>
<p>All HTML5 form elements are normalized to a set of core styles.</p>
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="submit" value="Subscribe">
</form>
</div>
<div>
<h3>Mixins <em>(_mixins.scss)</em></h3>
<p>Base includes scss mixins for CSS3 properties, animations, gradients and some utility mixins. Check the source to see what's available.</p>
</div>
<div>
<h3>Type <em>(_type.scss)</em></h3>
<p>Typography is controlled in <code>_type.scss</code>. Base provides a clean and sensible reset for heading styles, paragraphs, tables, lists and others.</p>
<h3>Variables <em>(_variables.scss)</em></h3>
<p>Control colors and fonts across the site. Begins with:</p>
<ul>
<li>Heading font-family - <em>@headingFont</em></li>
<li>Paragraph font-family - <em>@paragraphFont</em></li>
<li>Text color - <em>@textColor</em></li>
<li>Base color - <em>@baseColor</em></li>
<li>Primary color - <em>@primaryColor</em></li>
<li>Secondary color - <em>@secondaryColor</em></li>
</ul>
</div>
</article>
<aside>
<h2>Resources</h2>
<h4>Documentation</h4>
<p>More detailed documentation is available on the <a href="https://github.com/agency/base" target="_blank">GitHub repo</a>.</p>
<h4>CSS Compiler</h4>
<p>Base includes Grunt configuration and tasks to watch and compile scss files. With <a href="http://nodejs.org/download/" target="_blank">npm</a> installed, navigate to the Base directory in command line and run <code>npm install</code> then <code>grunt dev</code>.</p>
<h4>Sidebar Content</h4>
<p>This is a sidebar block to demonstrate a basic Base grid. Change the columns in <code>_layout.scss</code> and resize the page to see how the compiled responsive files work</p>
</aside>
</section>
<footer>
<hr>
<p>Base is maintained by the team at <a href="https://twitter.com/agencysc">@agencysc</a> and distributed under the <a href="https://github.com/agency/base/blob/master/LICENSE">Apache 2.0 license</a>.</p>
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dist/js/site.js"></script>
</body>
</html>