-
Notifications
You must be signed in to change notification settings - Fork 141
/
getting-started.html
152 lines (146 loc) · 7.68 KB
/
getting-started.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
---
redirect_from: "/getting-started.html"
navgroup: "gettingstarted"
layout: top-level
title: Getting Started
heading: Getting Started
description: An overview of Responsive, how to download and use it, basic templates and examples, and more.
subheading: An introduction to Responsive, how to use it, with basic templates and examples.
---
<div class="row">
<nav class="col-m-3" role="complementary">
<h3>Getting Started</h3>
<ul class="no-bullets">
<li><a href="#download">Download Responsive</a></li>
<li><a href="#html">The HTML</a></li>
<li><a href="#support">Browser Support</a></li>
<li><a href="#accessibility">Accessibility</a></li>
<li><a href="#right-to-left">Right-to-Left Languages</a></li>
</ul>
</nav>
<div class="col-m-9">
<div class="alert" role="alert">
<h4>Heads Up!</h4>
<p>Looking for the legacy v3 documentation? You can find it <a href="/v3/">here</a>.</p>
</div>
<section id="download">
<h1>Download Responsive</h1>
<div class="row">
<div class="col-m-6">
<p>
The simplest and fastest way to get Responsive is to download the precompiled and minified versions of our CSS, and JavaScript.
No documentation or original source code files are included.
</p>
<a href="{{site.release}}" role="button" class="download icon-left"
data-ga-category="Getting Started Actions"
data-ga-action="Getting Started Links"
data-ga-label="Framework Download"><i class="fa fa-download"></i>Download Responsive</a>
<p>
You can also install Responsive with <a href="http://bower.io" rel="external">Bower</a>:
</p>
<p><code>bower install responsive</code></p>
</div>
<div class="col-m-6">
<p>
If you are feeling more adventurous and want to tweak Responsive before use you can download the full Sass and JavaScript source
directly from Github. This will require the use of <a href="http://gulpjs.com/" rel="external">gulp.js</a> to build.
</p>
<a href="{{site.sourcefiles}}" role="button" class="download icon-left"
data-ga-category="Getting Started Actions"
data-ga-action="Getting Started Links"
data-ga-label="Source Download"><i class="fa fa-download"></i>Download Source</a>
</div>
</div>
<ul class="download-links">
<li>
<a href="{{site.repo}}" data-ga-category="Getting Started Actions" data-ga-action="Getting Started Links" data-ga-label="GitHub project" rel="external">GitHub project</a>
</li>
<li>
Version {{site.version}}
</li>
</ul>
</section>
<hr />
<section id="html">
<h1>Setting up your HTML</h1>
<p>
Inside the zip file you will also find a HTML file containing the default template for including
Responsive in your webpage.<br /> Set up your layout as follows.
</p>
<pre class="language-markup"><code><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Your Page Description." />
<title>Your Page Title</title>
<link href="responsive.min.css" rel="stylesheet" />
</head>
<body>
Your Body Content
<!-- Scripts at the bottom for improved performance. -->
<!-- jQuery, required for all responsive plugins. -->
<script src="vendor/jquery-2.1.4.min.js"></script>
<script src="responsive.min.js"></script>
</body>
</html></code></pre>
</section>
<hr />
<section id="support">
<h1>Browser Support</h1>
<p>
Responsive is built to work best in the latest desktop and mobile browsers. Everything though has been built with progressive
enhancement in mind, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
</p>
<h3>Supported browsers</h3>
<p>Specifically, latest versions of the following browsers are supported:</p>
<ul>
<li>Chrome (Mac, Windows, iOS, and Android)</li>
<li>Internet Explorer (Windows - Latest plus IE9, IE10, WP7/8)</li>
<li>Firefox (Mac, Windows)</li>
<li>Opera (Mac, Windows)</li>
<li>Safari (Mac and iOS only, as the Windows version is being abandoned)</li>
</ul>
<h2>Safari</h2>
<p>
Safari prior to v7.1 for OS X and Safari for iOS v8.0 do not calculate percentages properly and will render 12 individual columns defined using the
<code>col-{range}-1</code> classes slightly narrower than they should be. See <a href="https://github.com/ResponsiveBP/Responsive/issues/40" rel="external">#40</a>.
</p>
<p>
Unfortunately other than upgrading your browser there is not much that can be done about this without resorting to hacks to tweak the percentages using JavaScript or by using the
<code>push-{range}</code> or <code>push-{range}-only</code> classes to offset the last column.
</p>
<h2>Internet Explorer 9</h2>
<p>
Internet Explorer 9 has no support for <a rel="external" href="http://www.w3.org/TR/css3-transitions/">CSS Transitions</a> and as such all JavaScript plugins that utilize transitions will operate
without animation.
</p>
</section>
<hr />
<section id="accessibility">
<h1>Accessibility</h1>
<p>
Responsive is built using common web standards and has been designed to support Assistive Technology.
All the default colors have been chosen to conform to the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast" rel="external">recommended ratio of 4.5:1</a>
to ensure that users with low vision or who are color blind are catered for appropriately.
</p>
<p>
All Responsive's plugins have been built from the ground up to be mouse, touch and keyboard accessible. They also add the appropriate
<a href="http://www.w3.org/TR/wai-aria/" rel="external">ARIA</a> attribution where necessary to ensure that screenreaders can follow
each plugin's functionality.
</p>
</section>
<hr />
<section id="right-to-left">
<h1>Right-to-Left Languages</h1>
<p>
Responsive has built in support for right-to-left languages such as Hebrew or Arabic.
All aspects of the framework from grid columns to swiping directional behaviour have right-to-left counterparts.
</p>
<p>
To enable right-to-left language support add the attribute <code>dir="rtl"</code> to the <code>html</code> tag.
</p>
</section>
</div>
</div>