basic components header
This commit is contained in:
connors
Родитель
70bd392c9e
Коммит
c9a7accd60
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<link rel="stylesheet" href="{{ page.base_url }}dist/ratchet.css">
|
||||
<link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css">
|
||||
<!-- <link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css"> -->
|
||||
<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css">
|
||||
<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css">
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
|
|
|||
|
|
@ -4,6 +4,29 @@ title: Ratchet ~ Components
|
|||
base_url: "../"
|
||||
---
|
||||
|
||||
<!-- Docs masthead -->
|
||||
<header class="docs-masthead">
|
||||
<div class="container column-group">
|
||||
<div class="column units-2">
|
||||
<nav class="docs-navigation">
|
||||
<a class="nav-item" href="#">Get started</a>
|
||||
<a class="nav-item" href="#">Components</a>
|
||||
<a class="nav-item" href="#">View on GitHub</a>
|
||||
</nav>
|
||||
<h1 class="logotype">Ratchet</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="docs-section-header">
|
||||
<div class="container column-group">
|
||||
<div class="column units-2">
|
||||
<h2 class="section-title">Components</h2>
|
||||
<p class="section-description">Design patterns that serve as basic building blocks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Banner for Mozilla/IE -->
|
||||
<p class="notice-banner">
|
||||
<strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.
|
||||
|
|
@ -19,10 +42,6 @@ base_url: "../"
|
|||
<!-- Components -->
|
||||
<div class="column-group">
|
||||
<div class="column units-2 lg-units-7">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Components</h2>
|
||||
<p class="section-description">Design patterns that serve as basic building blocks.</p>
|
||||
</div>
|
||||
<!-- In iPhone examples -->
|
||||
<div class="iphone">
|
||||
<div class="iphone-content">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* =====================================================
|
||||
* Ratchet v2.0.0
|
||||
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Licensed under http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Designed and built by @connors, @dhg, and @fat.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* =====================================================
|
||||
* Ratchet v2.0.0
|
||||
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Licensed under http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Designed and built by @connors, @dhg, and @fat.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* =====================================================
|
||||
* Ratchet v2.0.0
|
||||
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Licensed under http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Designed and built by @connors, @dhg, and @fat.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* =====================================================
|
||||
* Ratchet v2.0.0
|
||||
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Licensed under http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Designed and built by @connors, @dhg, and @fat.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* =====================================================
|
||||
* Ratchet v2.0.0
|
||||
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Licensed under http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Designed and built by @connors, @dhg, and @fat.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* =====================================================
|
||||
* Ratchet v2.0.0
|
||||
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
|
||||
* Licensed under http://www.opensource.org/licenses/MIT
|
||||
*
|
||||
* Designed and built by @connors, @dhg, and @fat.
|
||||
|
|
@ -81,6 +81,49 @@ h1, h2, h3, h4, h5, h6 {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.docs-masthead {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.docs-masthead .logotype {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.docs-navigation {
|
||||
float: right;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.docs-navigation .nav-item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.docs-section-header {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 60px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
.docs-section-header .section-title,
|
||||
.docs-section-header .section-description {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
.docs-section-header .section-title {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
}
|
||||
.docs-section-header .section-description {
|
||||
color: #777;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.component {
|
||||
padding: 50px 15px;
|
||||
margin-left: -15px;
|
||||
|
|
@ -194,7 +237,6 @@ hr {
|
|||
|
||||
@media screen and (min-width: 768px) {
|
||||
.iphone {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Overriding the button styles for the social
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
@ -83,8 +84,63 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Masthead
|
||||
// --------------------------------------------------
|
||||
|
||||
.docs-masthead {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.logotype {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.docs-navigation {
|
||||
float: right;
|
||||
padding-top: 5px;
|
||||
|
||||
.nav-item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Section header
|
||||
// --------------------------------------------------
|
||||
|
||||
.docs-section-header {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 60px; // Vertically center it optically
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fcfcfc;
|
||||
|
||||
.section-title,
|
||||
.section-description {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
.section-title {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
}
|
||||
.section-description {
|
||||
color: #777;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Components
|
||||
// --------------------------------------------------
|
||||
|
||||
.component {
|
||||
padding: 50px 15px;
|
||||
margin-left: -15px;
|
||||
|
|
@ -195,7 +251,7 @@ hr {
|
|||
// --------------------------------------------------
|
||||
@media screen and (min-width: 768px) {
|
||||
.iphone {
|
||||
display: block;
|
||||
// display: block;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче