forked from headjs/headjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (144 loc) · 5.92 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
162
163
164
165
166
167
168
169
170
171
---
layout: main
title: Head.JS, the only script in your HEAD
---
<div itemprop="description">
<div class="intro">
HeadJS, a small library for Responsive Design, Feature Detections & Resource Loading
</div>
<h2>When you need a quick cross-browser compatible hand, don't bang your head. HeadJS is here to help you out !</h2>
<ul>
<li>Speed up your apps: Load JS & CSS asyncronously and in parallel, but execute them in order</li>
<li>Load one asset if a condition is met, else fallback and load a different one</li>
<li>Manage script dependencies, and execute callbacks once they are loaded</li>
<li>Cross-browser compatible « pseudo media-queries » let you code against different resolutions & devices</li>
<li>Fix quirks in specific browsers by quickly applying dedicated CSS/JS logic</li>
<li>Detect various browsers & their versions</li>
<li>Check if the client supports a certain Browser, HTML5, or CSS3 feature</li>
<li>Automatically generates JS and CSS classes for browsers & features that where detected</li>
<li>Automatically generates CSS classes, to know what page or section a user is viewing</li>
<li>Know if the user is in landscape or portrait mode</li>
<li>Or whether the client is using a mobile or desktop device</li>
<li>Get old browsers to support HTML5 elements like nav, sidebar, header, footer, ...</li>
<li>...</li>
<li>
<strong>Make it, The only script in your <HEAD></strong>
<ul>
<li><em>A concise solution to universal problems</em></li>
</ul>
</li>
</ul>
<h3>Your imagination, Your limit</h3>
</div>
<hr />
<div>
<h2 >Responsive Design (Think @media-queries, and more)</h2>
<div class="intro">
Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers.
</div>
<div class="code-example" data-title="head.responsive()">
<p>Need to display an element at a specific screen size ? </p>
{% highlight js %}
/* JS */
if (head.screen.innerWidth > 800) {
document.getElementById("#side-menu").style.display = "block";
}
/* CSS */
.gt-800 #side-menu {
display: block;
}
{% endhighlight %}
<p>As you can see above, if you can write it in CSS, you can usually also write it in JavaScript.</p>
<div class="code-example" data-title="Built in">
mobile, desktop, landscape, portrait, touch, viewport height, viewport width, screen height, screen width, browser height, browser width, browser name (ie, chrome, ff, ios, android, webkit, opera), browser version, current folder, current page
</div>
</div>
<h2>Feature Detections (Like Modernizr. Just smaller, and simpler)</h2>
<div class="intro">
Detect various browsers and their features. Target HTML5 and CSS3 safely.
</div>
<div class="code-example" data-title="head.feature()">
<p>What about custom detections and device/browser features ?</p>
{% highlight css %}
/* Add a custom feature yourself */
head.feature("member", true);
/* Now use it */
if (head.member) {
document.querySelector(".member-menu").style.display = "block";
}
.member-menu {
display: block;
}
/* Use built-in detections*/
/* if the browser supports CSS3 box-shadow */
if (head.boxshadow) {
document.querySelector(".member-menu").style.boxShadow = "3px 3px 3px black";
}
/* if the browser supports CSS3 box-shadow */
.boxshadow .member-menu {
box-shadow: 3px 3px 3px black;
}
{% endhighlight %}
<p>We have a bunch of features detections built in, and if that's not enough, simply create one yourself !</p>
<ol>
<li>Desktop</li>
<li>Mobile</li>
<li>Landscape</li>
<li>Portrait</li>
<li>Retina</li>
<li>Touch</li>
<li>Transitions</li>
<li>Transforms</li>
<li>Gradients</li>
<li>Opacity</li>
<li>Textshadow</li>
<li>Multiplebgs</li>
<li>Boxshadow</li>
<li>Borderimage</li>
<li>Borderradius</li>
<li>Cssreflections</li>
<li>Fontface</li>
<li>rgba()</li>
</ol>
</div>
<h2>Resource Loading (Direct or Conditional)</h2>
<div class="intro">
Manage your library's dependencies. Load JavaScript and StyleSheets in parallel but execute them in the correct order.
</div>
<div class="code-example" data-title="head.load()">
<p>Need to quickly load a JS or CSS file ?</p>
{% highlight js %}
// Load up some JS
head.load("jQuery.js", function() {
// Call a function when done
console.log("Done loading jQuery");
});
// Load up some CSS
head.load("bootstrap.css");
{% endhighlight %}
<h4>How about something crazy like</h4>
<p>On DocumentReady, if the user is using IE8, you need to load 2 scripts, or otherwise load a different script, then wait for them to finish loading, then fire a callback, and then load/apply a stylesheet ? Yeah right..</p>
<p>Easy.</p>
{% highlight js %}
// head.ready(document, callback)
// head.test(test, success, failure, callback)
head.ready(document, function() {
head.test(
(head.browser.ie && head.browser.version === 8),
["file1.js", "file2.js"],
["other.js"],
function() {
// run callback
head.load("file1.css");
}
);
});
{% endhighlight %}
<p>Of course you can use each of those functions (ready, test, load) individually too.</p>
</div>
</div>
<div class="intro">
<strong>Make it the only script in your HEAD.</strong>
« A concise solution to universal problems »
</div>
{% include sections/download.html %}