From 61151f8d3dee94d12ec4a22f16809ce94eb3b60e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 9 Jul 2014 21:35:27 -0700
Subject: [PATCH] rewrite overview in markdown
---
docs/_includes/css/overview.html | 52 -------------------
docs/_includes/css/overview.md | 86 ++++++++++++++++++++++++++++++++
docs/css.html | 5 +-
3 files changed, 90 insertions(+), 53 deletions(-)
delete mode 100644 docs/_includes/css/overview.html
create mode 100644 docs/_includes/css/overview.md
diff --git a/docs/_includes/css/overview.html b/docs/_includes/css/overview.html
deleted file mode 100644
index 3a942da3b1..0000000000
--- a/docs/_includes/css/overview.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<div class="bs-docs-section">
- <h1 id="overview" class="page-header">Overview</h1>
-
- <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
-
- <h3 id="overview-doctype">HTML5 doctype</h3>
- <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
-{% highlight html %}
-<!DOCTYPE html>
-<html lang="en">
- ...
-</html>
-{% endhighlight %}
-
- <h3 id="overview-mobile">Mobile first</h3>
- <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
- <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
-{% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1">
-{% endhighlight %}
- <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p>
-{% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-{% endhighlight %}
-
- <h3 id="overview-type-links">Typography and links</h3>
- <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
- <ul>
- <li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
- <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
- <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
- </ul>
- <p>These styles can be found within <code>scaffolding.less</code>.</p>
-
- <h3 id="overview-normalize">Normalize.css</h3>
- <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
-
- <h3 id="overview-container">Containers</h3>
- <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p>
- <p>Use <code>.container</code> for a responsive fixed width container.</p>
-{% highlight html %}
-<div class="container">
- ...
-</div>
-{% endhighlight %}
- <p>Use <code>.container-fluid</code> for a full width container, spanning the entire width of your viewport.</p>
-{% highlight html %}
-<div class="container-fluid">
- ...
-</div>
-{% endhighlight %}
-</div>
diff --git a/docs/_includes/css/overview.md b/docs/_includes/css/overview.md
new file mode 100644
index 0000000000..552ac2a0bc
--- /dev/null
+++ b/docs/_includes/css/overview.md
@@ -0,0 +1,86 @@
+<a id="overview"></a>
+
+# Overview
+
+Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
+
+
+
+<a id="overview-doctype"></a>
+
+### HTML5 doctype
+
+Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
+
+{% highlight html %}
+<!DOCTYPE html>
+<html lang="en">
+ ...
+</html>
+{% endhighlight %}
+
+
+
+<a id="overview-mobile"></a>
+
+### Mobile first
+
+With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, **Bootstrap is mobile first**. Mobile first styles can be found throughout the entire library instead of in separate files.
+
+To ensure proper rendering and touch zooming, **add the viewport meta tag** to your `<head>`.
+
+{% highlight html %}
+<meta name="viewport" content="width=device-width, initial-scale=1">
+{% endhighlight %}
+
+You can disable zooming capabilities on mobile devices by adding `user-scalable=no` to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!
+
+{% highlight html %}
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+{% endhighlight %}
+
+
+
+<a id="overview-type-links"></a>
+
+### Typography and links
+
+Bootstrap sets basic global display, typography, and link styles. Specifically, we:
+
+- Set `background-color: #fff;` on the `<body>`
+- Use the `@font-family-base`, `@font-size-base`, and `@line-height-base` attributes as our typographic base
+- Set the global link color via `@link-color` and apply link underlines only on `:hover`
+
+These styles can be found within `scaffolding.less`.
+
+
+
+<a id="overview-normalize"></a>
+
+### Normalize
+
+For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices.
+
+
+
+<a id="overview-containers"></a>
+
+### Containers
+
+Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to `padding` and more, neither container is nestable.
+
+Use `.container` for a responsive fixed width container.
+
+{% highlight html %}
+<div class="container">
+ ...
+</div>
+{% endhighlight %}
+
+Use `.container-fluid` for a full width container, spanning the entire width of your viewport.
+
+{% highlight html %}
+<div class="container-fluid">
+ ...
+</div>
+{% endhighlight %}
diff --git a/docs/css.html b/docs/css.html
index 49227c1f1c..38e50585ea 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -5,7 +5,10 @@ slug: css
lead: "Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system."
---
-{% include css/overview.html %}
+{% markdown %}
+ {% include css/overview.md %}
+{% endmarkdown %}
+
{% include css/grid.html %}
{% include css/type.html %}
{% include css/code.html %}
--
GitLab