Docs tweaks
- Simplify display headings example markup - Simplify footer styles - Remove z-indices hacks in the docs - Remove redundant modal styling in docs - Use `escape-svg()` to escape docs sidebar chevron - Simplify sidebar chevron code - Cleanup masthead css & fix column width between `md` & `lg` - Easier to download logo's with the `download` attribute. - Changed some color codes into variables - Cleanup brands css
This commit is contained in:
Martijn Cuppens
XhmikosR
parent
d6945d5e8f
commit
b6b96c174b
|
|
@ -12,7 +12,7 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
|
|||
|
||||
Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item">
|
||||
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
|
|
@ -20,7 +20,7 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
|
|||
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item">
|
||||
<span class="h1">Bootstrap</span>
|
||||
</div>
|
||||
|
|
@ -31,25 +31,25 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
|
|||
|
||||
## Download mark
|
||||
|
||||
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
|
||||
Download the Bootstrap mark in one of three styles, each available as an SVG file. **Click to download the logos**.
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
|
||||
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item" title="Download solid logo">
|
||||
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
</a>
|
||||
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item inverse" title="Download outlined logo">
|
||||
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
</a>
|
||||
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item inverse" title="Download inverted logo">
|
||||
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Name
|
||||
|
||||
The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item">
|
||||
<span class="h3">Bootstrap</span>
|
||||
<strong class="text-success">Right</strong>
|
||||
|
|
@ -68,11 +68,9 @@ The project and framework should always be referred to as **Bootstrap**. No Twit
|
|||
|
||||
Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
|
||||
|
||||
<div class="bd-brand">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch bd-purple"></div>
|
||||
<div class="color-swatch bd-purple-light"></div>
|
||||
<div class="color-swatch bd-purple-lighter"></div>
|
||||
<div class="color-swatch bd-gray"></div>
|
||||
</div>
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch bd-purple"></div>
|
||||
<div class="color-swatch bd-purple-light"></div>
|
||||
<div class="color-swatch bd-purple-lighter"></div>
|
||||
<div class="color-swatch bd-gray"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -104,23 +104,11 @@ Use the included utility classes to recreate the small secondary heading text fr
|
|||
|
||||
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
|
||||
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="display-1">Display 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-2">Display 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-3">Display 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-4">Display 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bd-example">
|
||||
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
|
||||
<div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
|
||||
<div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
|
||||
<div class="display-4">Display 4</div>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="bd-footer p-3 p-md-5 mt-5 text-muted">
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 text-muted bg-light text-center text-sm-left">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links">
|
||||
<li><a href="{{ .Site.Params.repo }}">GitHub</a></li>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="col-6 mx-auto col-md-4 order-md-2 col-lg-5">
|
||||
{{ partial "icons/bootstrap-stack.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "512" "height" "430") }}
|
||||
</div>
|
||||
<div class="col-md-7 order-md-1 col-lg-6 text-center text-md-left">
|
||||
<div class="col-md-8 order-md-1 col-lg-6 text-center text-md-left">
|
||||
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
|
||||
<p class="lead lead-lg">
|
||||
Build responsive, mobile-first projects for the web with the world’s most popular open source front-end component library.
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
background-color: rgba(0, 0, 0, .05);
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
color: $gray-800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -35,5 +35,5 @@
|
|||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: #777 !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
padding: .75rem 1rem 0;
|
||||
@include font-size(.75rem, true);
|
||||
line-height: 1 !important;
|
||||
color: #767676 !important;
|
||||
color: $gray-600 !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,7 @@
|
|||
|
||||
// Logo series wrapper
|
||||
.bd-brand-logos {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
color: $bd-purple;
|
||||
background-color: #f9f9f9;
|
||||
@include border-radius();
|
||||
|
||||
.inverse {
|
||||
color: $white;
|
||||
|
|
@ -20,32 +14,18 @@
|
|||
|
||||
// Individual items
|
||||
.bd-brand-item {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 4rem 1rem;
|
||||
|
||||
+ .bd-brand-item {
|
||||
border-top: 1px solid $white;
|
||||
}
|
||||
|
||||
// Heading content within
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
|
||||
+ .bd-brand-item {
|
||||
border-top: 0;
|
||||
border-left: 1px solid $white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(4rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,8 +35,8 @@
|
|||
//
|
||||
|
||||
.color-swatches {
|
||||
display: flex;
|
||||
margin: 0 -5px;
|
||||
overflow: hidden; // clearfix
|
||||
|
||||
// Docs colors
|
||||
.bd-purple {
|
||||
|
|
@ -74,7 +54,6 @@
|
|||
}
|
||||
|
||||
.color-swatch {
|
||||
float: left;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-right: .25rem;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid $gray-200;
|
||||
border-left-width: .25rem;
|
||||
@include border-radius();
|
||||
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@
|
|||
display: block;
|
||||
padding: .25rem .5rem;
|
||||
@include font-size(.75em);
|
||||
color: #818a91;
|
||||
color: $gray-800;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@include border-radius();
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: #027de7;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,29 +125,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
.bd-example-type {
|
||||
.table {
|
||||
td {
|
||||
padding: 1rem 0;
|
||||
border-color: #eee;
|
||||
}
|
||||
tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Images
|
||||
.bd-example {
|
||||
> svg + svg,
|
||||
|
|
@ -172,6 +149,7 @@
|
|||
.bd-example > .list-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.bd-example > [class*="list-group-horizontal"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -183,6 +161,7 @@
|
|||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: static;
|
||||
margin: 1rem -1rem -1rem;
|
||||
|
|
@ -205,38 +184,13 @@
|
|||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Example modals
|
||||
.modal {
|
||||
z-index: 1072;
|
||||
|
||||
.tooltip,
|
||||
.popover {
|
||||
z-index: 1073;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
z-index: 1071;
|
||||
}
|
||||
|
||||
.bd-example-modal {
|
||||
background-color: #fafafa;
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
|
|
@ -308,6 +262,7 @@
|
|||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: $gray-900; // Effectively the base text color
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
|
||||
.bd-footer {
|
||||
@include font-size(.875rem);
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
|
|
@ -20,10 +18,6 @@
|
|||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-footer-links {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: 3rem ($grid-gutter-width / 2);
|
||||
padding: 3rem 0;
|
||||
background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
|
||||
|
||||
h1 {
|
||||
|
|
@ -17,27 +16,10 @@
|
|||
.btn {
|
||||
padding: .8rem 2rem;
|
||||
font-weight: 600;
|
||||
@include font-size(1.25rem);
|
||||
}
|
||||
|
||||
.carbonad {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: -3rem !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
|
||||
.carbonad {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.carbonad {
|
||||
margin-top: 3rem !important;
|
||||
}
|
||||
padding: 5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +56,3 @@
|
|||
width: 6rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.masthead-followup {
|
||||
.bd-clipboard { display: none; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,14 +40,9 @@
|
|||
.bd-sidenav-group {
|
||||
&.has-children .bd-sidenav-group-link::before {
|
||||
display: inline-block;
|
||||
width: .875rem;
|
||||
height: .875rem;
|
||||
margin-right: .25rem;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
opacity: .5;
|
||||
line-height: 0; // Align in the middle
|
||||
content: escape-svg($sidebar-colapse-icon);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1071; // over everything in bootstrap
|
||||
z-index: $zindex-sticky;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.bd-toc nav {
|
||||
padding-top: .125em;
|
||||
padding-bottom: .125em;
|
||||
border-left: .25em solid #eee;
|
||||
border-left: .25em solid $gray-200;
|
||||
|
||||
> ul {
|
||||
padding-left: .5rem;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ $bd-info: #5bc0de;
|
|||
$bd-warning: #f0ad4e;
|
||||
$bd-danger: #d9534f;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
|
||||
$sidebar-colapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
|
||||
|
||||
// Enable responsive font sizes for font sizes defined in the docs
|
||||
// The weird if test is made as a workaround to prevent a false fusv error.
|
||||
|
|
|
|||
Loading…
Reference in New Issue