zurb-foundation 4.0.0.rc1 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile.lock +1 -1
- data/docs/_sidebar-components.html.erb +11 -11
- data/docs/_sidebar.html.erb +3 -3
- data/docs/changelog.html.erb +9 -9
- data/docs/components/block-grid.html.erb +4 -2
- data/docs/components/breadcrumbs.html.erb +4 -2
- data/docs/components/button-groups.html.erb +5 -3
- data/docs/components/buttons.html.erb +4 -2
- data/docs/components/clearing.html.erb +2 -0
- data/docs/components/custom-forms.html.erb +2 -0
- data/docs/components/dropdown-buttons.html.erb +4 -2
- data/docs/components/dropdown.html.erb +2 -0
- data/docs/components/flex-video.html.erb +2 -0
- data/docs/components/forms.html.erb +2 -0
- data/docs/components/grid.html.erb +4 -2
- data/docs/components/inline-lists.html.erb +2 -0
- data/docs/components/joyride.html.erb +2 -0
- data/docs/components/keystrokes.html.erb +2 -0
- data/docs/components/labels.html.erb +2 -0
- data/docs/components/magellan.html.erb +2 -0
- data/docs/components/orbit.html.erb +2 -0
- data/docs/components/pagination.html.erb +4 -2
- data/docs/components/panels.html.erb +2 -0
- data/docs/components/pricing-tables.html.erb +2 -0
- data/docs/components/progress-bars.html.erb +2 -0
- data/docs/components/reveal.html.erb +2 -0
- data/docs/components/section.html.erb +2 -0
- data/docs/components/side-nav.html.erb +4 -2
- data/docs/components/split-buttons.html.erb +3 -1
- data/docs/components/sub-nav.html.erb +4 -2
- data/docs/components/switch.html.erb +2 -0
- data/docs/components/tables.html.erb +2 -0
- data/docs/components/thumbnails.html.erb +2 -0
- data/docs/components/tooltips.html.erb +2 -0
- data/docs/components/top-bar.html.erb +2 -0
- data/docs/components/type.html.erb +1 -0
- data/docs/faq.html.erb +1 -1
- data/docs/index.html.erb +2 -2
- data/docs/layout.html.erb +5 -5
- data/docs/support.html.erb +2 -2
- data/lib/foundation/version.rb +1 -1
- data/templates/project/scss/app.scss +1 -1
- metadata +9 -8
- data/test/stylesheets/styles.css +0 -955
data/Gemfile.lock
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<p class="title"><a href="#">Using Foundation</a></p>
|
|
4
4
|
<div class="content">
|
|
5
5
|
<ul class="side-nav">
|
|
6
|
-
<li><a href="../">Get Started</a></li>
|
|
6
|
+
<li><a href="../docs/">Get Started</a></li>
|
|
7
7
|
<li><a href="../javascript.html">Javascript</a></li>
|
|
8
8
|
<li><a href="../sass.html">Sass</a></li>
|
|
9
9
|
<li><a href="../rails.html">Rails</a></li>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</ul>
|
|
12
12
|
</div>
|
|
13
13
|
</section>
|
|
14
|
-
<section class="section">
|
|
14
|
+
<section class="section <%= @side_nav == 'grid' ? 'active': '' %>">
|
|
15
15
|
<p class="title"><a href="#">Grid</a></p>
|
|
16
16
|
<div class="content">
|
|
17
17
|
<ul class="side-nav">
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
</ul>
|
|
21
21
|
</div>
|
|
22
22
|
</section>
|
|
23
|
-
<section class="section">
|
|
23
|
+
<section class="section <%= @side_nav == 'nav' ? 'active': '' %>">
|
|
24
24
|
<p class="title"><a href="#">Navigation</a></p>
|
|
25
25
|
<div class="content">
|
|
26
26
|
<ul class="side-nav">
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
</ul>
|
|
33
33
|
</div>
|
|
34
34
|
</section>
|
|
35
|
-
<section class="section">
|
|
35
|
+
<section class="section <%= @side_nav == 'buttons' ? 'active': '' %>">
|
|
36
36
|
<p class="title"><a href="#">Buttons</a></p>
|
|
37
37
|
<div class="content">
|
|
38
38
|
<ul class="side-nav">
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
</ul>
|
|
44
44
|
</div>
|
|
45
45
|
</section>
|
|
46
|
-
<section class="section">
|
|
46
|
+
<section class="section <%= @side_nav == 'forms' ? 'active': '' %>">
|
|
47
47
|
<p class="title"><a href="#">Forms</a></p>
|
|
48
48
|
<div class="content">
|
|
49
49
|
<ul class="side-nav">
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
</ul>
|
|
54
54
|
</div>
|
|
55
55
|
</section>
|
|
56
|
-
<section class="section">
|
|
56
|
+
<section class="section <%= @side_nav == 'type' ? 'active': '' %>">
|
|
57
57
|
<p class="title"><a href="#">Typography</a></p>
|
|
58
58
|
<div class="content">
|
|
59
59
|
<ul class="side-nav">
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
</ul>
|
|
65
65
|
</div>
|
|
66
66
|
</section>
|
|
67
|
-
<section class="section">
|
|
67
|
+
<section class="section <%= @side_nav == 'css' ? 'active': '' %>">
|
|
68
68
|
<p class="title"><a href="#">CSS Components</a></p>
|
|
69
69
|
<div class="content">
|
|
70
70
|
<ul class="side-nav">
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
</ul>
|
|
78
78
|
</div>
|
|
79
79
|
</section>
|
|
80
|
-
<section class="section">
|
|
80
|
+
<section class="section <%= @side_nav == 'js' ? 'active': '' %>">
|
|
81
81
|
<p class="title"><a href="#">Javascript</a></p>
|
|
82
82
|
<div class="content">
|
|
83
83
|
<ul class="side-nav">
|
|
@@ -93,14 +93,14 @@
|
|
|
93
93
|
</div>
|
|
94
94
|
</section>
|
|
95
95
|
<section class="section">
|
|
96
|
-
<p class="title"><a href="faq.html">FAQ</a></p>
|
|
96
|
+
<p class="title"><a href="../faq.html">FAQ</a></p>
|
|
97
97
|
</section>
|
|
98
98
|
<section class="section">
|
|
99
|
-
<p class="title"><a href="support.html">Support</a></p>
|
|
99
|
+
<p class="title"><a href="../support.html">Support</a></p>
|
|
100
100
|
</section>
|
|
101
101
|
</div>
|
|
102
102
|
|
|
103
|
-
<p><a href="
|
|
103
|
+
<p><a href="http://foundation.zurb.com/download.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
|
|
104
104
|
|
|
105
105
|
<div class="jobs hide-for-small">
|
|
106
106
|
<h5>Awesome product jobs:</h5>
|
data/docs/_sidebar.html.erb
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<div class="section-container accordion" data-section data-options="deep_linking: false">
|
|
2
|
-
<section class="section">
|
|
2
|
+
<section class="section active">
|
|
3
3
|
<p class="title"><a href="#">Using Foundation</a></p>
|
|
4
4
|
<div class="content">
|
|
5
5
|
<ul class="side-nav">
|
|
6
|
-
<li><a href="/">Get Started</a></li>
|
|
6
|
+
<li><a href="docs/">Get Started</a></li>
|
|
7
7
|
<li><a href="javascript.html">Javascript</a></li>
|
|
8
8
|
<li><a href="sass.html">Sass</a></li>
|
|
9
9
|
<li><a href="rails.html">Rails</a></li>
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
</section>
|
|
101
101
|
</div>
|
|
102
102
|
|
|
103
|
-
<p><a href="
|
|
103
|
+
<p><a href="http://foundation.zurb.com/migration.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
|
|
104
104
|
|
|
105
105
|
<div class="jobs hide-for-small">
|
|
106
106
|
<h5>Awesome product jobs:</h5>
|
data/docs/changelog.html.erb
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<hr />
|
|
14
14
|
|
|
15
15
|
<h5><strong>4.0</strong> — Feburary 28, 2013</h5>
|
|
16
|
-
<p>Initial launch of Foundation 4, a rewritten, mobile-first implementation of the framework. Major enhancements include a mobile-first approach across the board, Scss tools to allow for all-semantic coding, and rewritten JS plugins for speed and ease of use. Marketing site updates, new docs, refined and simplified styles and more. Review the <a href="
|
|
16
|
+
<p>Initial launch of Foundation 4, a rewritten, mobile-first implementation of the framework. Major enhancements include a mobile-first approach across the board, Scss tools to allow for all-semantic coding, and rewritten JS plugins for speed and ease of use. Marketing site updates, new docs, refined and simplified styles and more. Review the <a href="http://foundation.zurb.com/migration.php">migration guide</a> for more information.</p>
|
|
17
17
|
|
|
18
18
|
<h5>3.2.5 — January 26, 2013</h5>
|
|
19
19
|
<p>This patch fixes compatability with jQuery 1.9. This patch includes:</p>
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
|
|
75
75
|
<p>The updates to Foundation itself are as follows:</p>
|
|
76
76
|
<ul class="disc">
|
|
77
|
-
<li>Added <a href="
|
|
78
|
-
<li>Added <a href="
|
|
79
|
-
<li>Added <a href="
|
|
77
|
+
<li>Added <a href="components/magellan.html">Magellan</a>, a plugin for building design agnostic sticky navs that know where you are on the page.</li>
|
|
78
|
+
<li>Added <a href="components/joyride.html">Joyride</a>, our plugin for creating tours of your website or app.</li>
|
|
79
|
+
<li>Added <a href="components/clearing.html">Clearing</a>, our new responsive image gallery lightbox plugin.</li>
|
|
80
80
|
<li>Cleaned up Orbit a bit. We now use opacity on each slide so you don't have stacking problems or different image size problems. You can now optionally stack slides on mobile. Orbit can now be swipable on mobile as well.</li>
|
|
81
81
|
<li>Updated Reveal</li>
|
|
82
82
|
<li>Updated index files to use defined header and footer structure</li>
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
<li>Updated modular scale to use new functions, doesn't effect end-users.</li>
|
|
92
92
|
<li>Updated visibility classes to use inherit instead of block to accomodate for spans.</li>
|
|
93
93
|
<li>Removed HTML5 Shiv from header since its included in modernizr.</li>
|
|
94
|
-
<li>Added <a href="
|
|
94
|
+
<li>Added <a href="components/pricing-tables.html">pricing tables</a> UI element</li>
|
|
95
95
|
<li>Added many new Scss variables to control styling for things like: topbar, clearing, joyride, pricint tables, etc.</li>
|
|
96
96
|
<li>Bug fixes for Topbar.</li>
|
|
97
97
|
<li>Added 5 <a href="http://foundation.zurb.com/templates.php">HTML templates</a> to the add-ons section.</li>
|
|
@@ -109,8 +109,8 @@
|
|
|
109
109
|
<p>With this release of Foundation, we include:</p>
|
|
110
110
|
<ul class="disc" style="list-style: outside;">
|
|
111
111
|
<li>Downloadable HTML template pages that can be copy/pasted into an existing project or added to your project upon downloading from the customizer.</li>
|
|
112
|
-
<li>The Add-on's section includes a round-up of all the playground pieces, etc that aren't officially included in Foundation, but built to work with it. This includes: <a href="
|
|
113
|
-
<li>Foundation now includes a <a href="
|
|
112
|
+
<li>The Add-on's section includes a round-up of all the playground pieces, etc that aren't officially included in Foundation, but built to work with it. This includes: <a href="http://foundation.zurb.com/templates.php">Templates</a>, <a href="http://www.zurb.com/playground/foundation-icons">Icon Fonts</a>, <a href="http://www.zurb.com/playground/off-canvas-layouts">Off-Canvas Layouts</a>, <a href="http://www.zurb.com/playground/responsive-tables">Responsive Tables</a>, <a href="http://www.zurb.com/playground/social-webicons">SVG Social Icons</a>, and <a href="http://www.zurb.com/playground/foundation-stencil-sets">Omnigraffle Stencils</a>.</li>
|
|
113
|
+
<li>Foundation now includes a <a href="components/top-bar.html">responsive top navigation</a> bar that lets you have control over when it responds and what you include in it. We've made it really easy to customize using Scss.</li>
|
|
114
114
|
<li>Right-to-left language support straight out of the box. You can adjust this in the settings.scss file or upon downloading with the customizer.</li>
|
|
115
115
|
<li>New UI Styles for Progress Bars and Image Thumbs.</li>
|
|
116
116
|
<li>Updated to include jQuery 1.8.1</li>
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
<hr>
|
|
136
136
|
|
|
137
137
|
<h5>3.0.6 — July 20, 2012</h5>
|
|
138
|
-
<p>Numerous bugfixes including dropdown buttons on touch devices, Modernizr update with IE8Compat, split button colors, and more. Split out the functions in app.js to be part of the Gem and only initialized in app.js, so you can keep a clean distinction between your JS and Foundation's (if you want to). Added an
|
|
138
|
+
<p>Numerous bugfixes including dropdown buttons on touch devices, Modernizr update with IE8Compat, split button colors, and more. Split out the functions in app.js to be part of the Gem and only initialized in app.js, so you can keep a clean distinction between your JS and Foundation's (if you want to). Added an accordion element.</p>
|
|
139
139
|
|
|
140
140
|
<hr>
|
|
141
141
|
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
<div class="panel">
|
|
170
170
|
<h3>Where Does Foundation Work?</h3>
|
|
171
171
|
<h5 class="subheader">Foundation is the most advanced front-end framework in existence. We've ditched IE7 so that we can do more awesome things and push the web to where it needs to be.</h5>
|
|
172
|
-
<a class="button" href="support.
|
|
172
|
+
<a class="button" href="support.html">Browser Support »</a> <a class="secondary button" href="faq.html">Frequently Asked Questions »</a>
|
|
173
173
|
</div>
|
|
174
174
|
|
|
175
175
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% @side_nav = "grid" %>
|
|
2
|
+
|
|
1
3
|
<div class="row">
|
|
2
4
|
<div class="large-9 push-3 columns">
|
|
3
5
|
|
|
@@ -47,12 +49,12 @@
|
|
|
47
49
|
</ul>
|
|
48
50
|
', :html %>
|
|
49
51
|
|
|
50
|
-
<p>For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've <strong>selected block grid from a custom package</strong>. These should be linked up following our default <a href="
|
|
52
|
+
<p>For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've <strong>selected block grid from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
|
|
51
53
|
|
|
52
54
|
<hr>
|
|
53
55
|
|
|
54
56
|
<h3>Using The Mixin</h3>
|
|
55
|
-
<p>We've included SCSS mixins used to style block-grids. To use the mixin, you'll need to have the <a href="
|
|
57
|
+
<p>We've included SCSS mixins used to style block-grids. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_block-grid.scss</a> from Github and throw them into a foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
56
58
|
|
|
57
59
|
<%= code_example '
|
|
58
60
|
@import "foundation/foundation-global", "foundation/block-grid";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% @side_nav = "nav" %>
|
|
2
|
+
|
|
1
3
|
<div class="row">
|
|
2
4
|
<div class="large-9 push-3 columns">
|
|
3
5
|
|
|
@@ -31,12 +33,12 @@
|
|
|
31
33
|
<li class="current"><a href="#">Cloning</a></li>
|
|
32
34
|
</ul>', :html %>
|
|
33
35
|
|
|
34
|
-
<p>For these styles to come across, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>breadcrumbs from a custom package</strong>. These should be linked up following our default <a href="
|
|
36
|
+
<p>For these styles to come across, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>breadcrumbs from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
|
|
35
37
|
|
|
36
38
|
<hr>
|
|
37
39
|
|
|
38
40
|
<h3>Build with Mixins</h3>
|
|
39
|
-
<p>We've included SCSS mixins used to style alert boxes. To use these mixins, you'll need to have the <a href="
|
|
41
|
+
<p>We've included SCSS mixins used to style alert boxes. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_breadcrumbs.scss">_breadcrumbs.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
40
42
|
|
|
41
43
|
<%= code_example '
|
|
42
44
|
@import "foundation/foundation-global", "foundation/breadcrumbs";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% @side_nav = "buttons" %>
|
|
2
|
+
|
|
1
3
|
<div class="row">
|
|
2
4
|
<div class="large-9 push-3 columns">
|
|
3
5
|
|
|
@@ -37,7 +39,7 @@
|
|
|
37
39
|
<hr>
|
|
38
40
|
|
|
39
41
|
<h3>Build With Predefined HTML Classes</h3>
|
|
40
|
-
<p>There are two ways to build button groups in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building button groups using our predefined classes is a breeze, you'll just wrap a <a href="
|
|
42
|
+
<p>There are two ways to build button groups in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building button groups using our predefined classes is a breeze, you'll just wrap a <a href="buttons.html">button</a> inside an <code><ul></code>.</p>
|
|
41
43
|
|
|
42
44
|
<p>The button styles will work the same as they do when building a single button, but they'll float next to each other to create a group. You also have access to the same radius classes as buttons, only they'll go on the unordered list instead of the button. You can even make sure the buttons take up even space within the container you put them in.</p>
|
|
43
45
|
|
|
@@ -63,12 +65,12 @@
|
|
|
63
65
|
</ul>
|
|
64
66
|
', :html %>
|
|
65
67
|
|
|
66
|
-
<p>For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>buttons and button-groups from a custom package</strong>. These should be linked up following our default <a href="
|
|
68
|
+
<p>For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>buttons and button-groups from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
|
|
67
69
|
|
|
68
70
|
<hr>
|
|
69
71
|
|
|
70
72
|
<h3>Build with Mixins</h3>
|
|
71
|
-
<p>We've included SCSS mixins used to style button groups. To use these mixins, you'll need to have the <a href="
|
|
73
|
+
<p>We've included SCSS mixins used to style button groups. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_button-groups.scss">_button-groups.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
72
74
|
|
|
73
75
|
<%= code_example '
|
|
74
76
|
@import "foundation/foundation-global", "foundation/buttons", "foundation/button-groups";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% @side_nav = "buttons" %>
|
|
2
|
+
|
|
1
3
|
<div class="row">
|
|
2
4
|
<div class="large-9 push-3 columns">
|
|
3
5
|
|
|
@@ -59,12 +61,12 @@
|
|
|
59
61
|
<a href="#" class="button disabled">Disabled Button</a>
|
|
60
62
|
', :html %>
|
|
61
63
|
|
|
62
|
-
<p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>button from a custom package</strong>. These should be linked up following our default <a href="
|
|
64
|
+
<p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>button from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
|
|
63
65
|
|
|
64
66
|
<hr>
|
|
65
67
|
|
|
66
68
|
<h3>Build with Mixins</h3>
|
|
67
|
-
<p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="
|
|
69
|
+
<p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
68
70
|
|
|
69
71
|
<%= code_example '
|
|
70
72
|
@import "foundation/foundation-global", "foundation/buttons";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% @side_nav = "buttons" %>
|
|
2
|
+
|
|
1
3
|
<div class="row">
|
|
2
4
|
<div class="large-9 push-3 columns">
|
|
3
5
|
|
|
@@ -47,12 +49,12 @@
|
|
|
47
49
|
<a href="#" class="button dropdown round">Round Button</a>
|
|
48
50
|
', :html %>
|
|
49
51
|
|
|
50
|
-
<p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>dropdown buttons from a custom package</strong>. These should be linked up following our default <a href="
|
|
52
|
+
<p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>dropdown buttons from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
|
|
51
53
|
|
|
52
54
|
<hr>
|
|
53
55
|
|
|
54
56
|
<h3>Build with Mixins</h3>
|
|
55
|
-
<p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="
|
|
57
|
+
<p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_dropdown-buttons.scss">_dropdown-buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
56
58
|
|
|
57
59
|
<%= code_example '
|
|
58
60
|
@import "foundation/foundation-global", "foundation/buttons", "foundation/dropdown-buttons";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% @side_nav = "grid" %>
|
|
2
|
+
|
|
1
3
|
<style>
|
|
2
4
|
.row.display { background: #eee; font-size: 11px; margin-bottom: 10px; }
|
|
3
5
|
.row.display .columns, .row.display .column { background: #e7e7e7; border: 1px solid #ddd; font-size: 13px; font-weight: bold; text-indent: 3px; padding-top: 8px; color: #444; padding-bottom: 8px; }
|
|
@@ -247,7 +249,7 @@
|
|
|
247
249
|
<hr>
|
|
248
250
|
|
|
249
251
|
<h4>Small Grid</h4>
|
|
250
|
-
<p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="
|
|
252
|
+
<p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_foundation-global.scss</a> and <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_grid.scss</a> from Github and throw them into a Foundation folder in your project directory.</p>
|
|
251
253
|
|
|
252
254
|
<%= code_example '
|
|
253
255
|
<div class="row">
|
|
@@ -344,7 +346,7 @@ $float: false
|
|
|
344
346
|
<hr>
|
|
345
347
|
|
|
346
348
|
<h4>Get Advanced With Media Query Changes</h4>
|
|
347
|
-
<p>We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, <a href="
|
|
349
|
+
<p>We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, <a href="../sass.html">we've got variables for that</a>.</p>
|
|
348
350
|
|
|
349
351
|
</div>
|
|
350
352
|
</div>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% @side_nav = "nav" %>
|
|
2
|
+
|
|
1
3
|
<div class="row">
|
|
2
4
|
<div class="large-9 push-3 columns">
|
|
3
5
|
|
|
@@ -49,7 +51,7 @@
|
|
|
49
51
|
<li class="arrow"><a href="">»</a></li>
|
|
50
52
|
</ul>', :html %>
|
|
51
53
|
|
|
52
|
-
<p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pagination from a custom package. These should be linked up following our default <a href="
|
|
54
|
+
<p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pagination from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
|
|
53
55
|
|
|
54
56
|
<h5>Centered Pagination</h5>
|
|
55
57
|
<p>In some instances, you'll want you pagination to be centered within a container. We've got you covered! Just wrap your unordered list in something that has a defined width and add the class, <code>.pagination-centered</code>.</p>
|
|
@@ -86,7 +88,7 @@
|
|
|
86
88
|
<hr>
|
|
87
89
|
|
|
88
90
|
<h3>Build with a Mixin</h3>
|
|
89
|
-
<p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="
|
|
91
|
+
<p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pagination.scss">_pagination.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
90
92
|
|
|
91
93
|
<%= code_example '
|
|
92
94
|
@import "foundation/foundation-global", "foundation/pagination";
|