Skip to content
Browse files

Move demo page over to foundation

  • Loading branch information...
1 parent aa9bda4 commit ab2f9c4cc67d2a9caa6e59ffde80bda09440f6a0 @mkelly12 mkelly12 committed
Showing with 461 additions and 56 deletions.
  1. +5 −29 demo/demo-style.css
  2. +47 −27 demo/demo.html
  3. +126 −0 demo/globals.css
  4. +104 −0 demo/grid.css
  5. +115 −0 demo/mobile.css
  6. +64 −0 demo/typography.css
View
34 demo/demo-style.css
@@ -3,18 +3,17 @@ will still work like a champ (except any content block needs a background which
our demo gets from this sheet) */
.container {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -300px 0 0 -470px; }
+/* padding: 100px;*/
+}
.content { background: url(dummy-images/coffee.jpg); }
+
.content h1 {
font-size: 40px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
- margin-top: 180px;
+ margin-top: 15%;
color: #222;
line-height: 50px; }
.content h3 {
@@ -22,27 +21,4 @@ our demo gets from this sheet) */
font-size: 22px;
color: #222; }
-.orbit-wrapper { margin-bottom: 100px; }
-
-/* --------------------------------------------------
- Global Reset & Standards
- -------------------------------------------------- */
- html, body { margin: 0; padding: 0; }
- h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, section { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
- table { border-collapse: collapse; border-spacing: 0; }
- ol, ul { list-style: none; }
-
- body { background: #fff; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; text-shadow: 0 0 1px rgba(0,0,0,0.01); color: #555; }
-
- h4 {
- font-weight: bold;
- color: #222;
- font-size: 15px; }
-
- a {
- color: #00baff;
- text-decoration: none;
- font-weight: bold;
- font-size: 12px; }
-
- a:hover { text-decoration: underline; }
+.orbit-wrapper { margin-bottom: 100px; }
View
74 demo/demo.html
@@ -18,6 +18,10 @@
<!-- Attach our CSS -->
<link rel="stylesheet" href="../orbit-1.3.0.css">
+ <link rel="stylesheet" href="globals.css">
+ <link rel="stylesheet" href="grid.css">
+ <link rel="stylesheet" href="mobile.css">
+ <link rel="stylesheet" href="typography.css">
<link rel="stylesheet" href="demo-style.css">
<!-- Attach necessary JS -->
@@ -36,6 +40,7 @@
$(window).load(function() {
$('#featured').orbit({bullets: true});
$('#featured2').orbit({bullets: true});
+ $('#responsive').orbit({bullets: true, fluid: true});
});
</script>
@@ -43,39 +48,54 @@
<body>
<div class="container">
- <h4>ZURB's Orbit Slider</h4>
- <a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a>
-
-
-
-
-<!-- =======================================
+ <div class="row">
+ <div class="ten columns">
+ <h4>ZURB's Orbit Slider</h4>
+ <a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a>
+
+
+ <div id="responsive">
+ <div class="content" style="">
+ <h1>Orbit does content now.</h1>
+ <h3>Highlight me...I'm text.</h3>
+ </div>
+ <img src="dummy-images/overflow.jpg" />
+ <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
+ <img src="dummy-images/features.jpg" />
+ </div>
-THE ACTUAL ORBIT SLIDER CONTENT
+ <!-- =======================================
-======================================= -->
- <div id="featured">
- <div class="content" style="">
- <h1>Orbit does content now.</h1>
- <h3>Highlight me...I'm text.</h3>
+ THE ACTUAL ORBIT SLIDER CONTENT
+
+ ======================================= -->
+ <div id="featured">
+ <div class="content" style="">
+ <h1>Orbit does content now.</h1>
+ <h3>Highlight me...I'm text.</h3>
+ </div>
+ <a href=""><img src="dummy-images/overflow.jpg" /></a>
+ <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
+ <img src="dummy-images/features.jpg" />
+ </div>
+ <!-- Captions for Orbit -->
+ <span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>
+
+
+ <div id="featured2">
+ <div class="content" style="">
+ <h1>Orbit does content now.</h1>
+ <h3>Highlight me...I'm text.</h3>
+ </div>
+ <a href=""><img src="dummy-images/overflow.jpg" /></a>
+ <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
+ <img src="dummy-images/features.jpg" />
+ </div>
</div>
- <a href=""><img src="dummy-images/overflow.jpg" /></a>
- <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
- <img src="dummy-images/features.jpg" />
</div>
- <!-- Captions for Orbit -->
- <span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>
- <div id="featured2">
- <div class="content" style="">
- <h1>Orbit does content now.</h1>
- <h3>Highlight me...I'm text.</h3>
- </div>
- <a href=""><img src="dummy-images/overflow.jpg" /></a>
- <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
- <img src="dummy-images/features.jpg" />
- </div>
+
</div>
View
126 demo/globals.css
@@ -0,0 +1,126 @@
+/* Artfully Masterminded by ZURB */
+
+/* --------------------------------------------------
+ Table of Contents
+-----------------------------------------------------
+:: Reset & Standards
+:: Links
+:: Lists
+:: Tables
+:: Misc
+*/
+
+
+/* --------------------------------------------------
+ :: Global Reset & Standards
+ -------------------------------------------------- */
+
+ /*
+ Eric Meyer's CSS Reset
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+ */
+
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ html {
+ font-size: 62.5%;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+
+
+ body { background: #fff; font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; }
+
+
+
+/* --------------------------------------------------
+ :: Links
+ -------------------------------------------------- */
+ a { color: #2a85e8; text-decoration: none; outline: 0; line-height: inherit; }
+ a:hover { color: #11639d; }
+ p a, p a:visited { line-height: inherit; }
+
+
+/* --------------------------------------------------
+ :: Lists
+ -------------------------------------------------- */
+ ul, ol { margin-bottom: 18px; }
+ ul { list-style: none outside; }
+ ol { list-style: decimal; }
+ ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
+ ul.square { list-style: square outside; }
+ ul.circle { list-style: circle outside; }
+ ul.disc { list-style: disc outside; }
+ ul ul, ol ol { margin: 4px 0 5px 30px; }
+ li { margin-bottom: 12px; }
+ ul.large li { line-height: 21px; }
+
+
+/* --------------------------------------------------
+ :: Tables
+ -------------------------------------------------- */
+ table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 100%; margin: 0 0 18px; border: 1px solid #ddd; }
+
+ table thead { background: #f5f5f5; }
+ table thead tr th,
+ table tbody tr td { font-size: 12px; line-height: 18px; text-align: left; }
+ table thead tr th { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
+ table thead tr th:first-child { border-left: none; }
+ table thead tr th:last-child { border-right: none; }
+
+ table thead tr { }
+ table tbody { }
+ table tbody tr { }
+ table tbody tr.even,
+ table tbody tr.alt { background: #f9f9f9; }
+ table tbody tr:nth-child(even) { background: #f9f9f9; }
+ table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
+
+/* --------------------------------------------------
+ :: Misc
+---------------------------------------------------*/
+ .left { float: left; }
+ .right { float: right; }
+ .hide { display: none; }
+ .highlight { background: #ff0; }
View
104 demo/grid.css
@@ -0,0 +1,104 @@
+/* Arfully Masterminded by ZURB */
+
+/* --------------------------------------------------
+ :: Grid
+
+ This is the mobile-friendly, responsive grid that
+ lets Foundation work much of its magic.
+
+ -------------------------------------------------- */
+
+ .container { padding: 0px 20px; }
+
+ .row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
+ /* To fix the grid into a certain size, set max-width to width */
+ .row .row { min-width: 0px; }
+
+ .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
+ .column:first-child, .columns:first-child { margin-left: 0px; }
+
+ .row .one.columns { width: 4.3%; }
+ .row .two.columns { width: 13%; }
+ .row .three.columns { width: 21.68%; }
+ .row .four.columns { width: 30.4%; }
+ .row .five.columns { width: 39.1%; }
+ .row .six.columns { width: 47.8%; }
+ .row .seven.columns { width: 56.5%; }
+ .row .eight.columns { width: 65.2%; }
+ .row .nine.columns { width: 73.9%; }
+ .row .ten.columns { width: 82.6%; }
+ .row .eleven.columns { width: 91.3%; }
+ .row .twelve.columns { width: 100%; }
+
+ .row .offset-by-one { margin-left: 13.1%; }
+ .row .offset-by-two { margin-left: 21.8%; }
+ .row .offset-by-three { margin-left: 30.5%; }
+ .row .offset-by-four { margin-left: 39.2%; }
+ .row .offset-by-five { margin-left: 47.9%; }
+ .row .offset-by-six { margin-left: 56.6%; }
+ .row .offset-by-seven { margin-left: 65.3%; }
+ .row .offset-by-eight { margin-left: 74.0%; }
+ .row .offset-by-nine { margin-left: 82.7%; }
+ .row .offset-by-ten { margin-left: 91.4%; }
+ /*.row .offset-by-eleven { margin-left: 95.7%; }*/
+
+ .row .centered { float: none; margin: 0 auto; }
+
+ /*.row .one.centered { margin-left: 47.9%; }
+ .row .two.centered { margin-left: 43.5%; }
+ .row .three.centered { margin-left: 39.2%; }
+ .row .four.centered { margin-left: 34.8%; }
+ .row .five.centered { margin-left: 30.5%; }
+ .row .six.centered { margin-left: 26.1%; }
+ .row .seven.centered { margin-left: 21.8%; }
+ .row .eight.centered { margin-left: 17.4%; }
+ .row .nine.centered { margin-left: 13.1%; }
+ .row .ten.centered { margin-left: 8.7%; }
+ .row .eleven.centered { margin-left: 4.3%; }*/
+
+ .row .offset-by-one:first-child { margin-left: 8.7%; }
+ .row .offset-by-two:first-child { margin-left: 17.4%; }
+ .row .offset-by-three:first-child { margin-left: 26.1%; }
+ .row .offset-by-four:first-child { margin-left: 34.8%; }
+ .row .offset-by-five:first-child { margin-left: 43.5%; }
+ .row .offset-by-six:first-child { margin-left: 52.2%; }
+ .row .offset-by-seven:first-child { margin-left: 60.9%; }
+ .row .offset-by-eight:first-child { margin-left: 69.6%; }
+ .row .offset-by-nine:first-child { margin-left: 78.3%; }
+ .row .offset-by-ten:first-child { margin-left: 87%; }
+ .row .offset-by-eleven:first-child { margin-left: 95.7%; }
+
+ img, object, embed { max-width: 100%; height: auto; }
+ img { -ms-interpolation-mode: bicubic; }
+
+ /* Nicolas Gallagher's micro clearfix */
+ .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
+ .row:after, .clearfix:after { clear: both; }
+ .row, .clearfix { zoom: 1; }
+
+
+
+
+/* --------------------------------------------------
+ :: Block grids
+
+ These are 2-up, 3-up, 4-up and 5-up ULs, suited
+ for repeating blocks of content. Add 'mobile' to
+ them to switch them just like the layout grid
+ (one item per line) on phones
+ -------------------------------------------------- */
+
+ .block-grid { display: block; overflow: hidden; }
+ .block-grid>li { display: block; height: auto; float: left; }
+
+ .block-grid.two-up { margin-left: -4% }
+ .block-grid.two-up>li { margin-left: 4%; width: 46%; }
+
+ .block-grid.three-up { margin-left: -2% }
+ .block-grid.three-up>li { margin-left: 2%; width: 31.3%; }
+
+ .block-grid.four-up { margin-left: -2% }
+ .block-grid.four-up>li { margin-left: 2%; width: 23%; }
+
+ .block-grid.five-up { margin-left: -1.5% }
+ .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; }
View
115 demo/mobile.css
@@ -0,0 +1,115 @@
+/* --------------------------------------------------
+ :: Grid
+ -------------------------------------------------- */
+
+ /* Tablet screens */
+ @media only screen and (device-width: 768px), (device-width: 800px) {
+ /* Currently unused */
+ }
+
+
+ /* Mobile */
+ @media only screen and (max-width: 767px) {
+ body { -webkit-text-size-adjust: none; }
+
+ .row, body, .container { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
+ .row .row .column, .row .row .columns { padding: 0; }
+ .column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; }
+ .column:last-child, .columns:last-child { margin-right: 0px; }
+ .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered { margin-left: 0% !important; }
+ }
+
+
+/* --------------------------------------------------
+ :: Block Grids
+ -------------------------------------------------- */
+
+ @media only screen and (max-width: 767px) {
+ .block-grid.mobile { margin-left: 0%; }
+ .block-grid.mobile li { float: none; width: 100%; margin-left: 0%; }
+ }
+
+
+
+/* --------------------------------------------------
+ :: Mobile Visibility Affordances
+---------------------------------------------------*/
+
+
+ .show-on-phones { display: none !important; }
+ .show-on-tablets { display: none !important; }
+ .show-on-desktops { display: block; }
+
+ .hide-on-phones { display: block !important; }
+ .hide-on-tablets { display: block !important; }
+ .hide-on-desktops { display: none; }
+
+
+ @media only screen and (max-device-width: 800px), only screen and (device-width: 800px) {
+ .hide-on-phones { display: block !important; }
+ .hide-on-tablets { display: none !important; }
+ .hide-on-desktops { display: block !important; }
+
+ .show-on-phones { display: none !important; }
+ .show-on-tablets { display: block !important; }
+ .show-on-desktops { display: none !important; }
+ }
+
+
+ @media only screen and (max-width: 767px) {
+ .hide-on-phones { display: none !important; }
+ .hide-on-tablets { display: block !important; }
+ .hide-on-desktops { display: block !important; }
+
+ .show-on-phones { display: block !important; }
+ .show-on-tablets { display: none !important; }
+ .show-on-desktops { display: none !important; }
+ }
+
+ /* only screen and (device-width: 1280px), only screen and (max-device-width: 1280px), /*
+
+
+/* --------------------------------------------------
+ :: Forms
+---------------------------------------------------*/
+
+
+ @media only screen and (max-width: 767px) {
+ div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea,
+ form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 96%; padding: 6px 2% 4px; font-size: 18px; }
+ form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; }
+ form.nice div.form-field.error small, form.nice small.error { padding: 6px 2%; display: block; }
+ form.nice div.form-field.error .small + small, form.nice .small + .error { width: auto; }
+ form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: auto; }
+ form.nice div.form-field.error .large + small, form.nice .large + .error { width: auto; }
+ }
+
+
+/* --------------------------------------------------
+ :: UI
+---------------------------------------------------*/
+
+ /* Buttons */
+ @media only screen and (max-width: 767px) {
+ .button { display: block; }
+ button.button { width: 100%; padding-left: 0px; padding-right: 0px; }
+ }
+
+ /* Tabs */
+
+ @media only screen and (max-width: 767px) {
+ dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
+ dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; }
+
+ dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0px #ccc; border-width: 1px 0px 0px; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; }
+ dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0px 0px; }
+
+ .nice.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; }
+ .nice.tabs.mobile dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; }
+ .nice.tabs.mobile dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0px; height: auto; }
+ .nice.tabs.mobile dd:first-child a.active { margin: 0; }
+
+ dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0px; }
+ dl.contained.tabs.mobile dd a { padding: 18px 20px; }
+ dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; }
+ }
View
64 demo/typography.css
@@ -0,0 +1,64 @@
+/* Arfully Masterminded by ZURB */
+
+/* --------------------------------------------------
+ :: Typography
+ -------------------------------------------------- */
+ h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 }
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
+ h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px;}
+ h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; }
+ h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 9px; }
+ h4 { font-size: 21px; font-size: 2.1rem; margin-bottom: 3px; }
+ h5 { font-size: 18px; font-size: 1.8rem; font-weight: normal; margin-bottom: 3px; }
+ h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; }
+
+ .subheader { color: #777; font-weight: 300; margin-bottom: 24px; }
+
+ p { line-height: 17px; margin: 0 0 18px; }
+ p img { margin: 0; }
+ p.lead { font-size: 18px; font-size: 1.8rem; line-height: 24px; }
+
+ /* Mobile */
+
+ @media handheld, only screen and (max-width: 767px) {
+ body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; }
+ }
+
+ em, i { font-style: italic; line-height: inherit; }
+ strong, b { font-weight: bold; line-height: inherit; }
+ small { font-size: 60%; line-height: inherit; }
+
+ h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; }
+
+/* Blockquotes */
+ blockquote, blockquote p { line-height: 20px; color: #777; }
+ blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
+ blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; }
+ blockquote cite:before { content: "\2014 \0020"; }
+ blockquote cite a, blockquote cite a:visited { color: #555; }
+
+ hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; }
+
+ abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; }
+ abbr { text-transform: none; }
+
+ /**
+ * Print styles.
+ *
+ * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
+ * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
+ */
+ @media print {
+ * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
+ -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
+ p a, p a:visited { color: #444 !important; text-decoration: underline; }
+ p a[href]:after { content: " (" attr(href) ")"; }
+ abbr[title]:after { content: " (" attr(title) ")"; }
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+ tr, img { page-break-inside: avoid; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
+ }

0 comments on commit ab2f9c4

Please sign in to comment.
Something went wrong with that request. Please try again.