/
demo5.html
224 lines (163 loc) · 10.4 KB
/
demo5.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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Header Grab Bag - Because Community</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="includes/vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="includes/vendors/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="includes/css/styles.css">
<link rel="stylesheet" href="includes/css/header-5.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,700,300italic,400italic,500,500italic' rel='stylesheet' type='text/css'>
</head>
<body>
<header id="navigation">
<div class="logo-nav-wrap">
<div class="logo-wrap">
<a href="index.html">
<img src="includes/images/logo-dark.png" class="logo" />
<img src="includes/images/logo-dark.png" class="logo-alt" />
</a>
</div>
<div class="nav-wrap">
<nav class="clearfix" role="navigation">
<ul class="nav-menu-list">
<li><a href="index.html">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#demos">Demos</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="http://github.com/alexanderlperez/headergrabbag">Fork on Github</a></li>
<li><a href="/index.php">Back to Blog</a></li>
</ul>
</nav>
</div>
</div>
<div class="mobile-toggle-wrap" role="button" tabindex="0" aria-label="Toggle Navigation">
<ul class="mobile-toggle-btn"><li></li><li></li><li></li></ul>
</div>
</header>
<main id="main" class="group" role="main">
<div class="hero full-screen" data-hero-bg="includes/images/hero-bg.jpg" data-offset="200" style="overflow: hidden; padding-top: 100px; display: table; width: 100%;">
<div style="text-align: center; display: table-cell; vertical-align: middle;">
<h1 class="body-font" style="color: #fff; font-size: 100px;">
Header Grab Bag
</h1>
<h2 style="color: #fff; font-size: 48px;">
A selection of useful header templates
</h2>
</div>
</div>
<div class="container">
<div class="row" style="padding-top: 60px; padding-bottom: 60px;">
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
<h1 style="text-align:center;">Get your site going with these fantastic headers</h1>
<br/>
<p>
I spent a bit of time putting these together, but since the project they'd be used on is now defunct, huzzah! Let's share!
Clone this repo using Git like so:
<br />
<pre>git clone http://github.com/alexanderlperez/headergrabbag.git</pre>
</p>
<br/>
<div class="col-xs-8 col-sm-8 col-md-6" style="float: none; display: block; margin: 0 auto;">
<blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p lang="en" dir="ltr">Front-end ain't easy, but it's great seeing what you're doing step by step. <a href="https://twitter.com/hashtag/ship?src=hash">#ship</a> <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a> <a href="https://twitter.com/hashtag/frontend?src=hash">#frontend</a> <a href="http://t.co/ha5RDdvN2R">pic.twitter.com/ha5RDdvN2R</a></p>— Alex Perez (@lintuxvi) <a href="https://twitter.com/lintuxvi/status/640715489640099840">September 7, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<br />
<h3 id="features" data-offset="100">Features</h3>
<ul>
<li>MIT Licensed</li>
<li>10+ navigation headers included as plain HTML and CSS</li>
<li>Based on Bootstrap and Font-Awesome</li>
<li>All JS is written in straightforward jQuery</li>
<li>Configured from LESS variables</li>
<li>Compatible with <a href="http://users.tpg.com.au/j_birch/plugins/superfish/examples/">Superfish</a> jQuery menu plugin</li>
</ul>
<br />
<h2 id="demos" data-offset="100">Included Header Preset Styles</h2>
<p>Take the tour, click the links below!</p>
<ul>
<li><a href="demo1.html">Transparent Overlay</a></li>
<li><a href="demo2.html">Transparent Overlay with Contact Information</a></li>
<li><a href="demo3.html">Transparent Overlay with Social Icons</a></li>
<li><a href="demo4.html">Transparent Overlay with Social Icons and Dark Fixed Header</a></li>
<li><a href="demo5.html">Light Background Color and Semi-Opaque Fixed Header</a></li>
<li><a href="demo6.html">Light Background Color with Social Icons</a></li>
<li><a href="demo7.html">Light Background Color with Contact Information</a></li>
<li><a href="demo8.html">Light Background Color with Menu Background Hovers (half-height, un-bordered)</a></li>
<li><a href="demo9.html">Light Background Color with Menu Background Hovers (full-height, bordered)</a></li>
<li><a href="demo10.html">Dark Background Color with Social Icons</a></li>
<li><a href="demo11.html">Dark Background Color with Menu Background Hovers (full-height, un-bordered)</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
<h2 id="usage" data-offset="100">Usage</h2>
<p>If you're looking to get up and running as soon as possible, use one of the demos by taking what's in the HTML's <code><header></code> tag and incorporating it into your own markup. Then include the relevant header CSS in <code>includes/css</code>.</p>
<h3>Customizing</h3>
<p>
Before you start, make sure you have LESS installed. Try running <pre>lessc -v</pre><br/> and if it's not installed, run: <br/><br/><pre>npm install -g less</pre>
</p>
<h3>1. Edit the header.less of your choice</h3>
<p>
Take a look at the demos and use those as a base of what you'd like to customize. Go to the relevant header file (ex. <code>demo7.html</code> uses <code>includes/less/header-7.less</code>) and modify the values set in the variables. Make sure the urls to the logos are correct in the <code>header</code> tag.
</p>
<h3>2. Build the header with the LESS compiler</h3>
<p>
All the preconfigured headers are in <code>includes/less</code>. In the project's top level directory, run <code>lessc</code> on the appropriate header file:
<pre>lessc includes/less/header-#.less PATH_TO_YOUR_PROJECT_CSS_FOLDER/header.css</pre>
<br />
This will create a standalone <code>header.css</code> for you to use.
</p>
<h3>3. Include the resulting CSS file, along with adding the header code in your HTML</h3>
<p>
<code><link></code> the header.css in your page, and include the relevant <code><header></code> in your page.
The header HTML is located in the demo page.
</p>
<h3>4. Apply <code>font-family</code> styles to header elements</h3>
<p>
Modify these styles to match your font stack and add them to your site's CSS:
<pre>
.nav-menu-list a {
font-family: <your font stack>
}
.post-header-info-title,
.post-header-info-content a {
font-family: <your font stack>
}
</pre>
</p>
<h3>Enjoy!</h3>
</div>
</div>
</div>
<div class="container">
<div class="row" style="padding-top: 60px; padding-bottom: 60px;">
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
<h2>About the Author</h2>
<p>
This was put together for the community by <a href="http://twitter.com/lintuxvi">@lintuxvi</a> <i class="fa fa-twitter"></i>. Check him out on Github <a href="http://github.com/alexanderlperez"></i>@alexanderlperez</a>
</p>
</div>
</div>
</div>
</main>
<script type="text/javascript" src="includes/vendors/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="includes/vendors/match-height/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="includes/vendors/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="includes/js/scripts.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-67277184-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>