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
24
docs/_includes/home/beautified.html
Normal file
24
docs/_includes/home/beautified.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{% assign columns_link = site.data.links.by_id['expo'] %}
|
||||
{% assign heading_href = site.url | append: columns_link.path %}
|
||||
|
||||
<section class="bd-home-section bd-theme-expo">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color="warning"
|
||||
icon="fas fa-star"
|
||||
title="<strong>Beautified</strong> by <strong>everyone</strong>"
|
||||
subtitle="See what Bulma developers are building"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="Visit the <strong>expo</strong>"
|
||||
%}
|
||||
|
||||
<div class="bd-screenshots">
|
||||
{% include home/best-screenshot.html website_id="divjoy" %}
|
||||
{% include home/best-screenshot.html website_id="runlet" %}
|
||||
{% include home/best-screenshot.html website_id="gustav" %}
|
||||
{% include home/best-screenshot.html website_id="romes" %}
|
||||
{% include home/best-screenshot.html website_id="getbedtimestories" %}
|
||||
{% include home/best-screenshot.html website_id="signal" %}
|
||||
</div>
|
||||
</section>
|
||||
15
docs/_includes/home/best-screenshot.html
Normal file
15
docs/_includes/home/best-screenshot.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{% assign website = site.data.expo.by_id[include.website_id] %}
|
||||
{% assign imageName = include.website_id | slugify %}
|
||||
{% assign imagePath = "/assets/images/expo/" | prepend: site.url | append: imageName %}
|
||||
{% assign size1x = "672x420" %}
|
||||
{% assign size2x = "1344x840" %}
|
||||
|
||||
<a class="bd-screenshot {{ include.modifier }}" href="{{ site.url }}/expo">
|
||||
<img
|
||||
src="{{ imagePath }}-{{ size1x }}.jpg"
|
||||
srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
|
||||
{{ imagePath }}-{{ size1x }}.jpg 1x"
|
||||
width="672"
|
||||
height="420"
|
||||
/>
|
||||
</a>
|
||||
23
docs/_includes/home/best.html
Normal file
23
docs/_includes/home/best.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% capture best_duplicates %}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1126857886599122949" %}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="1339242817919590404" %}
|
||||
{% include home/best-screenshot.html modifier="bd-best-item" website_id="signal" %}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-huge" tweet_id="869284735440363520" %}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="966731525709619200" %}
|
||||
{% include home/best-screenshot.html modifier="bd-best-item" website_id="getbedtimestories" %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-best">
|
||||
<div class="bd-best-list">
|
||||
{{ best_duplicates }}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1254050448711057410" %}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="1240347595106549762" %}
|
||||
{% include home/best-screenshot.html modifier="bd-best-item" website_id="romes" %}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1140839283692982274" %}
|
||||
{% include docs/elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="835834634655174658" %}
|
||||
{% include home/best-screenshot.html modifier="bd-best-item" website_id="Gustav" %}
|
||||
<!-- More -->
|
||||
{{ best_duplicates }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
14
docs/_includes/home/bubble.html
Normal file
14
docs/_includes/home/bubble.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% assign bubble = site.data.bubbles[include.id] %}
|
||||
|
||||
<div class="bd-bubble is-{{ include.id }} js-bubble-{{ include.id }}" style="--h: {{ bubble.hue }}">
|
||||
<div class="bd-bubble-content">
|
||||
{{ bubble.content }}
|
||||
</div>
|
||||
|
||||
<div class="bd-bubble-arrow"></div>
|
||||
|
||||
<footer class="bd-bubble-author">
|
||||
<img src="{{ site.url }}/assets/images/twitter/{{ include.id }}.jpg" alt="Avatar of {{ bubble.name }}">
|
||||
<strong>{{ bubble.name }}</strong>
|
||||
</footer>
|
||||
</div>
|
||||
132
docs/_includes/home/columns.html
Normal file
132
docs/_includes/home/columns.html
Normal file
@@ -0,0 +1,132 @@
|
||||
{% capture columns %}
|
||||
<div class="columns">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign theme = 'link' %}
|
||||
{% assign columns_link = site.data.links.by_id['columns'] %}
|
||||
{% assign heading_href = site.url | append: columns_link.path %}
|
||||
|
||||
<section class="bd-home-section bd-theme-code">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color=theme
|
||||
icon="fas fa-columns"
|
||||
title="The <strong>simplest</strong> grid system"
|
||||
subtitle="Just add columns, they will <strong>resize themselves</strong>"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>columns</strong> docs"
|
||||
%}
|
||||
|
||||
<div class="container">
|
||||
<div class="message is-warning is-hidden-tablet">
|
||||
<p class="message-header">
|
||||
Better on desktop
|
||||
</p>
|
||||
<p class="message-body">
|
||||
This interactive tool works better on larger screens! That's because
|
||||
Bulma columns are <strong>vertical by default</strong>. I recommend
|
||||
revisiting this page later when you're on desktop. 😉
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="grid" class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">7</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">8</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">9</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">10</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">11</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-{{ theme }} has-text-centered">
|
||||
<p class="title">12</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-columns-tools">
|
||||
<div class="bd-columns-tool bd-is-try">
|
||||
<div class="buttons bd-has-drawing">
|
||||
<a id="add" class="button is-medium is-{{ theme }} is-unselectable">
|
||||
<strong>Add column</strong>
|
||||
</a>
|
||||
<a id="remove" class="button is-medium is-unselectable">
|
||||
<strong>Remove</strong>
|
||||
</a>
|
||||
{% include docs/elements/drawing.html id='try-it-out' width=150 height=65
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-columns-tool bd-is-markup">
|
||||
<div id="markup">
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message" class="message is-info">
|
||||
<p class="message-body">
|
||||
While it's possible to add as many columns as you want, it is
|
||||
recommended to stick with <strong>12 columns</strong>.<br />
|
||||
If you want smaller divisions, you can always
|
||||
<strong>nest</strong> columns.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
101
docs/_includes/home/customize.html
Normal file
101
docs/_includes/home/customize.html
Normal file
@@ -0,0 +1,101 @@
|
||||
{% assign customize_link = site.data.links.by_id['customize'] %}
|
||||
{% assign heading_href = site.url | append: customize_link.path %}
|
||||
|
||||
<section class="bd-home-section bd-theme-sass">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color="sass"
|
||||
icon="fab fa-sass"
|
||||
title="So <strong>quick</strong> to customize"
|
||||
subtitle="Simply set your own Sass variables before importing Bulma"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>customization</strong> docs"
|
||||
%}
|
||||
|
||||
<div class="container">
|
||||
<header class="block is-size-5-desktop mb-6">
|
||||
{% include docs/elements/tw.html tweet_id="1070320154452656128" %}
|
||||
</header>
|
||||
|
||||
<div class="columns is-variable is-8">
|
||||
<div class="column">
|
||||
<div class="bd-highlight-full bd-has-drawing">
|
||||
{% highlight sass %}{% include docs/snippets/customized.html %}{%
|
||||
endhighlight %} {% include docs/elements/drawing.html id='customize'
|
||||
width=152 height=76 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="bd-index-custom bd-is-before">
|
||||
<p class="bd-index-custom-title">Before</p>
|
||||
<div class="bd-index-custom-example">
|
||||
<h1 class="title">
|
||||
Bulma
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Modern CSS framework based on
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
|
||||
>Flexbox</a
|
||||
>
|
||||
</p>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-index-custom bd-is-after">
|
||||
<p class="bd-index-custom-title">After</p>
|
||||
<div class="bd-index-custom-example">
|
||||
<h1 class="title">
|
||||
Bulma
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Modern CSS framework based on
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
|
||||
>Flexbox</a
|
||||
>
|
||||
</p>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
95
docs/_includes/home/dark-mode.html
Normal file
95
docs/_includes/home/dark-mode.html
Normal file
@@ -0,0 +1,95 @@
|
||||
{% assign customize_link = site.data.links.by_id['features-dark-mode'] %}
|
||||
{% assign heading_href = site.url | append: customize_link.path %}
|
||||
|
||||
{% capture bulma_theme %}
|
||||
<div>
|
||||
<h1 class="title">Bulma Theme</h1>
|
||||
<h2 class="subtitle">
|
||||
System Theme with <code>prefers-color-scheme</code>
|
||||
</h2>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dark_theme %}
|
||||
<div data-theme="dark">
|
||||
<h1 class="title">Bulma</h1>
|
||||
|
||||
<p class="subtitle">
|
||||
Modern CSS framework based on <a href="https://bulma.io">Flexbox</a>
|
||||
</p>
|
||||
|
||||
<div class="message is-success">
|
||||
<div class="message-body">
|
||||
Changes successfully saved
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<input class="input" type="text" placeholder="Your Name">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="select">
|
||||
<select><option>Select dropdown</option></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<a class="button is-link is-soft">Save Changes</a>
|
||||
<a class="button is-danger is-soft">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture light_theme %}
|
||||
<div data-theme="light">
|
||||
<h1 class="title">Light Theme</h1>
|
||||
<h2 class="subtitle">
|
||||
Light Theme with <code>[data-theme=light]</code>
|
||||
</h2>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="bd-home-section bd-theme-moon theme-dark" data-theme="dark">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color="moon"
|
||||
icon="fas fa-moon"
|
||||
title="Dark Mode"
|
||||
subtitle="Choose a dark theme automatically or by user preference"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>Dark Mode</strong> docs"
|
||||
%}
|
||||
|
||||
<!--div class="bd-home-themes js-themes">
|
||||
<button data-scheme="light" class="bd-nav-item is-sun" aria-label="Light mode">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sun" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Light</span>
|
||||
</button>
|
||||
|
||||
<button data-scheme="dark" class="bd-nav-item is-moon" aria-label="Dark mode">
|
||||
<span class="icon">
|
||||
<i class="fas fa-moon" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Dark</span>
|
||||
</button>
|
||||
|
||||
<button data-scheme="system" class="bd-nav-item is-system" aria-label="System mode">
|
||||
<span class="icon">
|
||||
<i class="fas fa-display" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>System</span>
|
||||
</button>
|
||||
</div-->
|
||||
|
||||
<div class="bd-home-theme-preview columns" style="align-items: stretch;">
|
||||
<div class="has-radius-large is-align-items-center is-flex" style="padding: 2.5em 3em;">
|
||||
{{ dark_theme }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ dark_theme }}{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
36
docs/_includes/home/features.html
Normal file
36
docs/_includes/home/features.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<div class="bd-features">
|
||||
<div class="bd-features-grid">
|
||||
{% assign href = site.data.links.by_id['start-responsiveness'].path %}
|
||||
{% include website/feature.html
|
||||
id="responsive"
|
||||
icon="fas fa-mobile-screen-button fa-xl"
|
||||
title="100% Responsive"
|
||||
subtitle="Designed mobile-first"
|
||||
href=href
|
||||
%}
|
||||
{% assign href = site.data.links.by_id['features'].path %}
|
||||
{% include website/feature.html
|
||||
id="modern"
|
||||
icon="fa-brands fa-css3 fa-xl"
|
||||
title="Modern"
|
||||
subtitle="Flexbox + Grid + CSS Variables"
|
||||
href=href %}
|
||||
{% assign href = site.data.links.by_id['customize'].path %}
|
||||
{% include website/feature.html
|
||||
id="easy"
|
||||
icon="fa-solid fa-star-of-life fa-xl"
|
||||
title="Easy"
|
||||
subtitle="Download. Customize. Done."
|
||||
href=href
|
||||
%}
|
||||
{% assign href = site.meta.github %}
|
||||
{{ href }}
|
||||
{% include website/feature.html
|
||||
id="free"
|
||||
icon="fa-brands fa-github-alt fa-xl"
|
||||
title="Free"
|
||||
subtitle="Open Source on GitHub"
|
||||
href=href
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
149
docs/_includes/home/intro.html
Normal file
149
docs/_includes/home/intro.html
Normal file
@@ -0,0 +1,149 @@
|
||||
<section class="bd-home-intro">
|
||||
<div class="bd-home-circles">
|
||||
<div class="bd-circles">
|
||||
<div class="bd-circle js-animated is-one"></div>
|
||||
<div class="bd-circle js-animated is-two"></div>
|
||||
<div class="bd-circle js-animated is-three"></div>
|
||||
|
||||
<div data-id="cssvars" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-1">
|
||||
<div class="thing is-cssvars">CSS Variables</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="dark" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-2">
|
||||
{% include website/darkmode-toggle.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="dartsass" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-3">
|
||||
<div class="thing is-dartsass">Dart Sass</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="flexbox" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-4">
|
||||
<div class="thing is-flexbox">Flexbox</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="modular" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-5">
|
||||
<div class="thing is-modular">Modular</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="opensource" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-6">
|
||||
<div class="thing is-opensource">Open Source</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="responsive" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-7">
|
||||
<div class="thing is-responsive">Responsive</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="free" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-8">
|
||||
<div class="thing is-free">Free</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="smartgrid" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-9">
|
||||
<div class="thing is-smartgrid">Smart Grid</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="autocolor" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-10">
|
||||
<div class="thing is-autocolor">Auto Color</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="skeletons" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-11">
|
||||
<div class="thing is-skeletons">Skeletons</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="themes" class="bd-dot js-ready js-dot">
|
||||
<div class="bd-dot-bounce is-12">
|
||||
<div class="thing is-themes">Themes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-id="axbom" class="bd-dot js-ready js-dot">
|
||||
{% include home/bubble.html id="axbom" %}
|
||||
</div>
|
||||
|
||||
<div data-id="ale_codes" class="bd-dot js-ready js-dot">
|
||||
{% include home/bubble.html id="ale_codes" %}
|
||||
</div>
|
||||
|
||||
<div data-id="MyTopSecretName" class="bd-dot js-ready js-dot">
|
||||
{% include home/bubble.html id="MyTopSecretName" %}
|
||||
</div>
|
||||
|
||||
<div data-id="jesseschoff" class="bd-dot js-ready js-dot">
|
||||
{% include home/bubble.html id="jesseschoff" %}
|
||||
</div>
|
||||
|
||||
<div data-id="infinitysearch" class="bd-dot js-ready js-dot">
|
||||
{% include home/bubble.html id="infinitysearch" %}
|
||||
</div>
|
||||
|
||||
<div data-id="bruhandle" class="bd-dot js-ready js-dot">
|
||||
{% include home/bubble.html id="bruhandle" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include global/header.html %}
|
||||
|
||||
<div class="bd-home-intro-body">
|
||||
<div class="bd-home-intro-content">
|
||||
<h1 class="bd-home-title js-animated">
|
||||
The Modern<br>
|
||||
CSS Framework
|
||||
</h1>
|
||||
|
||||
<p class="bd-home-tagline">
|
||||
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily
|
||||
combine to build responsive web interfaces.
|
||||
</p>
|
||||
|
||||
<span class="thing bd-home-knowledge">
|
||||
<span class="icon"> <i class="fa-solid fa-circle-check"></i></span>
|
||||
<strong>No CSS knowledge required!</strong>
|
||||
</span>
|
||||
|
||||
<div class="bd-home-buttons buttons is-centered">
|
||||
<span class="button is-primary">
|
||||
<strong>Get Started</strong>
|
||||
</span>
|
||||
|
||||
<span class="button">
|
||||
<strong>Download</strong>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="bd-home-features things">
|
||||
<div class="thing is-cssvars">CSS Variables</div>
|
||||
{% include website/darkmode-toggle.html %}
|
||||
<div class="thing is-dartsass">Dart Sass</div>
|
||||
<div class="thing is-flexbox">Flexbox</div>
|
||||
<div class="thing is-modular">Modular</div>
|
||||
<div class="thing is-opensource">Open Source</div>
|
||||
<div class="thing is-responsive">Responsive</div>
|
||||
<div class="thing is-smartgrid">Smart Grid</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include home/features.html %}
|
||||
</section>
|
||||
34
docs/_includes/home/javascript.html
Normal file
34
docs/_includes/home/javascript.html
Normal file
@@ -0,0 +1,34 @@
|
||||
{% assign css_only_link = site.data.links.by_id['start-overview'] %}
|
||||
{% assign heading_href = site.url | append: css_only_link.path %}
|
||||
|
||||
<section class="bd-home-section bd-theme-docs">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color="success"
|
||||
icon="fas fa-check"
|
||||
title="No <strong>JavaScript</strong> required"
|
||||
subtitle="CSS only, so it integrates in <strong>any JS</strong> environment"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>installation</strong> docs"
|
||||
%}
|
||||
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<img src="{{ site.url }}/assets/images/home/js-frameworks.png" width="568" height="91">
|
||||
</div>
|
||||
|
||||
<div class="column is-size-5-desktop">
|
||||
{% include
|
||||
docs/elements/tw.html
|
||||
tweet_id="860885116909998080"
|
||||
modifier='bd-is-grey'
|
||||
drawing_id='opinion-free'
|
||||
drawing_width=152
|
||||
drawing_height=52
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
29
docs/_includes/home/love.html
Normal file
29
docs/_includes/home/love.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<section class="bd-home-section bd-theme-love">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color="danger"
|
||||
icon="fas fa-heart"
|
||||
title="<strong>Loved</strong> by the <strong>community</strong>"
|
||||
subtitle="See what Bulma fans are <strong>tweeting</strong>"
|
||||
href=site.data.links.by_id.love.path
|
||||
button_icon_after="fas fa-heart"
|
||||
button_label="See more <strong>love</strong>"
|
||||
%}
|
||||
|
||||
<div class="bd-tws">
|
||||
<div class="bd-tws-list">
|
||||
{% include docs/elements/tw.html tweet_id="910956939886043136" %}
|
||||
{% include docs/elements/tw.html tweet_id="1313236270617972740" %}
|
||||
{% include docs/elements/tw.html tweet_id="1067168440333606912" %}
|
||||
{% include docs/elements/tw.html tweet_id="1106622513159856131" %}
|
||||
{% include docs/elements/tw.html tweet_id="1148364620714958848" %}
|
||||
{% include docs/elements/tw.html tweet_id="1161404522331344896" %}
|
||||
{% include docs/elements/tw.html tweet_id="1254050448711057410" %}
|
||||
{% include docs/elements/tw.html tweet_id="1176845849629995009" %}
|
||||
{% include docs/elements/tw.html tweet_id="835834634655174658" %}
|
||||
{% include docs/elements/tw.html tweet_id="1310481068886118400" %}
|
||||
{% include docs/elements/tw.html tweet_id="903629781744439297" %}
|
||||
{% include docs/elements/tw.html tweet_id="922849122008354817" %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
64
docs/_includes/home/modifiers.html
Normal file
64
docs/_includes/home/modifiers.html
Normal file
@@ -0,0 +1,64 @@
|
||||
{% assign modifiers_link = site.data.links.by_id['start-syntax'] %}
|
||||
{% assign heading_href = site.url | append: modifiers_link.path %}
|
||||
|
||||
<section class="bd-home-section bd-theme-library">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color="primary"
|
||||
icon="fas fa-graduation-cap"
|
||||
title="So <strong>easy</strong> to learn"
|
||||
subtitle="Get a design <strong>started</strong> within <strong>minutes</strong>"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>modifiers</strong> syntax"
|
||||
%}
|
||||
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-size-5-desktop">
|
||||
{%
|
||||
include docs/elements/tw.html
|
||||
tweet_id="868829487072464897"
|
||||
drawing_id='crazy'
|
||||
drawing_width=108
|
||||
drawing_height=48
|
||||
%}
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large is-loading</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large is-loading">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
17
docs/_includes/home/sponsors.html
Normal file
17
docs/_includes/home/sponsors.html
Normal file
@@ -0,0 +1,17 @@
|
||||
{% assign modifiers_link = site.data.links.by_id['sponsor'] %}
|
||||
{% assign heading_href = site.url | append: modifiers_link.path %}
|
||||
|
||||
<section class="bd-home-section bd-theme-sponsor">
|
||||
{%
|
||||
include docs/components/heading.html
|
||||
color="patreon"
|
||||
icon="fas fa-thumbs-up"
|
||||
title="Bulma is thankful to its sponsors"
|
||||
subtitle="Their support contributes to the continuous development of Bulma and other open source software"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="Become a sponsor"
|
||||
%}
|
||||
|
||||
<div id="amis" class="bd-amis"></div>
|
||||
</section>
|
||||
34
docs/_includes/home/start.html
Normal file
34
docs/_includes/home/start.html
Normal file
@@ -0,0 +1,34 @@
|
||||
{% assign docs_link = site.data.links.by_id['overview-start'] %}
|
||||
{% assign docs_url = site.url | append: docs_link.path %}
|
||||
|
||||
<section class="bd-home-section bd-theme-customize">
|
||||
<div class="container">
|
||||
<header class="has-text-centered">
|
||||
<h3 class="title is-3">
|
||||
<a class="bd-has-drawing has-text-info" href="{{ docs_url }}">
|
||||
And so <strong>much more</strong>
|
||||
{% include docs/elements/drawing.html id='join-us' width=86 height=86 %}
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Join more than <strong>200,000</strong> developers
|
||||
</h4>
|
||||
</header>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<a class="button bd-fat-button is-info is-large" href="{{ docs_url }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span>Get <strong>started</strong></span>
|
||||
</a>
|
||||
|
||||
<a class="button bd-fat-button is-large" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Contribute</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user