"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",
"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",
"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",
"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"],
<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/">
<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/">
<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/">
<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">
<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/">
### 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/)!
- 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
- 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"
<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>
--- /dev/null
+---
+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>
projects / thirdparty / bulma.git / commitdiff
