mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 12:40:46 +00:00
Code Issues Projects Releases Wiki Activity

descriptive docs variable naming (#24521)

Browse Source 
* use descriptive docs btn naming

* rename `btn-bd-yellow` to `btn-bd-download`

* sort state vars

* sort state vars
  * info, warning, danger

* rename btn-bd-purple

* rename `.btn-bd-purple` to `.btn-bd-primary`

* align docs color variables

* generate $bd-purple-light color

* with http://razorltd.github.io/sasscolourfunctioncalculator/

* allow overide of docs variables
This commit is contained in:
m5o 2017-11-06 23:21:03 +01:00 committed by Mark Otto
parent 20b2e67ddc
commit 09ae92a0a0
5 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/docs-navbar.html
View File

@ -59,5 +59,5 @@
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
</header>

14
assets/scss/_buttons.scss
View File

@ -2,7 +2,7 @@
//
// Custom buttons for the docs.
.btn-bd-purple {
.btn-bd-primary {
font-weight: 500;
color: $bd-purple-bright;
border-color: $bd-purple-bright;
@ -15,15 +15,15 @@
}
}
.btn-bd-yellow {
.btn-bd-download {
font-weight: 500;
color: $bd-yellow;
border-color: $bd-yellow;
color: $bd-download;
border-color: $bd-download;
&:hover,
&:active {
color: $bd-graphite;
background-color: $bd-yellow;
border-color: $bd-yellow;
color: $bd-dark;
background-color: $bd-download;
border-color: $bd-download;
}
}

16
assets/scss/_variables.scss
View File

@ -1,9 +1,9 @@
// Local docs variables
$bd-purple: #563d7c;
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
$bd-purple-light: #cdbfe3;
$bd-graphite: #2a2730;
$bd-yellow: #ffe484;
$bd-danger: #d9534f;
$bd-warning: #f0ad4e;
$bd-info: #5bc0de;
$bd-purple: #563d7c !default;
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%) !default;
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%) !default;
$bd-dark: #2a2730 !default;
$bd-download: #ffe484 !default;
$bd-info: #5bc0de !default;
$bd-warning: #f0ad4e !default;
$bd-danger: #d9534f !default;

4
docs/4.0/getting-started/download.md
View File

@ -15,7 +15,7 @@ Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}**
This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).
<a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
<a href="{{ site.download.dist }}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
## Source files
@ -26,7 +26,7 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J
Should you require [build tools]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
<a href="{{ site.download.source }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
<a href="{{ site.download.source }}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
## Bootstrap CDN

2
index.html
View File

@ -17,7 +17,7 @@ layout: home
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
</p>
<div class="d-flex flex-column flex-md-row lead mb-3">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mb-md-0 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
</div>
<p class="text-muted mb-0">