modularis 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/Gemfile.lock +2 -2
- data/README.md +2 -4
- data/lib/modularis/version.rb +1 -1
- metadata +1 -91
- data/docs/CHANGELOG.md +0 -260
- data/docs/Capfile +0 -4
- data/docs/Gemfile +0 -13
- data/docs/Gemfile.lock +0 -45
- data/docs/Procfile +0 -2
- data/docs/README.md +0 -1
- data/docs/_sidebar-components.html.erb +0 -115
- data/docs/_sidebar.html.erb +0 -115
- data/docs/changelog.html.erb +0 -33
- data/docs/compile.rb +0 -34
- data/docs/components/alert-boxes.html.erb +0 -204
- data/docs/components/block-grid.html.erb +0 -132
- data/docs/components/breadcrumbs.html.erb +0 -156
- data/docs/components/button-groups.html.erb +0 -230
- data/docs/components/buttons.html.erb +0 -222
- data/docs/components/clearing.html.erb +0 -152
- data/docs/components/custom-forms.html.erb +0 -309
- data/docs/components/dropdown-buttons.html.erb +0 -235
- data/docs/components/dropdown.html.erb +0 -188
- data/docs/components/flex-video.html.erb +0 -95
- data/docs/components/forms.html.erb +0 -477
- data/docs/components/global.html.erb +0 -92
- data/docs/components/grid.html.erb +0 -366
- data/docs/components/inline-lists.html.erb +0 -91
- data/docs/components/joyride.html.erb +0 -183
- data/docs/components/keystrokes.html.erb +0 -76
- data/docs/components/kitchen-sink.html.erb +0 -870
- data/docs/components/labels.html.erb +0 -102
- data/docs/components/magellan.html.erb +0 -86
- data/docs/components/orbit.html.erb +0 -276
- data/docs/components/pagination.html.erb +0 -183
- data/docs/components/panels.html.erb +0 -123
- data/docs/components/pricing-tables.html.erb +0 -156
- data/docs/components/progress-bars.html.erb +0 -123
- data/docs/components/reveal.html.erb +0 -162
- data/docs/components/section.html.erb +0 -496
- data/docs/components/side-nav.html.erb +0 -124
- data/docs/components/split-buttons.html.erb +0 -220
- data/docs/components/sub-nav.html.erb +0 -122
- data/docs/components/switch.html.erb +0 -290
- data/docs/components/tables.html.erb +0 -125
- data/docs/components/thumbnails.html.erb +0 -89
- data/docs/components/tooltips.html.erb +0 -75
- data/docs/components/top-bar.html.erb +0 -283
- data/docs/components/type.html.erb +0 -396
- data/docs/components/visibility.html.erb +0 -110
- data/docs/config/deploy.rb +0 -36
- data/docs/config.ru +0 -12
- data/docs/controller.rb +0 -53
- data/docs/css/_coderay.scss +0 -116
- data/docs/css/_settings.scss +0 -1
- data/docs/css/docs.scss +0 -185
- data/docs/css/normalize.scss +0 -396
- data/docs/css/qunit-composite.css +0 -13
- data/docs/css/qunit.css +0 -235
- data/docs/faq.html.erb +0 -63
- data/docs/img/demos/demo1-th.jpg +0 -0
- data/docs/img/demos/demo1.jpg +0 -0
- data/docs/img/demos/demo2-th.jpg +0 -0
- data/docs/img/demos/demo2.jpg +0 -0
- data/docs/img/demos/demo3-th.jpg +0 -0
- data/docs/img/demos/demo3.jpg +0 -0
- data/docs/img/demos/demo4-th.jpg +0 -0
- data/docs/img/demos/demo4.jpg +0 -0
- data/docs/img/demos/demo5-th.jpg +0 -0
- data/docs/img/demos/demo5.jpg +0 -0
- data/docs/index.html.erb +0 -285
- data/docs/javascript.html.erb +0 -134
- data/docs/js/docs.js +0 -3
- data/docs/js/qunit-composite.js +0 -105
- data/docs/js/qunit.js +0 -1977
- data/docs/js/tests/tabs/simple_tabs.html +0 -57
- data/docs/js/tests/tabs/simple_tabs.js +0 -54
- data/docs/js/tests/tooltips/tooltips.html +0 -39
- data/docs/js/tests/tooltips/tooltips.js +0 -11
- data/docs/layout.html.erb +0 -128
- data/docs/media-queries.html.erb +0 -96
- data/docs/rails.html.erb +0 -76
- data/docs/rtl.html.erb +0 -53
- data/docs/sass.html.erb +0 -1295
- data/docs/support.html.erb +0 -143
- data/docs/test/_test-scripts.html.erb +0 -36
- data/docs/test/cards.html.erb +0 -77
- data/docs/test/flexbox-grid.html.erb +0 -68
- data/docs/test/flip-nav.html.erb +0 -54
- data/docs/test/layout.html.erb +0 -15
- data/docs/test/off-canvas1.html.erb +0 -64
- data/docs/test/off-canvas2.html.erb +0 -75
- data/docs/test/off-canvas3.html.erb +0 -65
- data/docs/test_layout.html.erb +0 -128
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
<% @side_nav = "type" %>
|
|
2
|
-
|
|
3
|
-
<div class="row">
|
|
4
|
-
<div class="large-9 push-3 columns">
|
|
5
|
-
|
|
6
|
-
<% @page_title = "Labels" %>
|
|
7
|
-
<div class="row">
|
|
8
|
-
<div class="large-12 columns">
|
|
9
|
-
<h2><%= @page_title %></h2>
|
|
10
|
-
<h4 class="subheader">Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new.</h4>
|
|
11
|
-
|
|
12
|
-
<p>
|
|
13
|
-
<span class="label">Regular Label</span><br>
|
|
14
|
-
<span class="radius secondary label">Radius Secondary Label</span><br>
|
|
15
|
-
<span class="round alert label">Round Alert Label</span><br>
|
|
16
|
-
<span class="success label">Success Label</span><br>
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
<hr>
|
|
20
|
-
</div>
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
<div class="row">
|
|
24
|
-
<div class="large-12 columns">
|
|
25
|
-
|
|
26
|
-
<h3>Build With Predefined HTML Classes</h3>
|
|
27
|
-
<p>There are two ways to build labels in Modularis 4: with our predefined HTML classes or with our mixins. Building labels using our predefined classes is simple, you'll just need to write a <code><span class="label"></code> and apply the classes you want.</p>
|
|
28
|
-
|
|
29
|
-
<%= code_example '
|
|
30
|
-
<span class="label">Regular Label</span>
|
|
31
|
-
<span class="radius secondary label">Radius Secondary Label</span>
|
|
32
|
-
<span class="round alert label">Round Alert Label</span>
|
|
33
|
-
<span class="success label">Success Label</span>', :html %>
|
|
34
|
-
|
|
35
|
-
<p>The class options:</p>
|
|
36
|
-
<ul class="disc">
|
|
37
|
-
<li>The color classes include: <code>.secondary, .alert</code> or <code>.success</code></li>
|
|
38
|
-
<li>The radius classes include: <code>.radius</code> or <code>.round</code>.</li>
|
|
39
|
-
</ul>
|
|
40
|
-
|
|
41
|
-
<p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
|
|
42
|
-
|
|
43
|
-
<hr>
|
|
44
|
-
|
|
45
|
-
<h3>Build With Our Mixins</h3>
|
|
46
|
-
<p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_labels.scss">_labels.scss</a> from Github and throw them into a Modularis folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
47
|
-
|
|
48
|
-
<%= code_example '
|
|
49
|
-
@import "modularis/modularis-global", "modularis/components/global", "modularis/components/labels";
|
|
50
|
-
', :css %>
|
|
51
|
-
|
|
52
|
-
<h5>Quick Mixin</h5>
|
|
53
|
-
<p>You can build your labels using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. You'll also have the ability to change the font-size and padding. The rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
|
|
54
|
-
|
|
55
|
-
<%= code_example '
|
|
56
|
-
/* Using the default styles */
|
|
57
|
-
.your-class-name { @include label; }', :css %>
|
|
58
|
-
|
|
59
|
-
<p>There are also four options you can customize on the fly when writing this mixin. These control things like: padding, text size, background color and radius. Setting any of these options to false will negate those styles.</p>
|
|
60
|
-
|
|
61
|
-
<%= code_example '
|
|
62
|
-
/* Using the available options */
|
|
63
|
-
.your-class-name { @include label($padding,$text-size,$bg,$radius); }
|
|
64
|
-
|
|
65
|
-
/* Controls the padding, set to a string following top, right, bottom, left rules or change the variable */
|
|
66
|
-
$padding: $label-padding
|
|
67
|
-
|
|
68
|
-
/* Control your text-size per label */
|
|
69
|
-
$text-size: $label-font-size
|
|
70
|
-
|
|
71
|
-
/* Change the background color for your labels */
|
|
72
|
-
$bg: $primary-color
|
|
73
|
-
|
|
74
|
-
/* Control how much radius is put on the labels */
|
|
75
|
-
$radius: false
|
|
76
|
-
', :css %>
|
|
77
|
-
|
|
78
|
-
<p class="custom-keystroke">Here's an example of a custom <span class="label-custom">label</span> style.</p>
|
|
79
|
-
|
|
80
|
-
<h5>Default SCSS Variables</h5>
|
|
81
|
-
|
|
82
|
-
<%= code_example '
|
|
83
|
-
/* We use these to style the labels */
|
|
84
|
-
$label-padding: emCalc(3px) emCalc(6px) emCalc(4px);
|
|
85
|
-
$label-radius: $global-radius;
|
|
86
|
-
|
|
87
|
-
/* We use these to style the label text */
|
|
88
|
-
$label-font-sizing: emCalc(14px);
|
|
89
|
-
$label-font-weight: bold;
|
|
90
|
-
$label-font-color: #333;
|
|
91
|
-
$label-font-color-alt: #fff;', :css %>
|
|
92
|
-
|
|
93
|
-
<p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_modularis-global.scss</strong>.</p>
|
|
94
|
-
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
</div>
|
|
99
|
-
<div class="large-3 pull-9 columns">
|
|
100
|
-
<%= render "_sidebar-components.html.erb" %>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
<% @side_nav = "js" %>
|
|
2
|
-
|
|
3
|
-
<div class="row">
|
|
4
|
-
<div class="large-9 push-3 columns">
|
|
5
|
-
|
|
6
|
-
<% @page_title = "Magellan" %>
|
|
7
|
-
<div class="row">
|
|
8
|
-
<div class="large-12 columns">
|
|
9
|
-
<h2><%= @page_title %></h2>
|
|
10
|
-
<h4 class="subheader">Magellan is a style agnostic plugin that lets you style a sticky navigation that denotes where you are on the page.</h4>
|
|
11
|
-
|
|
12
|
-
<div data-magellan-expedition="fixed">
|
|
13
|
-
<dl class="sub-nav">
|
|
14
|
-
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
|
|
15
|
-
<dd data-magellan-arrival="js"><a href="#js">Using Javascript</a></dd>
|
|
16
|
-
</dl>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<hr>
|
|
20
|
-
</div>
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
<div class="row">
|
|
24
|
-
<div class="large-12 columns">
|
|
25
|
-
|
|
26
|
-
<a name="build"></a>
|
|
27
|
-
<h3 data-magellan-destination="build">Build With Predefined HTML Structure</h3>
|
|
28
|
-
<p>When we set out to build Magellan, we wanted it to be really lightweight and stay out of your way. With that in mind, we kept custom styles out of the game. Magellan is style agnostic, meaning you can attach it to anything. There are a few built-in lists in Modularis that will work, including the sub-nav. If you look at the top of this page you'll see our sub-nav. As you scroll, you'll see Magellan in action!</p>
|
|
29
|
-
|
|
30
|
-
<%= code_example '
|
|
31
|
-
<div data-magellan-expedition="fixed">
|
|
32
|
-
<dl class="sub-nav">
|
|
33
|
-
<dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
|
|
34
|
-
<dd data-magellan-arrival="js"><a href="#js">Arrival 2</a></dd>
|
|
35
|
-
</dl>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<div data-magellan-expedition="fixed">
|
|
39
|
-
<ul class="sub-nav">
|
|
40
|
-
<li data-magellan-arrival="build"><a href="#build">Build with HTML</a></li>
|
|
41
|
-
<li data-magellan-arrival="js"><a href="#js">Arrival 2</a></li>
|
|
42
|
-
</ul>
|
|
43
|
-
</div>
|
|
44
|
-
', :html %>
|
|
45
|
-
|
|
46
|
-
<p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected <strong>magellan from a custom package</strong>. These should be linked up following our default <a href="../index.html#basicHTMLMarkup">HTML page structure</a>.</p>
|
|
47
|
-
|
|
48
|
-
<hr>
|
|
49
|
-
|
|
50
|
-
<a name="js"></a>
|
|
51
|
-
<h3 data-magellan-destination="js">Using Our JavaScript</h3>
|
|
52
|
-
<p>You'll need to include <code>modularis.magellan.js</code> to get everything to work properly. You'll also need to make sure to include <code>zepto.js</code> and <code>modularis.js</code> above the plugin. Above your closing <code></body></code> tag include the following line of code and make sure you have the JS in your directory.</p>
|
|
53
|
-
|
|
54
|
-
<p><a href="../javascript.html" title="How to install Modularis JavaScript">Read how to install Modularis JavaScript</a></p>
|
|
55
|
-
|
|
56
|
-
<p>Required Modularis Library: <code>modularis.magellan.js</code></p>
|
|
57
|
-
|
|
58
|
-
<p>Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:</p>
|
|
59
|
-
|
|
60
|
-
<%= code_example '
|
|
61
|
-
<h3 data-magellan-destination="js">Using Our Javascript</h3>
|
|
62
|
-
|
|
63
|
-
<div data-magellan-expedition="fixed">
|
|
64
|
-
<ul class="sub-nav">
|
|
65
|
-
<li data-magellan-arrival="build"><a href="#build">Build with HTML</a></li>
|
|
66
|
-
<li data-magellan-arrival="js"><a href="#js">Arrival 2</a></li>
|
|
67
|
-
</ul>
|
|
68
|
-
</div>
|
|
69
|
-
', :html %>
|
|
70
|
-
<h5>Optional JavaScript Configuration</h5>
|
|
71
|
-
|
|
72
|
-
<p>Magellan options can only be passed in during initialization at this time.</p>
|
|
73
|
-
|
|
74
|
-
<%= code_example "
|
|
75
|
-
{
|
|
76
|
-
// specify the class used for active sections
|
|
77
|
-
activeClass: 'active'
|
|
78
|
-
}", :js %>
|
|
79
|
-
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
<div class="large-3 pull-9 columns">
|
|
84
|
-
<%= render "_sidebar-components.html.erb" %>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
@@ -1,276 +0,0 @@
|
|
|
1
|
-
<% @side_nav = "js" %>
|
|
2
|
-
|
|
3
|
-
<div class="row">
|
|
4
|
-
<div class="large-9 push-3 columns">
|
|
5
|
-
|
|
6
|
-
<% @page_title = "Orbit" %>
|
|
7
|
-
<div class="row">
|
|
8
|
-
<div class="large-12 columns">
|
|
9
|
-
<h2><%= @page_title %></h2>
|
|
10
|
-
<h4 class="subheader">Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.</h4>
|
|
11
|
-
|
|
12
|
-
<ul id="featured1" data-orbit data-options="timer_speed:5000;">
|
|
13
|
-
<li>
|
|
14
|
-
<img src="../img/demos/demo1.jpg" />
|
|
15
|
-
<div class="orbit-caption">
|
|
16
|
-
Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
|
17
|
-
</div>
|
|
18
|
-
</li>
|
|
19
|
-
<li>
|
|
20
|
-
<img src="../img/demos/demo2.jpg" />
|
|
21
|
-
<div class="orbit-caption">
|
|
22
|
-
Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
|
23
|
-
</div>
|
|
24
|
-
</li>
|
|
25
|
-
<li>
|
|
26
|
-
<img src="../img/demos/demo3.jpg" />
|
|
27
|
-
<div class="orbit-caption">
|
|
28
|
-
Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
|
29
|
-
</div>
|
|
30
|
-
</li>
|
|
31
|
-
</ul>
|
|
32
|
-
|
|
33
|
-
<hr>
|
|
34
|
-
|
|
35
|
-
</div>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<div class="row">
|
|
39
|
-
<div class="large-12 columns">
|
|
40
|
-
|
|
41
|
-
<h3>Build Orbit With HTML</h3>
|
|
42
|
-
<p>Building Orbit is pretty simple using our HTML classes and structure; you'll just need to write the markup, find some images or text, fire up the Javascript and you'll be ready to go. On touch-enabled devices, Orbit has swipe functionality that makes it easy to switch slides. On screens without touch interfaces, you'll see bullet and arrow navigation if you have the options setup in your JS. Here's markup structure for Orbit:</p>
|
|
43
|
-
|
|
44
|
-
<%= code_example '
|
|
45
|
-
<!-- Basic orbit markup -->
|
|
46
|
-
<ul data-orbit>
|
|
47
|
-
<li>
|
|
48
|
-
<img src="../img/demos/demo1.jpg" />
|
|
49
|
-
<div class="orbit-caption">...</div>
|
|
50
|
-
</li>
|
|
51
|
-
<li>
|
|
52
|
-
<img src="../img/demos/demo2.jpg" />
|
|
53
|
-
<div class="orbit-caption">...</div>
|
|
54
|
-
</li>
|
|
55
|
-
<li>
|
|
56
|
-
<img src="../img/demos/demo3.jpg" />
|
|
57
|
-
<div class="orbit-caption">...</div>
|
|
58
|
-
</li>
|
|
59
|
-
</ul>', :html %>
|
|
60
|
-
|
|
61
|
-
<h5>We'll Automatically Add HTML</h5>
|
|
62
|
-
<p>To keep your markup really clean, we've let JS add what's needed for the navigation, bullets and other parts of the plugin. Once the page has been loaded, your markup will look different. Below is an example of the markup so you know what to target.</p>
|
|
63
|
-
|
|
64
|
-
<%= code_example '
|
|
65
|
-
<!-- Orbit Container -->
|
|
66
|
-
<div class="orbit-container">
|
|
67
|
-
<ul data-orbit="" class="orbit-slides-container">
|
|
68
|
-
<li>
|
|
69
|
-
<img src="../img/demos/demo3.jpg">
|
|
70
|
-
<div class="orbit-caption">...</div>
|
|
71
|
-
</li>
|
|
72
|
-
<li class="active">
|
|
73
|
-
<img src="../img/demos/demo1.jpg">
|
|
74
|
-
<div class="orbit-caption">...</div>
|
|
75
|
-
</li>
|
|
76
|
-
<li>
|
|
77
|
-
<img src="../img/demos/demo2.jpg">
|
|
78
|
-
<div class="orbit-caption">...</div>
|
|
79
|
-
</li>
|
|
80
|
-
<li>
|
|
81
|
-
<img src="../img/demos/demo3.jpg">
|
|
82
|
-
<div class="orbit-caption">...</div>
|
|
83
|
-
</li>
|
|
84
|
-
<li>
|
|
85
|
-
<img src="../img/demos/demo1.jpg">
|
|
86
|
-
<div class="orbit-caption">...</div>
|
|
87
|
-
</li>
|
|
88
|
-
</ul>
|
|
89
|
-
|
|
90
|
-
<!-- Prev/Next Arrows -->
|
|
91
|
-
<a href="#" class="orbit-prev">Prev <span></span></a>
|
|
92
|
-
<a href="#" class="orbit-next">Next <span></span></a>
|
|
93
|
-
|
|
94
|
-
<!-- Slide Numbers -->
|
|
95
|
-
<div class="orbit-slide-number">
|
|
96
|
-
<span>1</span> of <span>3</span>
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
<!-- Timer and Play/Pause Button -->
|
|
100
|
-
<div class="orbit-timer">
|
|
101
|
-
<span></span>
|
|
102
|
-
<div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
|
|
106
|
-
<!-- Orbit Bullet Slide Indicator -->
|
|
107
|
-
<ol class="orbit-bullets">
|
|
108
|
-
<li data-orbit-slide-number="1"></li>
|
|
109
|
-
<li data-orbit-slide-number="2" class="active"></li>
|
|
110
|
-
<li data-orbit-slide-number="3"></li>
|
|
111
|
-
</ol>
|
|
112
|
-
', :html %>
|
|
113
|
-
|
|
114
|
-
<hr>
|
|
115
|
-
|
|
116
|
-
<ul id="featured2" data-orbit>
|
|
117
|
-
<li data-orbit-slide="headline-1">
|
|
118
|
-
<h2>Headline 1</h2>
|
|
119
|
-
<h3>Subheadline</h3>
|
|
120
|
-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
|
|
121
|
-
</li>
|
|
122
|
-
<li data-orbit-slide="headline-2">
|
|
123
|
-
<h2>Headline 2</h2>
|
|
124
|
-
<h3>Subheadline</h3>
|
|
125
|
-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
|
|
126
|
-
</li>
|
|
127
|
-
<li data-orbit-slide="headline-3">
|
|
128
|
-
<h2>Headline 3</h2>
|
|
129
|
-
<h3>Subheadline</h3>
|
|
130
|
-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
|
|
131
|
-
</li>
|
|
132
|
-
</ul>
|
|
133
|
-
|
|
134
|
-
<hr>
|
|
135
|
-
|
|
136
|
-
<h3>Deep Linking Support</h3>
|
|
137
|
-
<p>
|
|
138
|
-
You can now link to slides in Orbit. This is useful when constructing
|
|
139
|
-
custom bullets or referencing a particular slide in a description. To
|
|
140
|
-
see it in action click on one of the links below:
|
|
141
|
-
</p>
|
|
142
|
-
|
|
143
|
-
<ul class="disc">
|
|
144
|
-
<li><a href="#" data-orbit-link="headline-1">Goto Slide 1</a></li>
|
|
145
|
-
<li><a href="#" data-orbit-link="headline-2">Goto Slide 2</a></li>
|
|
146
|
-
<li><a href="#" data-orbit-link="headline-3">Goto Slide 3</a></li>
|
|
147
|
-
</ul>
|
|
148
|
-
|
|
149
|
-
<p>
|
|
150
|
-
The markup is simple, each <kbd><li></kbd> should
|
|
151
|
-
have a <kbd>data-orbit-slide</kbd> data attribute with a
|
|
152
|
-
unique identifier for the slide. Then anywhere outside
|
|
153
|
-
of your Orbit slider you can use <kbd>data-orbit-link</kbd>
|
|
154
|
-
to reference that slide.
|
|
155
|
-
</p>
|
|
156
|
-
|
|
157
|
-
<%= code_example '
|
|
158
|
-
<ul id="featured2" data-orbit>
|
|
159
|
-
<li data-orbit-slide="headline-1">
|
|
160
|
-
<h2>Headline 1</h2>
|
|
161
|
-
<h3>Subheadline</h3>
|
|
162
|
-
<p>Pellentesque habitant morbi tristique senectus.</p>
|
|
163
|
-
</li>
|
|
164
|
-
<li data-orbit-slide="headline-2">
|
|
165
|
-
<h2>Headline 2</h2>
|
|
166
|
-
<h3>Subheadline</h3>
|
|
167
|
-
<p>Pellentesque habitant morbi tristique senectus.</p>
|
|
168
|
-
</li>
|
|
169
|
-
<li data-orbit-slide="headline-3">
|
|
170
|
-
<h2>Headline 3</h2>
|
|
171
|
-
<h3>Subheadline</h3>
|
|
172
|
-
<p>Pellentesque habitant morbi tristique senectus.</p>
|
|
173
|
-
</li>
|
|
174
|
-
</ul>
|
|
175
|
-
|
|
176
|
-
<!-- Now link to the slides above -->
|
|
177
|
-
<ul class="disc">
|
|
178
|
-
<li><a href="#" data-orbit-link="headline-1">Goto Slide 1</a></li>
|
|
179
|
-
<li><a href="#" data-orbit-link="headline-2">Goto Slide 2</a></li>
|
|
180
|
-
<li><a href="#" data-orbit-link="headline-3">Goto Slide 3</a></li>
|
|
181
|
-
</ul>
|
|
182
|
-
', :html %>
|
|
183
|
-
|
|
184
|
-
<hr>
|
|
185
|
-
|
|
186
|
-
<h3>Available SCSS Variables</h3>
|
|
187
|
-
<p>We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.</p>
|
|
188
|
-
|
|
189
|
-
<%= code_example '
|
|
190
|
-
/* We use these to control the caption styles */
|
|
191
|
-
$orbit-container-bg: #f5f5f5;
|
|
192
|
-
$orbit-caption-bg-old-browser: #000;
|
|
193
|
-
$orbit-caption-bg-old: rgb(0,0,0);
|
|
194
|
-
$orbit-caption-bg: rgba(0,0,0,0.6);
|
|
195
|
-
$orbit-caption-font-color: #fff;
|
|
196
|
-
|
|
197
|
-
/* We use these to control the left/right nav styles */
|
|
198
|
-
$orbit-nav-bg-old: rgb(0,0,0);
|
|
199
|
-
$orbit-nav-bg: rgba(0,0,0,0.6);
|
|
200
|
-
|
|
201
|
-
/* We use these to control the timer styles */
|
|
202
|
-
$orbit-timer-bg-old: rgb(0,0,0);
|
|
203
|
-
$orbit-timer-bg: rgba(0,0,0,0.6);
|
|
204
|
-
|
|
205
|
-
/* We use these to control the bullet nav styles */
|
|
206
|
-
$orbit-bullet-nav-color: #999;
|
|
207
|
-
$orbit-bullet-nav-color-active: #222;
|
|
208
|
-
|
|
209
|
-
/* We use thes to controls the style of slide numbers */
|
|
210
|
-
$orbit-slide-number-bg: rgb(0,0,0);
|
|
211
|
-
$orbit-slide-number-font-color: #fff;
|
|
212
|
-
$orbit-slide-number-padding: emCalc(5px);
|
|
213
|
-
|
|
214
|
-
// Margin for when Orbit is stacked on small screens
|
|
215
|
-
$stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function right now
|
|
216
|
-
', :css %>
|
|
217
|
-
|
|
218
|
-
<hr>
|
|
219
|
-
|
|
220
|
-
<h3>Using the JavaScript</h3>
|
|
221
|
-
<p>You'll need to include <code>modularis.orbit.js</code> if you want to use Orbit. You'll also need to make sure to include <code>zepto.js</code> and/or <code>jquery.js</code> along with <code>modularis.js</code> above the Orbit plugin. Above your closing <code></body></code> tag include the Modularis library and either Zepto or jQuery.</p>
|
|
222
|
-
|
|
223
|
-
<p><a href="../javascript.html" title="How to install Modularis JavaScript">Read how to install Modularis JavaScript</a></p>
|
|
224
|
-
|
|
225
|
-
<p>Required Modularis Library: <code>modularis.orbit.js</code></p>
|
|
226
|
-
|
|
227
|
-
<p>Then, you'll need to add a <kbd>data-orbit</kbd> data attribute to make the JS work properly on that element. That looks like:</p>
|
|
228
|
-
|
|
229
|
-
<%= code_example '
|
|
230
|
-
<ul data-orbit>
|
|
231
|
-
...
|
|
232
|
-
</ul>
|
|
233
|
-
', :html %>
|
|
234
|
-
|
|
235
|
-
<h5>Optional JavaScript Configuration</h5>
|
|
236
|
-
|
|
237
|
-
<p>Orbit options can only be passed in during initialization at this time.</p>
|
|
238
|
-
|
|
239
|
-
<%= code_example "
|
|
240
|
-
{
|
|
241
|
-
timer_speed: 10000,
|
|
242
|
-
animation_speed: 500,
|
|
243
|
-
bullets: true,
|
|
244
|
-
stack_on_small: true,
|
|
245
|
-
container_class: 'orbit-container',
|
|
246
|
-
stack_on_small_class: 'orbit-stack-on-small',
|
|
247
|
-
next_class: 'orbit-next',
|
|
248
|
-
prev_class: 'orbit-prev',
|
|
249
|
-
timer_container_class: 'orbit-timer',
|
|
250
|
-
timer_paused_class: 'paused',
|
|
251
|
-
timer_progress_class: 'orbit-progress',
|
|
252
|
-
slides_container_class: 'orbit-slides-container',
|
|
253
|
-
bullets_container_class: 'orbit-bullets',
|
|
254
|
-
bullets_active_class: 'active',
|
|
255
|
-
slide_number_class: 'orbit-slide-number',
|
|
256
|
-
caption_class: 'orbit-caption',
|
|
257
|
-
active_slide_class: 'active',
|
|
258
|
-
orbit_transition_class: 'orbit-transitioning'
|
|
259
|
-
}", :js %>
|
|
260
|
-
|
|
261
|
-
<p>Starting in 4.0.7 you can also use the <code>data-options</code> attribute to pass configuration settings to Orbit. Treat it like a <code>style</code> property:</p>
|
|
262
|
-
|
|
263
|
-
<%= code_example '
|
|
264
|
-
<ul data-orbit data-options="timer_speed:2500; bullets:false;">
|
|
265
|
-
...
|
|
266
|
-
</ul>
|
|
267
|
-
', :html %>
|
|
268
|
-
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
|
|
272
|
-
</div>
|
|
273
|
-
<div class="large-3 pull-9 columns">
|
|
274
|
-
<%= render "_sidebar-components.html.erb" %>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
<% @side_nav = "nav" %>
|
|
2
|
-
|
|
3
|
-
<div class="row">
|
|
4
|
-
<div class="large-9 push-3 columns">
|
|
5
|
-
|
|
6
|
-
<% @page_title = "Pagination" %>
|
|
7
|
-
<div class="row">
|
|
8
|
-
<div class="large-12 columns">
|
|
9
|
-
<h1><%= @page_title %></h1>
|
|
10
|
-
<h4 class="subheader">Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long, repetitive listings or content.</h4>
|
|
11
|
-
</div>
|
|
12
|
-
</div>
|
|
13
|
-
|
|
14
|
-
<div class="row">
|
|
15
|
-
<div class="large-12 columns">
|
|
16
|
-
|
|
17
|
-
<ul class="pagination">
|
|
18
|
-
<li class="arrow unavailable"><a href="">«</a></li>
|
|
19
|
-
<li class="current"><a href="">1</a></li>
|
|
20
|
-
<li><a href="">2</a></li>
|
|
21
|
-
<li><a href="">3</a></li>
|
|
22
|
-
<li><a href="">4</a></li>
|
|
23
|
-
<li class="unavailable"><a href="">…</a></li>
|
|
24
|
-
<li><a href="">12</a></li>
|
|
25
|
-
<li><a href="">13</a></li>
|
|
26
|
-
<li class="arrow"><a href="">»</a></li>
|
|
27
|
-
</ul>
|
|
28
|
-
|
|
29
|
-
<hr>
|
|
30
|
-
|
|
31
|
-
<h3>Build With Predefined HTML Classes</h3>
|
|
32
|
-
<p>There are two ways to build pagination in Modularis 4: with our predefined HTML or with our mixin. Building pagination using our predefined classes isn't hard at all. You'll start with an unordered list and add a class of <code>.pagination</code> to it. From there, you just need to add list items with links in them. Those list items have a few options you can use:</p>
|
|
33
|
-
|
|
34
|
-
<ul class="disc">
|
|
35
|
-
<li>To create the arrows, make sure you have <code><li class="arrow"></code> as your first and last list items.</li>
|
|
36
|
-
<li>To mark the current page, use <code><li class="current"></code></li>
|
|
37
|
-
<li>Add a class of <code>.unavailable</code> to a list item to make it not clickable, like for the ellipsis in the middle.</li>
|
|
38
|
-
<li>The page numbers and symbols are always inside of an anchor that you'll link to the page.</li>
|
|
39
|
-
</ul>
|
|
40
|
-
|
|
41
|
-
<%= code_example '
|
|
42
|
-
<ul class="pagination">
|
|
43
|
-
<li class="arrow unavailable"><a href="">«</a></li>
|
|
44
|
-
<li class="current"><a href="">1</a></li>
|
|
45
|
-
<li><a href="">2</a></li>
|
|
46
|
-
<li><a href="">3</a></li>
|
|
47
|
-
<li><a href="">4</a></li>
|
|
48
|
-
<li class="unavailable"><a href="">…</a></li>
|
|
49
|
-
<li><a href="">12</a></li>
|
|
50
|
-
<li><a href="">13</a></li>
|
|
51
|
-
<li class="arrow"><a href="">»</a></li>
|
|
52
|
-
</ul>', :html %>
|
|
53
|
-
|
|
54
|
-
<p>For these styles to come across, make sure you have the default Modularis 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>
|
|
55
|
-
|
|
56
|
-
<h5>Centered Pagination</h5>
|
|
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>
|
|
58
|
-
|
|
59
|
-
<%= code_example '
|
|
60
|
-
<div class="pagination-centered">
|
|
61
|
-
<ul class="pagination">
|
|
62
|
-
<li class="arrow unavailable"><a href="">«</a></li>
|
|
63
|
-
<li class="current"><a href="">1</a></li>
|
|
64
|
-
<li><a href="">2</a></li>
|
|
65
|
-
<li><a href="">3</a></li>
|
|
66
|
-
<li><a href="">4</a></li>
|
|
67
|
-
<li class="unavailable"><a href="">…</a></li>
|
|
68
|
-
<li><a href="">12</a></li>
|
|
69
|
-
<li><a href="">13</a></li>
|
|
70
|
-
<li class="arrow"><a href="">»</a></li>
|
|
71
|
-
</ul>
|
|
72
|
-
</div>', :html %>
|
|
73
|
-
|
|
74
|
-
<div class="pagination-centered">
|
|
75
|
-
<ul class="pagination">
|
|
76
|
-
<li class="arrow unavailable"><a href="">«</a></li>
|
|
77
|
-
<li class="current"><a href="">1</a></li>
|
|
78
|
-
<li><a href="">2</a></li>
|
|
79
|
-
<li><a href="">3</a></li>
|
|
80
|
-
<li><a href="">4</a></li>
|
|
81
|
-
<li class="unavailable"><a href="">…</a></li>
|
|
82
|
-
<li><a href="">12</a></li>
|
|
83
|
-
<li><a href="">13</a></li>
|
|
84
|
-
<li class="arrow"><a href="">»</a></li>
|
|
85
|
-
</ul>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
|
-
<hr>
|
|
89
|
-
|
|
90
|
-
<h3>Build with a Mixin</h3>
|
|
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/themepile/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_pagination.scss">_pagination.scss</a> from Github and throw them into a Modularis folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
|
|
92
|
-
|
|
93
|
-
<%= code_example '
|
|
94
|
-
@import "modularis/modularis-global", "modularis/components/global", "modularis/components/pagination";
|
|
95
|
-
', :css %>
|
|
96
|
-
|
|
97
|
-
<p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:</p>
|
|
98
|
-
|
|
99
|
-
<%= code_example '
|
|
100
|
-
<ul class="your-class-name">
|
|
101
|
-
<li class="arrow unavailable"><a href="">«</a></li>
|
|
102
|
-
<li class="current"><a href="">1</a></li>
|
|
103
|
-
<li><a href="">2</a></li>
|
|
104
|
-
<li><a href="">3</a></li>
|
|
105
|
-
<li><a href="">4</a></li>
|
|
106
|
-
<li class="unavailable"><a href="">…</a></li>
|
|
107
|
-
<li><a href="">12</a></li>
|
|
108
|
-
<li><a href="">13</a></li>
|
|
109
|
-
<li class="arrow"><a href="">»</a></li>
|
|
110
|
-
</ul>
|
|
111
|
-
', :html %>
|
|
112
|
-
|
|
113
|
-
<h5>Quick Mixin</h5>
|
|
114
|
-
<p>You can build your pagination using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered full list of items, the code looks like this:</p>
|
|
115
|
-
|
|
116
|
-
<%= code_example '
|
|
117
|
-
.your-class-name { @include pagination; }', :css %>
|
|
118
|
-
|
|
119
|
-
<ul class="pagination">
|
|
120
|
-
<li class="arrow unavailable"><a href="">«</a></li>
|
|
121
|
-
<li class="current"><a href="">1</a></li>
|
|
122
|
-
<li><a href="">2</a></li>
|
|
123
|
-
<li><a href="">3</a></li>
|
|
124
|
-
<li><a href="">4</a></li>
|
|
125
|
-
<li class="unavailable"><a href="">…</a></li>
|
|
126
|
-
<li><a href="">12</a></li>
|
|
127
|
-
<li><a href="">13</a></li>
|
|
128
|
-
<li class="arrow"><a href="">»</a></li>
|
|
129
|
-
</ul>
|
|
130
|
-
|
|
131
|
-
<h5>Centering</h5>
|
|
132
|
-
<p>Just like with the CSS, we've made it easy to center the pagination element using the quick mixin.</p>
|
|
133
|
-
|
|
134
|
-
<%= code_example '
|
|
135
|
-
.your-class-name { @include pagination($centered, $base-styles); }
|
|
136
|
-
|
|
137
|
-
/* Setting this to true will add styles to the parent of your pagination element for centering */
|
|
138
|
-
$centered: false
|
|
139
|
-
|
|
140
|
-
/* This controls whether or not the base styles come across. Useful when applying the centered option. */
|
|
141
|
-
$base-style: true
|
|
142
|
-
', :css %>
|
|
143
|
-
|
|
144
|
-
<h5>Default SCSS Variables</h5>
|
|
145
|
-
|
|
146
|
-
<%= code_example '
|
|
147
|
-
/* We use these to control the pagination container */
|
|
148
|
-
$pagination-height: emCalc(24px);
|
|
149
|
-
$pagination-margin: emCalc(-5px);
|
|
150
|
-
|
|
151
|
-
/* We use these to set the list-item properties */
|
|
152
|
-
$pagination-li-float: $default-float;
|
|
153
|
-
$pagination-li-height: emCalc(24px);
|
|
154
|
-
$pagination-li-font-color: #222;
|
|
155
|
-
$pagination-li-font-size: emCalc(14px);
|
|
156
|
-
$pagination-li-margin: emCalc(5px);
|
|
157
|
-
|
|
158
|
-
/* We use these for the pagination anchor links */
|
|
159
|
-
$pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
|
|
160
|
-
$pagination-link-font-color: #999;
|
|
161
|
-
$pagination-link-active-bg: darken(#fff, 10%);
|
|
162
|
-
|
|
163
|
-
/* We use these for disabled anchor links */
|
|
164
|
-
$pagination-link-unavailable-cursor: default;
|
|
165
|
-
$pagination-link-unavailable-font-color: #999;
|
|
166
|
-
$pagination-link-unavailable-bg-active: transparent;
|
|
167
|
-
|
|
168
|
-
/* We use these for currently selected anchor links */
|
|
169
|
-
$pagination-link-current-background: $primary-color;
|
|
170
|
-
$pagination-link-current-font-color: #fff;
|
|
171
|
-
$pagination-link-current-font-weight: bold;
|
|
172
|
-
$pagination-link-current-cursor: default;
|
|
173
|
-
$pagination-link-current-active-bg: $primary-color;', :css %>
|
|
174
|
-
|
|
175
|
-
<p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_modularis-global.scss</strong>.</p>
|
|
176
|
-
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
<div class="large-3 pull-9 columns">
|
|
181
|
-
<%= render "_sidebar-components.html.erb" %>
|
|
182
|
-
</div>
|
|
183
|
-
</div>
|