rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

docs redesign a bit

Browse Source
This commit is contained in:
Mark Otto 2015-03-09 14:07:46 +00:00
parent 9dc5868ea7
commit 6944e418eb
8 changed files with 93 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/header.html
View File

@ -23,6 +23,9 @@
<!-- Documentation extras -->
<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
<!-- Google Web fonts -->
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>

25
docs/_includes/nav-home.html
View File

@ -1,18 +1,9 @@
<header class="navbar navbar-static-top bs-nav-home" id="top" role="banner">
<div class="container">
<h3 class="navbar-brand">
<a href="{{ site.baseurl }}">Bootstrap</a>
</h3>
<ul class="nav nav-pills pull-right">
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/getting-started/quick-start" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</li>
</ul>
</div>
<header class="bd-header" role="banner">
<a class="bd-header-mark" href="{{ site.baseurl }}">Bootstrap</a>
<nav class="nav nav-pills bd-header-nav">
<a class="nav-link" href="{{ site.baseurl }}/getting-started/quick-start" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
<a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav>
</header>

3
docs/_layouts/home.html
View File

@ -11,9 +11,6 @@
</div>
</a>
<!-- Docs master nav -->
{% include nav-home.html %}
<!-- Page content of course! -->
{{ content }}

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css.map
View File

File diff suppressed because one or more lines are too long

94
docs/assets/scss/docs.scss
View File

@ -74,8 +74,7 @@ body {
width: 9rem;
height: 9rem;
font-size: 6.5rem;
font-weight: 500;
line-height: 8.8rem;
line-height: 9rem;
color: #fff;
text-align: center;
cursor: default;
@ -210,39 +209,81 @@ body {
// Homepage
//
.bd-header {
@include clearfix;
padding-bottom: .5rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255,255,255,.25);
.bd-header-mark {
float: left;
padding-top: .6em;
padding-bottom: .6em;
font-size: 1.25rem;
font-weight: 500;
color: #fff;
}
}
.bd-header-nav {
float: right;
.nav-link {
float: left;
color: #fff;
&:hover {
background-color: transparent;
}
}
}
// Masthead (headings and download button)
.bs-docs-masthead {
position: relative;
padding: 2rem 1rem;
color: #cdbfe3;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #6f5499;
@include gradient-vertical($bs-purple, #6f5499);
// color: #cdbfe3;
// text-align: center;
// text-shadow: 0 1px 0 rgba(0,0,0,.1);
// background-color: #6f5499;
// @include gradient-vertical($bs-purple, #6f5499);
background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
}
.bs-docs-masthead .bs-docs-booticon {
margin: 0 auto 2rem;
margin: 0 0 2rem;
color: $gray;
border-color: $gray;
}
.bs-docs-masthead h1 {
font-weight: 300;
line-height: 1;
color: #fff;
// color: #fff;
}
.bs-docs-masthead .lead {
margin: 0 auto 2rem;
margin-bottom: 2rem;
font-size: 1.25rem;
color: #fff;
// color: #fff;
}
.bs-docs-masthead .version {
margin-top: -1rem;
margin-bottom: 2rem;
color: #9783b9;
// color: #9783b9;
}
.bs-docs-masthead .btn {
width: 100%;
padding: 1rem 2rem;
font-size: 1.25rem;
font-weight: 500;
color: $gray;
border-color: $gray;
&:hover {
color: #fff;
background-color: $gray;
}
}
@media (min-width: 480px) {
@ -253,7 +294,11 @@ body {
@media (min-width: 768px) {
.bs-docs-masthead {
padding: 5rem 0;
padding: 2rem 0 4rem;
// padding: 5rem 0;
}
.bd-header {
margin-bottom: 4rem;
}
.bs-docs-masthead h1 {
font-size: 4rem;
@ -408,15 +453,15 @@ body {
.bs-docs-masthead {
.carbonad {
float: none;
margin: 0 auto !important;
color: $bs-purple-light !important;
background: transparent !important;
border: 1px solid #866ab3 !important;
}
.carbonad-text a,
.carbonad-tag a {
color: #fff !important;
margin: 0 !important;
// color: $bs-purple-light !important;
// background: transparent !important;
// border: 1px solid #866ab3 !important;
}
// .carbonad-text a,
// .carbonad-tag a {
// color: #fff !important;
// }
}
}
@ -450,7 +495,8 @@ body {
width: 6rem;
margin: 2.5rem auto;
}
.bs-docs-featurette h3 {
.bs-docs-featurette h4 {
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: normal;
color: #333;
@ -701,6 +747,10 @@ body {
}
.bs-docs-sidenav {
display: none;
}
.bs-docs-toc-link {
display: block;
padding: 4px 20px;

6
docs/getting-started/quick-start.md
View File

@ -7,9 +7,10 @@ Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcd
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
**Disabled for v4 during alpha releases.**
<div class="alert alert-warning">
<strong>Heads up!</strong> Much of this page will be inaccurate during the v4 alpha releases.
</div>
{% comment %}
{% highlight html %}
<link rel="stylesheet" href="{{ site.cdn.css }}">
{% endhighlight %}
@ -47,4 +48,3 @@ Put it all together and your pages should look like this:
{% endhighlight %}
And that's it. Happy Bootstrapping!
{% endcomment %}

9
docs/index.html
View File

@ -3,9 +3,10 @@ layout: home
title: Bootstrap &middot; The world's most popular mobile-first and responsive front-end framework.
---
<main class="bs-docs-masthead" id="content" role="main" tabindex="-1">
<div class="container">
{% include nav-home.html %}
<span class="bs-docs-booticon outline">B</span>
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
<p class="lead">
@ -26,17 +27,17 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<div class="row">
<div class="col-sm-4">
<img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
<h3>Preprocessors</h3>
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="col-sm-4">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
<h3>One framework, every device.</h3>
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="col-sm-4">
<img src="assets/img/components.png" alt="Components" class="img-responsive">
<h3>Full of features</h3>
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
</div>