gutting the docs and starting to rebuild.

This commit is contained in:
connors 2013-10-21 22:09:40 -07:00
Родитель aa62eaa76c
Коммит abf4c34e4d
4 изменённых файлов: 441 добавлений и 929 удалений

Просмотреть файл

@ -7,7 +7,8 @@ module.exports = function(grunt) {
// Metadata.
meta: {
srcPath: 'lib/',
distPath: 'dist/'
distPath: 'dist/',
docsPath: 'docs-assets/'
},
banner: '/*\n' +
@ -45,7 +46,8 @@ module.exports = function(grunt) {
dist: {
files: {
'<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss',
'<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/theme-classic.scss'
'<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/theme-classic.scss',
'<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss'
}
}
},

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -4,16 +4,17 @@ title: Ratchet
base_url: "./"
---
<header class="docs-outer-wrapper docs-header">
<div class="docs-inner-wrapper">
<hgroup class="docs-header-text">
<h1>Ratchet</h1>
<p class="docs-header-subtitle">Prototype beautiful iPhone apps with simple HTML, CSS, and JS components.</p>
<a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</hgroup>
<header class="docs-header-wrapper">
<div class="container">
<div class="column-group">
<div class="docs-header column units-2">
<h1 class="docs-title">Ratchet</h1>
<p class="docs-subtitle">Prototype beautiful iPhone apps with simple HTML, CSS, and JS components.</p>
<a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-primary button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</div>
</div>
</div>
</header>
</div>
<!--<section class="social">
<ul>

221
lib/sass/docs.scss Normal file
Просмотреть файл

@ -0,0 +1,221 @@
@import "variables.scss";
@import "mixins.scss";
//
// Documentation
// --------------------------------------------------
body {
position: static !important; // Overrides the fixed positioning of body in Ratchet
font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased; // Fix for webkit rendering
-webkit-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-rendering: optimizeLegibility;
}
// The grid
// --------------------------------------------------
.container {
margin-left: auto;
margin-right: auto;
padding-left: 2%;
padding-right: 2%;
}
.column-group {
width: auto;
}
.column {
padding-left: 15px;
padding-right: 15px;
float: left;
}
// Lines nested grids up correctly.
.column .column-group {
margin-left: -15px;
margin-right: -15px;
}
.units-1 { width: 50%; }
.units-2 { width: 100%; }
// Offsets
.offset-1 { margin-left: 50%; }
// Tablet to desktop
// --------------------------------------------------
@media screen and (min-width: 768px) {
.container {
padding: 0;
max-width: 940px;
}
.column {
padding-left: 20px;
padding-right: 20px;
}
// Lines nested grids up correctly.
.column .column-group {
margin-left: -20px;
margin-right: -20px;
}
// Override the mobile grid
.units-1 { width: 50%; }
.units-2 { width: 100%; }
// Twelve column fluid grid
.lg-units-1 { width: 8.333%; }
.lg-units-2 { width: 16.666%; }
.lg-units-3 { width: 25%; }
.lg-units-4 { width: 33.333%; }
.lg-units-5 { width: 41.666%; }
.lg-units-6 { width: 50%; }
.lg-units-7 { width: 58.333%; }
.lg-units-8 { width: 66.666%; }
.lg-units-9 { width: 75%; }
.lg-units-10 { width: 83.333%; }
.lg-units-11 { width: 91.666%; }
.lg-units-12 { width: 100%; }
// Offsets
.lg-offset-1 { margin-left: 8.333%; }
.lg-offset-2 { margin-left: 16.666%; }
.lg-offset-3 { margin-left: 25%; }
.lg-offset-4 { margin-left: 33.333%; }
.lg-offset-5 { margin-left: 41.666%; }
.lg-offset-6 { margin-left: 50%; }
.lg-offset-7 { margin-left: 58.333%; }
.lg-offset-8 { margin-left: 66.666%; }
.lg-offset-9 { margin-left: 75%; }
.lg-offset-10 { margin-left: 83.333%; }
.lg-offset-11 { margin-left: 91.666%; }
}
// Standard sized screens to large screens
// --------------------------------------------------
@media screen and (min-width: 1200px) {
.container {
max-width: 1170px;
}
.column {
padding-left: 30px;
padding-right: 30px;
}
// Lines nested grids up correctly.
.column .column-group {
margin-left: -30px;
margin-right: -30px;
}
}
// Jumbotron
// --------------------------------------------------
.docs-header-wrapper {
background-color: #fafafa;
@include hairline(single, #c8c7cc, 320px, 0);
}
.docs-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
@include animation-name(fadeintext);
@include animation-duration(2s);
.docs-title {
margin: 0;
font-size: 40px;
font-weight: 400;
}
.docs-subtitle {
margin-top: 0;
margin-bottom: 35px;
color: #777;
font-size: 22px;
font-weight: 300;
line-height: 30px;
}
}
// Misc
// --------------------------------------------------
hr {
height: 0;
margin: 10px 0 30px;
border: solid #ddd;
border-width: 1px 0 0;
clear: both;
}
.column-group {
*zoom: 1;
}
.column-group:before,
.column-group:after {
display: table;
line-height: 0;
content: "";
}
.column-group:after {
clear: both;
}
// You can also use a <br class="clear">
.clear {
display: block;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
clear: both;
}
// Animations
// --------------------------------------------------
@-webkit-keyframes fadeintext {
0% {
opacity: 0;
-webkit-transform: scale(.9);
}
50% {
opacity: 0;
-webkit-transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeinsocial {
0% {
opacity: 0;
-webkit-transform: scale(.9);
}
50% {
opacity: 0;
-webkit-transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}