mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
5
docs/library/components/breadcrumb.html
Normal file
5
docs/library/components/breadcrumb.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Breadcrumb</h3>
|
||||
{% include library/components/breadcrumb.html %}
|
||||
5
docs/library/components/card.html
Normal file
5
docs/library/components/card.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Card</h3>
|
||||
{% include library/components/card.html %}
|
||||
5
docs/library/components/dropdown.html
Normal file
5
docs/library/components/dropdown.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Dropdown</h3>
|
||||
{% include library/components/dropdown.html %}
|
||||
5
docs/library/components/menu.html
Normal file
5
docs/library/components/menu.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Menu</h3>
|
||||
{% include library/components/menu.html %}
|
||||
5
docs/library/components/message.html
Normal file
5
docs/library/components/message.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Message</h3>
|
||||
{% include library/components/message.html %}
|
||||
5
docs/library/components/modal.html
Normal file
5
docs/library/components/modal.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Modal</h3>
|
||||
{% include library/components/modal.html %}
|
||||
5
docs/library/components/navbar.html
Normal file
5
docs/library/components/navbar.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Navbar</h3>
|
||||
{% include library/components/navbar.html %}
|
||||
5
docs/library/components/pagination.html
Normal file
5
docs/library/components/pagination.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Pagination</h3>
|
||||
{% include library/components/pagination.html %}
|
||||
5
docs/library/components/panel.html
Normal file
5
docs/library/components/panel.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Panel</h3>
|
||||
{% include library/components/panel.html %}
|
||||
5
docs/library/components/tabs.html
Normal file
5
docs/library/components/tabs.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Tabs</h3>
|
||||
{% include library/components/tabs.html %}
|
||||
425
docs/library/debug/css-vars.html
Normal file
425
docs/library/debug/css-vars.html
Normal file
@@ -0,0 +1,425 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="debug.css" />
|
||||
<style type="text/css">
|
||||
.rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2em;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
background-color: var(--color);
|
||||
border-radius: 0.25em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
flex-shrink: 0;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="rows">
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-scheme-main)"
|
||||
></div>
|
||||
<div class="name">scheme-main</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-scheme-main-bis)"
|
||||
></div>
|
||||
<div class="name">scheme-main-bis</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-scheme-main-ter)"
|
||||
></div>
|
||||
<div class="name">scheme-main-ter</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-scheme-invert)"
|
||||
></div>
|
||||
<div class="name">scheme-invert</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-scheme-invert-bis)"
|
||||
></div>
|
||||
<div class="name">scheme-invert-bis</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-scheme-invert-ter)"
|
||||
></div>
|
||||
<div class="name">scheme-invert-ter</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-text)"></div>
|
||||
<div class="name">text</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-text-invert)"
|
||||
></div>
|
||||
<div class="name">text-invert</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-text-light)"
|
||||
></div>
|
||||
<div class="name">text-light</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-text-strong)"
|
||||
></div>
|
||||
<div class="name">text-strong</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-background)"
|
||||
></div>
|
||||
<div class="name">background</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-border)"></div>
|
||||
<div class="name">border</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-border-hover)"
|
||||
></div>
|
||||
<div class="name">border-hover</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-border-light)"
|
||||
></div>
|
||||
<div class="name">border-light</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-border-light-hover)"
|
||||
></div>
|
||||
<div class="name">border-light-hover</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-code)"></div>
|
||||
<div class="name">code</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-code-background)"
|
||||
></div>
|
||||
<div class="name">code-background</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-pre)"></div>
|
||||
<div class="name">pre</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-pre-background)"
|
||||
></div>
|
||||
<div class="name">pre-background</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-hover)"
|
||||
></div>
|
||||
<div class="name">link-hover</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-hover-border)"
|
||||
></div>
|
||||
<div class="name">link-hover-border</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-focus)"
|
||||
></div>
|
||||
<div class="name">link-focus</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-focus-border)"
|
||||
></div>
|
||||
<div class="name">link-focus-border</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-active)"
|
||||
></div>
|
||||
<div class="name">link-active</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-active-border)"
|
||||
></div>
|
||||
<div class="name">link-active-border</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rows">
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-family-sans-serif)"
|
||||
></div>
|
||||
<div class="name">family-sans-serif</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-family-monospace)"
|
||||
></div>
|
||||
<div class="name">family-monospace</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-size-1)"></div>
|
||||
<div class="name">size-1</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-size-2)"></div>
|
||||
<div class="name">size-2</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-size-3)"></div>
|
||||
<div class="name">size-3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-size-4)"></div>
|
||||
<div class="name">size-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-size-5)"></div>
|
||||
<div class="name">size-5</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-size-6)"></div>
|
||||
<div class="name">size-6</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-size-7)"></div>
|
||||
<div class="name">size-7</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-weight-light)"
|
||||
></div>
|
||||
<div class="name">weight-light</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-weight-normal)"
|
||||
></div>
|
||||
<div class="name">weight-normal</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-weight-medium)"
|
||||
></div>
|
||||
<div class="name">weight-medium</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-weight-semibold)"
|
||||
></div>
|
||||
<div class="name">weight-semibold</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-weight-bold)"
|
||||
></div>
|
||||
<div class="name">weight-bold</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-block-spacing)"
|
||||
></div>
|
||||
<div class="name">block-spacing</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-gap)"></div>
|
||||
<div class="name">gap</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-easing)"></div>
|
||||
<div class="name">easing</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-radius-small)"
|
||||
></div>
|
||||
<div class="name">radius-small</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-radius)"></div>
|
||||
<div class="name">radius</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-radius-large)"
|
||||
></div>
|
||||
<div class="name">radius-large</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-radius-rounded)"
|
||||
></div>
|
||||
<div class="name">radius-rounded</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-speed)"></div>
|
||||
<div class="name">speed</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-family-primary)"
|
||||
></div>
|
||||
<div class="name">family-primary</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-family-secondary)"
|
||||
></div>
|
||||
<div class="name">family-secondary</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-family-code)"
|
||||
></div>
|
||||
<div class="name">family-code</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-size-small)"
|
||||
></div>
|
||||
<div class="name">size-small</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-size-normal)"
|
||||
></div>
|
||||
<div class="name">size-normal</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-size-medium)"
|
||||
></div>
|
||||
<div class="name">size-medium</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-size-large)"
|
||||
></div>
|
||||
<div class="name">size-large</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bd-color-swatch" style="--color: var(--bulma-shadow)"></div>
|
||||
<div class="name">shadow</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-visited)"
|
||||
></div>
|
||||
<div class="name">link-visited</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-hover)"
|
||||
></div>
|
||||
<div class="name">link-hover</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-hover-border)"
|
||||
></div>
|
||||
<div class="name">link-hover-border</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-focus)"
|
||||
></div>
|
||||
<div class="name">link-focus</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-focus-border)"
|
||||
></div>
|
||||
<div class="name">link-focus-border</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-active)"
|
||||
></div>
|
||||
<div class="name">link-active</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="bd-color-swatch"
|
||||
style="--color: var(--bulma-link-active-border)"
|
||||
></div>
|
||||
<div class="name">link-active-border</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
2171
docs/library/debug/debug.html
Normal file
2171
docs/library/debug/debug.html
Normal file
File diff suppressed because it is too large
Load Diff
5
docs/library/elements/box.html
Normal file
5
docs/library/elements/box.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Box</h3>
|
||||
{% include library/elements/box.html %}
|
||||
6
docs/library/elements/button.html
Normal file
6
docs/library/elements/button.html
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Buttons</h3>
|
||||
{% include library/elements/button.html %}
|
||||
{% include library/elements/buttons.html %}
|
||||
5
docs/library/elements/content.html
Normal file
5
docs/library/elements/content.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Content</h3>
|
||||
{% include library/elements/content.html %}
|
||||
5
docs/library/elements/icon.html
Normal file
5
docs/library/elements/icon.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Icon</h3>
|
||||
{% include library/elements/icon.html %}
|
||||
5
docs/library/elements/image.html
Normal file
5
docs/library/elements/image.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Image</h3>
|
||||
{% include library/elements/image.html %}
|
||||
5
docs/library/elements/notification.html
Normal file
5
docs/library/elements/notification.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Notification</h3>
|
||||
{% include library/elements/notification.html %}
|
||||
5
docs/library/elements/progress.html
Normal file
5
docs/library/elements/progress.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Progress</h3>
|
||||
{% include library/elements/progress.html %}
|
||||
5
docs/library/elements/tag.html
Normal file
5
docs/library/elements/tag.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Tag</h3>
|
||||
{% include library/elements/tag.html %}
|
||||
5
docs/library/elements/title.html
Normal file
5
docs/library/elements/title.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Title</h3>
|
||||
{% include library/elements/title.html %}
|
||||
5
docs/library/form/file.html
Normal file
5
docs/library/form/file.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">File</h3>
|
||||
{% include library/form/file.html %}
|
||||
5
docs/library/form/general.html
Normal file
5
docs/library/form/general.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Form</h3>
|
||||
{% include library/form/general.html %}
|
||||
5
docs/library/grid/columns.html
Normal file
5
docs/library/grid/columns.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Columns</h3>
|
||||
{% include library/grid/columns.html %}
|
||||
123
docs/library/grid/grid.html
Normal file
123
docs/library/grid/grid.html
Normal file
@@ -0,0 +1,123 @@
|
||||
---
|
||||
layout: default
|
||||
title: Grid/Grid
|
||||
breakpoints:
|
||||
- name: mobile
|
||||
visibility: mobile
|
||||
count: 2
|
||||
suffix: 'mobile'
|
||||
- name: tablet
|
||||
visibility: tablet-only
|
||||
count: 4
|
||||
suffix: 'tablet'
|
||||
- name: desktop
|
||||
visibility: desktop-only
|
||||
count: 8
|
||||
suffix: 'desktop'
|
||||
- name: widescreen
|
||||
visibility: widescreen-only
|
||||
count: 12
|
||||
suffix: 'widescreen'
|
||||
- name: fullhd
|
||||
visibility: fullhd
|
||||
count: 16
|
||||
suffix: 'fullhd'
|
||||
---
|
||||
<section style="padding: 3rem;">
|
||||
{% for breakpoint in page.breakpoints %}
|
||||
<p style="display: none;" class="block is-block-{{ breakpoint.visibility }}">
|
||||
Current breakpoint: <strong>{{ breakpoint.name }}</strong>
|
||||
</p>
|
||||
{% endfor %}
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap;">
|
||||
{% for breakpoint in page.breakpoints %}
|
||||
<div style="margin: 0 1.5em 1.5em 0; position: relative; width: 180px;">
|
||||
<p
|
||||
style="border: 2px solid hsl(153, 53%, 53%); border-radius: 1em; pointer-events: none; display: none; position: absolute; left: -1em; right: -1em; top: -1em; bottom: -1em;"
|
||||
class="has-background-success-light is-block-{{ breakpoint.visibility }}"
|
||||
></p>
|
||||
<div style="position: relative;">
|
||||
<p style="font-size: 0.75em">
|
||||
<strong>{{ breakpoint.count }}</strong> columns on {{ breakpoint.name }}
|
||||
</p>
|
||||
<input
|
||||
id="columns"
|
||||
class="jsColumns"
|
||||
type="range"
|
||||
min="1"
|
||||
max="16"
|
||||
value="{{ breakpoint.count }}"
|
||||
data-suffix="{{ breakpoint.suffix }}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div id="grid" class="grid">
|
||||
<div class="cell">#1</div>
|
||||
<div class="cell">#2</div>
|
||||
<div class="cell">#3</div>
|
||||
<div class="cell">#4</div>
|
||||
<div class="cell">#5</div>
|
||||
<div class="cell">#6</div>
|
||||
<div class="cell">#7</div>
|
||||
<div class="cell">#8</div>
|
||||
<div class="cell">#9</div>
|
||||
<div class="cell">#10</div>
|
||||
<div class="cell">#11</div>
|
||||
<div class="cell">#12</div>
|
||||
<div class="cell">#13</div>
|
||||
<div class="cell">#14</div>
|
||||
<div class="cell">#15</div>
|
||||
<div class="cell">#16</div>
|
||||
<div class="cell">#17</div>
|
||||
<div class="cell">#18</div>
|
||||
<div class="cell">#19</div>
|
||||
<div class="cell">#20</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const $grid = document.getElementById('grid');
|
||||
const $columns = document.querySelectorAll('.jsColumns');
|
||||
const columns = {
|
||||
mobile: 2,
|
||||
tablet: 4,
|
||||
desktop: 8,
|
||||
widescreen: 12,
|
||||
fullhd: 16,
|
||||
};
|
||||
|
||||
function updateUI() {
|
||||
let cn = 'grid';
|
||||
|
||||
for (const [column, count] of Object.entries(columns)) {
|
||||
cn += ` has-${count}-cols-${column}`;
|
||||
}
|
||||
|
||||
$grid.className = cn;
|
||||
}
|
||||
|
||||
$columns.forEach((el) =>
|
||||
el.addEventListener(
|
||||
'input',
|
||||
(event) => {
|
||||
const count = event.target.valueAsNumber;
|
||||
const suffix = event.target.dataset.suffix;
|
||||
columns[suffix] = count;
|
||||
updateUI();
|
||||
},
|
||||
false
|
||||
)
|
||||
);
|
||||
|
||||
function getAll(selector, parent = document) {
|
||||
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
5
docs/library/layout/container.html
Normal file
5
docs/library/layout/container.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Container</h3>
|
||||
{% include library/layout/container.html %}
|
||||
5
docs/library/layout/footer.html
Normal file
5
docs/library/layout/footer.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Footer</h3>
|
||||
{% include library/layout/footer.html %}
|
||||
5
docs/library/layout/hero.html
Normal file
5
docs/library/layout/hero.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Hero</h3>
|
||||
{% include library/layout/hero.html %}
|
||||
5
docs/library/layout/level.html
Normal file
5
docs/library/layout/level.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Level</h3>
|
||||
{% include library/layout/level.html %}
|
||||
5
docs/library/layout/media.html
Normal file
5
docs/library/layout/media.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Media</h3>
|
||||
{% include library/layout/media.html %}
|
||||
5
docs/library/layout/section.html
Normal file
5
docs/library/layout/section.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h3 class="title">Section</h3>
|
||||
{% include library/layout/section.html %}
|
||||
Reference in New Issue
Block a user