Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add docs "Welcome" section #10528

Closed
wants to merge 8 commits into from
Closed

Add docs "Welcome" section #10528

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7754941
Add Welcome section to docs
mdo Sep 9, 2013
f00e6de
shorter avatar urls
mdo Sep 9, 2013
d42591e
use irc link
mdo Sep 9, 2013
632e3c4
Merge branch 'master' into docs_welcome
mdo Sep 9, 2013
674e83a
Copy edits from @cvrebert and @juthilo
mdo Sep 9, 2013
ea99a0a
dat @juthilo edit
mdo Sep 9, 2013
fb9c81f
dat hash
mdo Sep 9, 2013
e876da4
get HTML closer to validating
cvrebert Sep 17, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ Editor preferences are available in the [editor config](.editorconfig) for easy
Keep track of development and community news.

* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
* Read and subscribe to the [The Official Bootstrap Blog](http://blog.getbootstrap.com).
* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Proposal for this line and the adapted one in getting-started,html:

Chat with fellow Bootstrappers using IRC on the irc.freenode.net server, in the ##twitter-bootstrap channel.

The link is actually irc://irc.freenode.net/#twitter-bootstrap (including the #), because the channel is "non-primary" and has two ##.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gah, the double hash in the URL doesn't work for me. Might need to ditch the URL.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huh? There's one hash in the URL and a double hash in the channel name.


Expand Down
9 changes: 9 additions & 0 deletions _includes/nav-getting-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
<li>
<a href="#welcome">Welcome</a>
<ul class="nav">
<li><a href="#welcome-history">Brief history</a></li>
<li><a href="#welcome-core-team">Core team</a></li>
<li><a href="#welcome-callouts">Callouts</a></li>
<li><a href="#welcome-community">Community</a></li>
</ul>
</li>
<li>
<a href="#download">Download Bootstrap</a>
<ul class="nav">
Expand Down
64 changes: 55 additions & 9 deletions assets/css/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,33 +514,79 @@ h1[id] {

/* Common styles for all types */
.bs-callout {
/*position: relative;*/
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
padding: 20px;
border-left: 3px solid #eee;
/*border-width: 1px 1px 1px 10px;*/
}
/*.bs-callout:before {
position: absolute;
top: 0;
left: -20px;
color: #fff;
width: 20px;
height: 20px;
}*/
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
/*background-color: #fff;*/
}

/* Variations */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #dFb5b4;
background-color: #fdf7f7;
border-color: #eed3d7;
}
.bs-callout-danger h4 {
color: #b94a48;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
background-color: #faf8f0;
border-color: #faebcc;
}
.bs-callout-warning h4 {
color: #c09853;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #d0e3f0;
background-color: #f4f8fa;
border-color: #bce8f1;
}
.bs-callout-info h4 {
color: #3a87ad;
}


/*
* Team members
*
* Avatars, names, and usernames for core team.
*/

.bs-team .team-member {
color: #555;
line-height: 32px;
}
.bs-team .team-member:hover {
color: #333;
text-decoration: none;
}
.bs-team iframe {
float: right;
margin-top: 6px;
}
.bs-team img {
float: left;
width: 32px;
margin-right: 10px;
border-radius: 4px;
}


Expand Down
67 changes: 67 additions & 0 deletions getting-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,72 @@
---


<!-- Welcome
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="welcome">Welcome!</h1>
</div>
<p class="lead">You're looking at the official documentation for Bootstrap, a front-end framework for building on the Web. Get the background story on Bootstrap, useful tidbits about the docs, helpful community links, and more.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps include the version number in the 1st sentence.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a thought: the second sentence could be interpreted as a description for the whole docs. Perhaps include a 'below' to make clear it's only describing the following section's contents?


<h2 id="welcome-history">Brief history</h3>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops! Just checked the Travis build. You opened an <h2> but closed an <h3> here.

<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Before being an open source framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held it's <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded. It served as the style guide for internal tools development at the company for over a year before it's public release.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both of the "it's"-es should be "its".

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Before being an open source framework," ==> "Prior to being open-sourced," ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

<p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952">Friday, August 19, 2011</a>, we've had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Perhaps add a <time> tag
  • Perhaps include super-brief summaries of the main goal of each rewrite.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done and done.


<h2 id="welcome-core-team">Core team</h2>
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
<div class="list-group bs-team">
<a class="list-group-item team-member" href="https://github.com/mdo">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&type=follow" width="120" height="20"></iframe>
<img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@mdo">
<strong>Mark Otto</strong> <small>@mdo</small>
</a>
<a class="list-group-item team-member" href="https://github.com/fat">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=fat&type=follow" width="120" height="20"></iframe>
<img src="http://www.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8" alt="@fat">
<strong>Jacob Thornton</strong> <small>@fat</small>
</a>
<a class="list-group-item team-member" href="https://github.com/juthilo">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Erm...

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm so sorry, I get a little bit encroaching sometimes. 😱

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hrmmm?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You copied my profile URL into Chris's section. Or were you referring to my weird comment above?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still oughta be /cvrebert, not /juthilo here. (Per discussion in outdated diff.)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doh, got it.

<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=cvrebert&type=follow" width="120" height="20"></iframe>
<img src="http://www.gravatar.com/avatar/edec428c425453955f770095a7d26c50" alt="@cvrebert">
<strong>Chris Rebert</strong> <small>@cvrebert</small>
</a>
<a class="list-group-item team-member" href="https://github.com/juthilo">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=juthilo&type=follow" width="120" height="20"></iframe>
<img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@juthilo">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is @mdo's avatar instead of @juthilo's.

<strong>Julian Thilo</strong> <small>@juthilo</small>
</a>
</div>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md">contributing guidelines</a> for more information.</p>

<h2 id="welcome-callouts">Callouts</h2>
<p>We use callouts throughout the docs to direct attention to important contextual information. These callouts can be informative and optional (blue), warnings (yellow), or dangerously important (red).</p>
<div class="bs-callout bs-callout-info">
<h4>Extra information</h4>
<p>These are helpful notes that provide background information or additional context.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Heads up</h4>
<p>This is a warning used to highlight pertinent, though not necessarily required, information.</p>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Potential danger ahead</h4>
<p>Pay attention to these for potentially dangerous or tricky requirements, bugs, and more.</p>
</div>
<p>See something worth calling out? Let us know with an <a href="https://github.com/twbs/bootstrap/issues/new">issue on GitHub</a>.</p>

<h2 id="welcome-community">Community</h2>
<p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
<ul>
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
<li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
<li>Chat with fellow Bootstrappers in IRC. On the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "On..." part is an incomplete sentence fragment.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be "on IRC" rather than "in IRC".
We should also gloss what the IRC acronym means.

<li>Find inspiring examples of Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be "of Bootstrap use" (or "usage").

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check.

</ul>
<p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
</div>


<!-- Getting started
================================================== -->
<div class="bs-docs-section">
Expand Down Expand Up @@ -55,6 +121,7 @@ <h4>Compiling Bootstrap's LESS files</h4>
</div>
</div>


<!-- File structure
================================================== -->
<div class="bs-docs-section">
Expand Down