diff --git a/README.md b/README.md index d11804a..bf2a753 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Ratchet v2.0 WIP [![devDependencies](https://david-dm.org/maker/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/maker/ratchet#info=devDependencies) -Prototype mobile apps with simple HTML, CSS, and JS components. +Build mobile apps with simple HTML, CSS, and JS components. ## Getting Started diff --git a/dist/ratchet.css b/dist/ratchet.css index 5b3ea55..ae2ce6d 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -314,7 +314,7 @@ strong { } h1, h2, h3, h4, h5, h6 { - margin: 10px 15px; + margin: 10px 10px; line-height: 1; } @@ -345,11 +345,16 @@ h6, .h6 { } p { - margin: 10px 15px; + margin: 10px 10px; font-size: 14px; color: #777; } +.container > h1, .container h2, .container h3, .container h4, .container h5, .container h6, .container p { + margin-left: 0; + margin-right: 0; +} + .btn { position: relative; display: inline-block; diff --git a/dist/template.html b/dist/template.html index e690b94..d89b5cc 100644 --- a/dist/template.html +++ b/dist/template.html @@ -36,45 +36,39 @@ - -
-

Ratchet

-
+ +
+

Ratchet

+
- -
-
+ +

Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:

+
+ +
- - -
- \ No newline at end of file diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f00eadc..30059d3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -138,6 +138,9 @@ body { font-size: 24px; opacity: .7; } +.docs-sub-content.with-padding { + padding-bottom: 80px; +} .docs-section { padding-top: 80px; @@ -525,11 +528,6 @@ hr { -moz-transition: background-image 0.1s linear; transition: background-image 0.1s linear; } - .device:after { - content: ''; - background-image: url("../img/iphone5s.png"); - opacity: 0; - } .device.device-fixed { position: fixed; right: auto; @@ -614,6 +612,10 @@ hr { text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } } +.example-device { + margin: 0 auto; +} + .container { margin-left: auto; margin-right: auto; diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js index b2f6fbe..d3f90b8 100644 --- a/docs/assets/js/docs.js +++ b/docs/assets/js/docs.js @@ -21,7 +21,7 @@ $(function() { win = $(window); doc = $(document); bod = $(document.body) - device = device || $('.device'); + device = device || $('.js-device'); navComponentLinks = $('.docs-nav'); componentsList = $('.components-list'); componentLinks = $('.component-example a'); diff --git a/docs/components.html b/docs/components.html index 589899f..d858f75 100644 --- a/docs/components.html +++ b/docs/components.html @@ -39,7 +39,7 @@ title: Components · Ratchet
-
+
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css index 5b3ea55..ae2ce6d 100644 --- a/docs/dist/ratchet.css +++ b/docs/dist/ratchet.css @@ -314,7 +314,7 @@ strong { } h1, h2, h3, h4, h5, h6 { - margin: 10px 15px; + margin: 10px 10px; line-height: 1; } @@ -345,11 +345,16 @@ h6, .h6 { } p { - margin: 10px 15px; + margin: 10px 10px; font-size: 14px; color: #777; } +.container > h1, .container h2, .container h3, .container h4, .container h5, .container h6, .container p { + margin-left: 0; + margin-right: 0; +} + .btn { position: relative; display: inline-block; diff --git a/sass/docs.scss b/sass/docs.scss index 7987378..a935b84 100644 --- a/sass/docs.scss +++ b/sass/docs.scss @@ -4,6 +4,7 @@ // // Documentation // -------------------------------------------------- + html, body { width: 100%; @@ -134,6 +135,9 @@ body { font-size: 24px; opacity: .7; } + &.with-padding { + padding-bottom: 80px; + } } @@ -194,6 +198,7 @@ body { // Benefits // -------------------------------------------------- + .docs-benefits { padding-bottom: 0; text-align: center; @@ -499,11 +504,11 @@ hr { clear: both; } + // Docs media queries // -------------------------------------------------- // Tablet to desktop -// -------------------------------------------------- @media screen and (min-width: 768px) { // Jumbotron .docs-header-content { @@ -564,12 +569,6 @@ hr { background-repeat: no-repeat; @include transition(background-image .1s linear); - // Pre-load device backgrounds so we stop the flicker. - &:after { - content: ''; - background-image: url("../img/iphone5s.png"); - opacity: 0; - } &.device-fixed { position: fixed; right: auto; @@ -647,6 +646,12 @@ hr { } } +// Example devices + +.example-device { + margin: 0 auto; +} + // The Chassis grid // -------------------------------------------------- diff --git a/sass/type.scss b/sass/type.scss index ee62ebc..58b8f95 100644 --- a/sass/type.scss +++ b/sass/type.scss @@ -3,7 +3,7 @@ // -------------------------------------------------- h1, h2, h3, h4, h5, h6 { - margin: 10px 15px; + margin: 10px $bar-side-spacing; line-height: 1; } h1, .h1 { font-size: 36px; } @@ -15,7 +15,15 @@ h6, .h6 { font-size: 12px; margin-top: 20px } // Paragraphs p { - margin: 10px 15px; + margin: 10px $bar-side-spacing; font-size: 14px; color: #777; +} + +// Take on the container's side spacing +.container { + > h1, h2, h3, h4, h5, h6, p { + margin-left: 0; + margin-right: 0; + } } \ No newline at end of file