mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix documentation links
This commit is contained in:
Jeremy Thomas
parent
4009df6363
commit
e36ff94911
@ -31,7 +31,7 @@
|
||||
"path": "/documentation/overview/customize"
|
||||
},
|
||||
"overview-classes": {
|
||||
"name": "Classes",
|
||||
"name": "CSS classes",
|
||||
"subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
|
||||
"color": "link",
|
||||
"icon_brand": "true",
|
||||
@ -132,12 +132,12 @@
|
||||
"icon": "cogs",
|
||||
"path": "/documentation/modifiers"
|
||||
},
|
||||
"modifiers-syntax": {
|
||||
"name": "Syntax",
|
||||
"overview-modifiers": {
|
||||
"name": "Modifiers syntax",
|
||||
"subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.",
|
||||
"color": "orange",
|
||||
"icon": "code",
|
||||
"path": "/documentation/modifiers/syntax"
|
||||
"path": "/documentation/overview/modifiers"
|
||||
},
|
||||
"modifiers-helpers": {
|
||||
"name": "Helpers",
|
||||
@ -268,37 +268,44 @@
|
||||
"layout-container": {
|
||||
"name": "Container",
|
||||
"subtitle": "A simple <strong>container</strong> to center your content horizontally",
|
||||
"path": "/documentation/layout/container"
|
||||
"path": "/documentation/layout/container",
|
||||
"icon": "arrows-alt-h"
|
||||
},
|
||||
"layout-level": {
|
||||
"name": "Level",
|
||||
"subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
|
||||
"path": "/documentation/layout/level"
|
||||
"path": "/documentation/layout/level",
|
||||
"icon": "ruler-horizontal"
|
||||
},
|
||||
"layout-media": {
|
||||
"name": "Media Object",
|
||||
"subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
|
||||
"path": "/documentation/layout/media-object"
|
||||
"path": "/documentation/layout/media-object",
|
||||
"icon": "th-list"
|
||||
},
|
||||
"layout-hero": {
|
||||
"name": "Hero",
|
||||
"subtitle": "An imposing <strong>hero banner</strong> to showcase something",
|
||||
"path": "/documentation/layout/hero"
|
||||
"path": "/documentation/layout/hero",
|
||||
"icon": "star"
|
||||
},
|
||||
"layout-section": {
|
||||
"name": "Section",
|
||||
"subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
|
||||
"path": "/documentation/layout/section"
|
||||
"path": "/documentation/layout/section",
|
||||
"icon": "square"
|
||||
},
|
||||
"layout-footer": {
|
||||
"name": "Footer",
|
||||
"subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
|
||||
"path": "/documentation/layout/footer"
|
||||
"path": "/documentation/layout/footer",
|
||||
"icon": "window-minimize"
|
||||
},
|
||||
"layout-tiles": {
|
||||
"name": "Tiles",
|
||||
"subtitle": "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids",
|
||||
"path": "/documentation/layout/tiles"
|
||||
"path": "/documentation/layout/tiles",
|
||||
"icon": "th"
|
||||
},
|
||||
"form": {
|
||||
"name": "Form",
|
||||
@ -620,9 +627,8 @@
|
||||
"bulma-start"
|
||||
],
|
||||
"categories": {
|
||||
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"overview": ["overview-start", "overview-classes", "overview-modifiers", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
|
||||
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
|
||||
"helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Hello Bulma!</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">
|
||||
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="section">
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Syntax
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/helpers/">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/helpers/">
|
||||
Helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
|
||||
|
||||
@ -119,4 +119,4 @@ But you can also add the `is-multiline` **modifier** on the `columns` container,
|
||||
|
||||
### Helpers section
|
||||
|
||||
While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/modifiers/helpers/)!
|
||||
While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/helpers/)!
|
||||
|
||||
@ -18,7 +18,7 @@ bulma:
|
||||
- type: "bulma"
|
||||
icon: "heart"
|
||||
title: "Easy-to-learn syntax"
|
||||
content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/modifiers/syntax/)"
|
||||
content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/overview/modifiers/)"
|
||||
- type: "bulma"
|
||||
icon: "font-awesome"
|
||||
icon_brand: true
|
||||
@ -27,7 +27,7 @@ bulma:
|
||||
- type: "bulma"
|
||||
icon: "plus"
|
||||
title: "100+ useful CSS helpers"
|
||||
content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing.<br>[Responsive helpers](/documentation/modifiers/responsive-helpers/) <span class="separator">–</span> [Typography helpers](/documentation/modifiers/typography-helpers/) <span class="separator">–</span> [Other helpers](/documentation/modifiers/helpers/)'
|
||||
content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing.<br>[Responsive helpers](/documentation/helpers/visibility-helpers/) <span class="separator">–</span> [Typography helpers](/documentation/helpers/typography-helpers/) <span class="separator">–</span> [Other helpers](/documentation/helpers/)'
|
||||
- type: "bulma"
|
||||
icon: "code"
|
||||
title: "No JavaScript"
|
||||
|
||||
@ -101,7 +101,7 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Since icon fonts are simply <strong>text</strong>, you can use the <a href="{{ site.url }}/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
|
||||
Since icon fonts are simply <strong>text</strong>, you can use the <a href="{{ site.url }}/documentation/helpers/color-helpers/">color helpers</a> to change the icon's color.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
229
docs/documentation/overview/modifiers.html
Normal file
229
docs/documentation/overview/modifiers.html
Normal file
@ -0,0 +1,229 @@
|
||||
---
|
||||
title: Modifiers syntax
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: modifiers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-modifiers
|
||||
---
|
||||
|
||||
{% capture button_example %}
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_primary_example %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_colors %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-link">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-warning">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_sizes %}
|
||||
<a class="button is-small">
|
||||
Button
|
||||
</a>
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_states %}
|
||||
<a class="button is-primary is-outlined">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button" disabled>
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_combinations %}
|
||||
<a class="button is-primary is-small" disabled>
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger is-outlined is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_primary_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_primary_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can use one of the <strong>6 main colors</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-primary</code></li>
|
||||
<li><code>is-link</code></li>
|
||||
<li><code>is-info</code></li>
|
||||
<li><code>is-success</code></li>
|
||||
<li><code>is-warning</code></li>
|
||||
<li><code>is-danger</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-link">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-success">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-warning">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ button_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can also alter the <strong>size</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
<li><code>is-medium</code></li>
|
||||
<li><code>is-large</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-small">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-medium">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-outlined</code></li>
|
||||
<li><code>is-loading</code></li>
|
||||
<li><code>[disabled]</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-outlined">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button" disabled>Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_states }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
As a result, it's very easy to <strong>combine modifiers:</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-small" disabled>Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger is-outlined is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_combinations }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user