Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/picturepan2/spectre.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/docs/src
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src')
-rw-r--r--docs/src/_layout/_docs-layout.pug6
-rw-r--r--docs/src/_layout/_footer.pug4
-rw-r--r--docs/src/components/menu.pug27
-rw-r--r--docs/src/elements/buttons.pug2
-rw-r--r--docs/src/elements/forms.pug4
-rw-r--r--docs/src/elements/icons.pug20
-rw-r--r--docs/src/elements/tables.pug2
-rw-r--r--docs/src/experimentals.pug8
-rw-r--r--docs/src/experimentals/carousels.pug2
-rw-r--r--docs/src/experimentals/comparison.pug2
-rw-r--r--docs/src/experimentals/filters.pug2
-rw-r--r--docs/src/experimentals/off-canvas.pug2
-rw-r--r--docs/src/experimentals/parallax.pug2
-rw-r--r--docs/src/experimentals/viewer-360.pug33
-rw-r--r--docs/src/getting-started.pug2
-rw-r--r--docs/src/getting-started/custom.pug34
-rw-r--r--docs/src/index.pug10
-rw-r--r--docs/src/layout/grid.pug115
-rw-r--r--docs/src/layout/responsive.pug2
-rw-r--r--docs/src/scss/docs.scss18
20 files changed, 190 insertions, 107 deletions
diff --git a/docs/src/_layout/_docs-layout.pug b/docs/src/_layout/_docs-layout.pug
index 890b458..dcec070 100644
--- a/docs/src/_layout/_docs-layout.pug
+++ b/docs/src/_layout/_docs-layout.pug
@@ -10,8 +10,6 @@ block content
input.docs-search.form-input(type="text" placeholder="Search Docs")
a.btn.ml-1(href='https://www.paypal.me/picturepan2' target='_blank') PayPal
a.btn.btn-primary.ml-1(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
-
-
#sidebar.docs-sidebar.off-canvas-sidebar
.docs-brand
@@ -19,10 +17,12 @@ block content
a.docs-logo(href='../index.html')
img(src='../img/spectre-logo.svg' alt='Spectre.css CSS Framework')
h2 SPECTRE
+ small.label.label-secondary.text-bold DOCS
else
a.docs-logo(href='index.html')
img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
h2 SPECTRE
+ small.label.label-secondary.text-bold DOCS
.docs-nav
.accordion-container
+docs-accordion(
@@ -40,7 +40,7 @@ block content
{url: 'tables', name: 'Tables'},
{url: 'buttons', name: 'Buttons'},
{url: 'forms', name: 'Forms'},
- {url: 'icons', name: 'Icons'},
+ {url: 'icons', name: 'Icons.css'},
{url: 'labels', name: 'Labels'},
{url: 'code', name: 'Code'},
{url: 'media', name: 'Media'}
diff --git a/docs/src/_layout/_footer.pug b/docs/src/_layout/_footer.pug
index 82a5b2e..a8d7d93 100644
--- a/docs/src/_layout/_footer.pug
+++ b/docs/src/_layout/_footer.pug
@@ -1,12 +1,12 @@
#copyright.docs-footer.container.grid-lg
p
- a(href='getting-started.html' target='_blank') Documents
- | ·
a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
| ·
a(href='https://twitter.com/spectrecss' target='_blank') Twitter
| ·
a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+ | ·
+ a(href='https://www.patreon.com/spectrecss' target='_blank') Patreon Sponsor
| · Version
span.version
p
diff --git a/docs/src/components/menu.pug b/docs/src/components/menu.pug
index a41a4a5..e5331c0 100644
--- a/docs/src/components/menu.pug
+++ b/docs/src/components/menu.pug
@@ -23,13 +23,18 @@ block docs-content
| Steve Rogers
li.divider
li.menu-item
- .menu-badge
- label.label.label-primary 2
a.active(href="#menus")
| My profile
+ .menu-badge
+ label.form-checkbox
+ input(type="checkbox")
+ i.form-icon
+ | Public
li.menu-item
a(href="#menus")
| Settings
+ .menu-badge
+ label.label.label-primary 2
li.menu-item
a(href="#menus")
| Logout
@@ -66,7 +71,7 @@ block docs-content
| You can separate menu items with a #[code divider].
| Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
p
- | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support.
+ | Menus also have #[a(href="../elements/forms.html" target="_blank") Form controls] (checkbox, radio and checkbox) support.
pre.code(data-lang='HTML')
code
@@ -92,12 +97,22 @@ block docs-content
<li class="divider"></li>
<!-- menu item with badge -->
<li class="menu-item">
- <div class="menu-badge">
- <label class="label label-primary">2</label>
- </div>
<a href="#">
<i class="icon icon-link"></i> Settings
</a>
+ <div class="menu-badge">
+ <label class="label label-primary">2</label>
+ </div>
+ </li>
+
+ <li class="menu-item">
+ <a href="#">My profile</a>
+ <div class="menu-badge">
+ <label class="form-checkbox">
+ <input type="checkbox">
+ <i class="form-icon"></i> Public
+ </label>
+ </div>
</li>
</ul>
diff --git a/docs/src/elements/buttons.pug b/docs/src/elements/buttons.pug
index cfd9b5a..e5c9d1b 100644
--- a/docs/src/elements/buttons.pug
+++ b/docs/src/elements/buttons.pug
@@ -39,7 +39,7 @@ block docs-content
p
| Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
| If you need more button colors, please use
- a(href="getting-started.html#variables-buttons") button mixins
+ a(href="../getting-started/custom.html#variables-buttons") button mixins
| to create your own button color variants.
pre.code(data-lang='HTML')
diff --git a/docs/src/elements/forms.pug b/docs/src/elements/forms.pug
index 5db1d95..274101b 100644
--- a/docs/src/elements/forms.pug
+++ b/docs/src/elements/forms.pug
@@ -331,8 +331,8 @@ block docs-content
+docs-subheading('forms-icons', 'Form icons')
p
- | Spectre Form components has
- a(href="#icons") Spectre Icons
+ | Spectre Forms components has
+ a(href="icons.html") Spectre Icons
| support.
p
| Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element.
diff --git a/docs/src/elements/icons.pug b/docs/src/elements/icons.pug
index 5c53bc1..77bc433 100644
--- a/docs/src/elements/icons.pug
+++ b/docs/src/elements/icons.pug
@@ -7,19 +7,25 @@ block variables
- var description = 'Icons are single-element, responsive and pure CSS icons. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
- +docs-heading('icons', 'Icons')
+ +docs-heading('icons', 'Icons.css')
p
- small.label.label-primary.mr-2 CSS ONLY
+ small.label.label-secondary CSS ONLY
include ../_layout/_ad-g.pug
+ .docs-demo.columns
+ .column
+ .toast.toast-primary
+ | Spectre.css Icons will be moved to a new
+ a(href="https://github.com/picturepan2/icons.css" target="_blank") GitHub Repo
+ | while Spectre will only include basic icons.
p
- | Icons are single-element, responsive and pure CSS icons.
+ | Icons.css are single-element, responsive and pure CSS icons.
| You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons.
+docs-subheading('icons-navigation', 'Navigation icons')
- .columns
+ .docs-demo.columns
.column.col-3.col-md-6
button.btn.btn-primary.btn-action.btn-lg
i.icon.icon-arrow-up
@@ -75,7 +81,7 @@ block docs-content
+docs-subheading('icons-action', 'Action icons')
- .columns
+ .docs-demo.columns
.column.col-3.col-md-6
button.btn.btn-primary.btn-action.btn-lg
i.icon.icon-resize-horiz
@@ -151,7 +157,7 @@ block docs-content
+docs-subheading('icons-object', 'Object icons')
- .columns
+ .docs-demo.columns
.column.col-3.col-md-6
button.btn.btn-primary.btn-action.btn-lg
i.icon.icon-mail
@@ -196,7 +202,7 @@ block docs-content
| Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
| You can set #[code font-size] to have different icon sizes.
- .columns
+ .docs-demo.columns
.column.col-3.col-md-6
p
i.icon.icon-2x.icon-mail
diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug
index be899e8..c85b475 100644
--- a/docs/src/elements/tables.pug
+++ b/docs/src/elements/tables.pug
@@ -77,7 +77,7 @@ block docs-content
td The Shawshank Redemption
td Crime, Drama
td 14 October 1994
- tr.active
+ tr
td The Godfather
td Crime, Drama
td 24 March 1972
diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug
index 3002716..8618be6 100644
--- a/docs/src/experimentals.pug
+++ b/docs/src/experimentals.pug
@@ -19,6 +19,14 @@ block docs-content
.column.col-6.col-xs-12
.card
.card-header
+ .card-title.h5 360-Degree Viewer
+ .card-body
+ | Interactive 360-degree product photo viewer
+ .card-footer
+ a.btn.btn-primary(href="experimentals/autocomplete.html") View
+ .column.col-6.col-xs-12
+ .card
+ .card-header
.card-title.h5 Autocomplete
.card-body
| Form component provides suggestions while you type
diff --git a/docs/src/experimentals/carousels.pug b/docs/src/experimentals/carousels.pug
index f6fb774..5dfe359 100644
--- a/docs/src/experimentals/carousels.pug
+++ b/docs/src/experimentals/carousels.pug
@@ -9,7 +9,7 @@ block variables
block docs-content
+docs-heading('carousels', 'Carousels')
p
- small.label.label-primary.mr-2 CSS ONLY
+ small.label.label-secondary CSS ONLY
include ../_layout/_ad-g.pug
diff --git a/docs/src/experimentals/comparison.pug b/docs/src/experimentals/comparison.pug
index 527abd9..3252dcb 100644
--- a/docs/src/experimentals/comparison.pug
+++ b/docs/src/experimentals/comparison.pug
@@ -9,7 +9,7 @@ block variables
block docs-content
+docs-heading('comparison', 'Comparison sliders')
p
- small.label.label-primary.mr-2 CSS ONLY
+ small.label.label-secondary CSS ONLY
include ../_layout/_ad-g.pug
diff --git a/docs/src/experimentals/filters.pug b/docs/src/experimentals/filters.pug
index d505c33..f49f213 100644
--- a/docs/src/experimentals/filters.pug
+++ b/docs/src/experimentals/filters.pug
@@ -9,7 +9,7 @@ block variables
block docs-content
+docs-heading('filters', 'Filters')
p
- small.label.label-primary.mr-2 CSS ONLY
+ small.label.label-secondary CSS ONLY
include ../_layout/_ad-g.pug
diff --git a/docs/src/experimentals/off-canvas.pug b/docs/src/experimentals/off-canvas.pug
index cd8cfba..8d18e0b 100644
--- a/docs/src/experimentals/off-canvas.pug
+++ b/docs/src/experimentals/off-canvas.pug
@@ -9,7 +9,7 @@ block variables
block docs-content
+docs-heading('off-canvas', 'Off-canvas')
p
- small.label.label-primary.mr-2 CSS ONLY
+ small.label.label-secondary CSS ONLY
include ../_layout/_ad-g.pug
diff --git a/docs/src/experimentals/parallax.pug b/docs/src/experimentals/parallax.pug
index 8637281..c52bb68 100644
--- a/docs/src/experimentals/parallax.pug
+++ b/docs/src/experimentals/parallax.pug
@@ -9,7 +9,7 @@ block variables
block docs-content
+docs-heading('parallax', 'Parallax')
p
- small.label.label-primary.mr-2 CSS ONLY
+ small.label.label-secondary CSS ONLY
include ../_layout/_ad-g.pug
diff --git a/docs/src/experimentals/viewer-360.pug b/docs/src/experimentals/viewer-360.pug
index f17b786..5ab0384 100644
--- a/docs/src/experimentals/viewer-360.pug
+++ b/docs/src/experimentals/viewer-360.pug
@@ -9,7 +9,7 @@ block variables
block docs-content
+docs-heading('viewer-360', '360-Degree Viewer')
p
- small.label.label-primary.mr-2 CSS ONLY
+ small.label.label-secondary CSS ONLY
include ../_layout/_ad-g.pug
@@ -20,17 +20,25 @@ block docs-content
.column.col-12
.viewer-360
input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
- figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');")
+ figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;")
- p
+ p.text-center
| Photo credits:
- a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2Fsurface-pro-6%2F8zcnc665slq5" target="_blank") Microsoft Surface Pro 6
+ a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank") Microsoft Surface Pro 6
- p
- | You will need to use your own product image sprite (all angle of photos in one image) and change the attribute #[code max] to use this component.
- p
- | The default image number in CSS is #[code 36]. You can change the image number by changing the variable #[code $image-number] in #[code _viewer-360.scss] and re-compiling the CSS.
+ .docs-demo.columns
+ .column.col-12
+ .viewer-360
+ input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
+ figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;")
+ p.text-center
+ | Photo credits:
+ a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank") Microsoft Xbox One X
+
+ p
+ | You will need to use your own product image sprite (all angle of photos in one image) and set the attribute #[code max] to the image numbers to use this component.
+
pre.code(data-lang='HTML')
code
:highlight(lang="html")
@@ -39,6 +47,15 @@ block docs-content
<figure class="viewer-image" style="background-image:url('...');"></figure>
</div>
+ p
+ | The default image numbers in CSS are #[code 36]. You can copy the mixin and add more numbers in #[code _viewer-360.scss] and re-compiling the CSS.
+
+ pre.code(data-lang='SCSS')
+ code
+ :highlight(lang="scss")
+ @include viewer-slider-size(36);
+ @include viewer-slider-size(30);
+
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug \ No newline at end of file
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
index d195053..c157ea7 100644
--- a/docs/src/getting-started.pug
+++ b/docs/src/getting-started.pug
@@ -57,7 +57,7 @@ block docs-content
.card
.card-header
.card-title.h5 Accessibility
- .card-body
+ .card-body.text-gray
| Coming soon
include _layout/_ad-c.pug
diff --git a/docs/src/getting-started/custom.pug b/docs/src/getting-started/custom.pug
index 88cb713..36a1753 100644
--- a/docs/src/getting-started/custom.pug
+++ b/docs/src/getting-started/custom.pug
@@ -166,54 +166,46 @@ block docs-content
+docs-subheading('variables-colors', 'Variables - Colors')
.columns
- .column.col-3.col-md-6
+ .column.col-2.col-md-6
.docs-color(style='background:#5755d9;color:#fff;')
.color-title #5755d9
.color-subtitle Primary
- .column.col-3.col-md-6
+ .column.col-2.col-md-6
.docs-color(style='background:#f1f1fc;color:#5755d9;')
.color-title #f1f1fc
.color-subtitle Secondary
.columns
- .column.col-3.col-md-6
+ .column.col-2.col-md-6
.docs-color(style='background:#32b643;color:#fff;')
.color-title #32b643
.color-subtitle Success
- .column.col-3.col-md-6
+ .column.col-2.col-md-6
.docs-color(style='background:#ffb700;color:#fff;')
.color-title #ffb700
.color-subtitle Warning
- .column.col-3.col-md-6
+ .column.col-2.col-md-6
.docs-color(style='background:#e85600;color:#fff;')
.color-title #e85600
.color-subtitle Error
.columns
- .column.col-3.col-md-6
+ .column.col-2.col-md-6
.docs-color(style='background:#303742;color:#fff;')
.color-title #303742
.color-subtitle Dark
- .column.col-3.col-md-6
+ .column.col-2.col-md-6
.docs-color(style='background:#66758c;color:#fff;')
.color-title #66758c
.color-subtitle Gray dark
- .column.col-3.col-md-6
- .docs-color(style='background:#bcc3ce;color:#303742;')
+ .column.col-2.col-md-6
+ .docs-color(style='background:#bcc3ce;color:#fff;')
.color-title #bcc3ce
.color-subtitle Gray
- .column.col-3.col-md-6
- .docs-color(style='background:#f7f8f9;color:#303742;')
+ .column.col-2.col-md-6
+ .docs-color(style='background:#f7f8f9;color:#66758c;')
.color-title #f7f8f9
.color-subtitle Gray light
- .column.col-3.col-md-6
- .docs-color(style='background:#bcc3ce;color:#303742;')
- .color-title #bcc3ce
- .color-subtitle Border
- .column.col-3.col-md-6
- .docs-color(style='background:#f7f8f9;color:#303742;')
- .color-title #f7f8f9
- .color-subtitle Background
- .column.col-3.col-md-6
- .docs-color(style='background:#fff;color:#303742;')
+ .column.col-2.col-md-6
+ .docs-color(style='background:#fff;color:#bcc3ce;')
.color-title #fff
.color-subtitle Light
diff --git a/docs/src/index.pug b/docs/src/index.pug
index f7a6194..25a9359 100644
--- a/docs/src/index.pug
+++ b/docs/src/index.pug
@@ -56,7 +56,7 @@ block content
p.text-secondary
| Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
.column.col-10.col-sm-12.col-mx-auto
- a.btn.btn-lg(href='getting-started/installation.html') Install SPECTRE.CSS
+ a.btn.btn-lg(href='getting-started/installation.html') Install Spectre.css
.section.section-updates.bg-gray
.container.grid-lg
@@ -76,17 +76,17 @@ block content
.card-header
.card-title.h6 PayPal Donate
.card-body
- | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. &hearts;
+ | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development.
.card-footer
a.btn.btn-primary(href='https://www.paypal.me/picturepan2' target='_blank') Donate
.column.col-4.col-xs-12
.card
.card-header
- .card-title.h6 Spectre Docs
+ .card-title.h6 Sponsor via Patreon
.card-body
- | Spectre Docs experience has been completely rewritten and improved.
+ | Your name or company logo will be put on Spectre Docs homepage.
.card-footer
- a.btn.btn-primary(href='getting-started.html') Explore
+ a.btn.btn-primary(href='https://www.patreon.com/spectrecss' target='_blank') Sponsor
.section.section-ads.bg-gray
include _layout/_ad-c.pug
diff --git a/docs/src/layout/grid.pug b/docs/src/layout/grid.pug
index 2c8b7b6..5c054a8 100644
--- a/docs/src/layout/grid.pug
+++ b/docs/src/layout/grid.pug
@@ -17,27 +17,27 @@ block docs-content
.column
.bg-primary.text-secondary.docs-block
.column
- .bg-primary.text-secondary.docs-block
+ .bg-secondary.text-primary.docs-block
.column
.bg-primary.text-secondary.docs-block
.column
- .bg-primary.text-secondary.docs-block
+ .bg-secondary.text-primar.docs-block
.column
.bg-primary.text-secondary.docs-block
.column
- .bg-primary.text-secondary.docs-block
+ .bg-secondary.text-primar.docs-block
.column
.bg-primary.text-secondary.docs-block
.column
- .bg-primary.text-secondary.docs-block
+ .bg-secondary.text-primar.docs-block
.column
.bg-primary.text-secondary.docs-block
.column
- .bg-primary.text-secondary.docs-block
+ .bg-secondary.text-primar.docs-block
.column
.bg-primary.text-secondary.docs-block
.column
- .bg-primary.text-secondary.docs-block
+ .bg-secondary.text-primar.docs-block
.columns
.column.col-12
.bg-gray.docs-block col-12 (100%)
@@ -78,7 +78,7 @@ block docs-content
.column.col-6
.bg-gray.docs-block col-6 (gapless)
.column.col-6
- .bg-gray.docs-block col-6 (gapless)
+ .bg-secondary.text-primary.docs-block col-6 (gapless)
pre.code(data-lang='HTML')
code
@@ -107,40 +107,72 @@ block docs-content
<div class="column col-8">col-8</div>
</div>
- +docs-subheading('grid-offset', 'Grid offset')
+ +docs-subheading('grid-nesting', 'Grid nesting')
+
+ p
+ | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
+
+ .docs-demo.columns
+ .column.col-6
+ .bg-gray.docs-block col-6
+ .columns
+ .column.col-6
+ .bg-secondary.text-primary.docs-block col-6
+ .column.col-6
+ .bg-secondary.text-primary.docs-block col-6
+ .column.col-6
+ .bg-gray.docs-block col-6
+
+ pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- grid nesting example -->
+ <div class="container">
+ <div class="columns">
+ <div class="column col-6">col-6
+ <div class="columns">
+ <div class="column col-6">col-6</div>
+ <div class="column col-6">col-6</div>
+ </div>
+ </div>
+ <div class="column col-6">col-6</div>
+ </div>
+ </div>
+
+ +docs-subheading('grid-offset', 'Column offset')
p
| The Flexbox grid provides margin auto utilities to set offset.
| There are #[code col-mx-auto], #[code col-ml-auto] and #[code col-mr-auto] to set margins between columns without using empty columns.
- .columns
+ .columns.text-center
.column.col-2
.bg-gray.docs-block col-2
.column.col-4.col-mx-auto
- .bg-gray.docs-block col-4 col-mx-auto
- .columns
+ .bg-secondary.text-primary.docs-block col-4 col-mx-auto
+ .columns.text-center
.column.col-2
.bg-gray.docs-block col-2
.column.col-4.col-ml-auto
- .bg-gray.docs-block col-4 col-ml-auto
- .columns
+ .bg-secondary.text-primary.docs-block col-4 col-ml-auto
+ .columns.text-center
.column.col-4.col-ml-auto
- .bg-gray.docs-block col-4 col-ml-auto
+ .bg-secondary.text-primary.docs-block col-4 col-ml-auto
.column.col-2
.bg-gray.docs-block col-2
- .columns
+ .columns.text-center
.column.col-4.col-mx-auto
- .bg-gray.docs-block col-4 col-mx-auto
+ .bg-secondary.text-primary.docs-block col-4 col-mx-auto
.column.col-2
.bg-gray.docs-block col-2
- .columns
+ .columns.text-center
.column.col-4.col-mr-auto
- .bg-gray.docs-block col-4 col-mr-auto
+ .bg-secondary.text-primary.docs-block col-4 col-mr-auto
.column.col-2
.bg-gray.docs-block col-2
- .columns
+ .columns.text-center
.column.col-4.col-mx-auto
- .bg-gray.docs-block col-4 col-mx-auto
+ .bg-secondary.text-primary.docs-block col-4 col-mx-auto
pre.code(data-lang='HTML')
code
@@ -153,35 +185,38 @@ block docs-content
</div>
</div>
- +docs-subheading('grid-nesting', 'Grid nesting')
+ +docs-subheading('column-auto', 'Auto width column')
p
- | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
+ | You can add the #[code col-auto] class to the #[code column] to have auto width columns.
+ | There are #[code col-xl-auto], #[code col-lg-auto], #[code col-md-auto], #[code col-sm-auto] and #[code col-xs-auto] to set auto width in different viewport sizes.
- .docs-demo.columns
- .column.col-6
- .bg-gray.docs-block col-6
- .columns
- .column.col-6
- .bg-primary.docs-block col-6
- .column.col-6
- .bg-primary.docs-block col-6
- .column.col-6
- .bg-gray.docs-block col-6
+ .columns
+ .column.col-auto
+ .bg-secondary.text-primary.docs-block col-auto
+ .column
+ .bg-gray.docs-block col
+ .columns
+ .column.col-lg-auto.col-6
+ .bg-secondary.text-primary.docs-block col-lg-auto
+ .column
+ .bg-gray.docs-block col
pre.code(data-lang='HTML')
code
:highlight(lang="html")
- <!-- grid nesting example -->
+ <!-- auto width column example -->
<div class="container">
<div class="columns">
- <div class="column col-6">col-6
- <div class="columns">
- <div class="column col-6">col-6</div>
- <div class="column col-6">col-6</div>
- </div>
- </div>
- <div class="column col-6">col-6</div>
+ <div class="column col-auto">col-auto</div>
+ <div class="column">col</div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="columns">
+ <div class="column col-lg-auto col-6">col-lg-auto</div>
+ <div class="column">col</div>
</div>
</div>
diff --git a/docs/src/layout/responsive.pug b/docs/src/layout/responsive.pug
index 378bff2..74d284d 100644
--- a/docs/src/layout/responsive.pug
+++ b/docs/src/layout/responsive.pug
@@ -256,6 +256,8 @@ block docs-content
li
| #[code show-xl] shows elements when the window width is smaller than or equal to #[strong 1280px].
+ +docs-subheading('responsive-resizer', 'Responsive Resizer')
+
p
| Spectre also has a responsive web test tool Responsive Resizer.
| You can clone the
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 9386865..656bfa3 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -154,6 +154,12 @@
.docs-demo {
padding-bottom: 1rem;
padding-top: 1rem;
+
+ .card {
+ box-shadow: 0 .25rem 1rem rgba($dark-color, .15);
+ border: 0;
+ height: 100%;
+ }
}
.column {
@@ -194,7 +200,7 @@
.docs-color {
border-radius: $border-radius;
margin: .25rem 0;
- padding: .5rem;
+ padding: 5rem .5rem .5rem;
.color-subtitle {
font-size: $font-size-sm;
@@ -213,7 +219,8 @@
.hljs-title,
.hljs-class,
- .hljs-string {
+ .hljs-string,
+ .hljs-number {
color: $primary-color;
}
@@ -299,6 +306,7 @@
align-items: center;
border-radius: $border-radius;
display: inline-flex;
+ font-size: .7rem;
height: 2rem;
padding: .2rem;
width: auto;
@@ -321,14 +329,14 @@
line-height: 1.5rem;
margin-bottom: 0;
margin-left: .5rem;
- margin-right: .5rem;
+ margin-right: .3rem;
}
}
}
.docs-footer {
color: $gray-color;
- padding: .5rem .5rem 1.5rem;
+ padding: .5rem;
a {
color: $gray-color-dark;
@@ -389,7 +397,7 @@
}
.section-updates {
- padding: 4.5rem .5rem 3.5rem .5rem;
+ padding: 4.5rem .5rem 2.5rem .5rem;
.card {
border: 0;
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-18 16:05:45 +0300