library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #316 from jgthms/new-branding

Browse Source 
Push 0.2.0
This commit is contained in:
Jeremy Thomas 2016-09-24 17:25:35 +01:00 committed by GitHub
commit a9433f1f83
123 changed files with 12074 additions and 5051 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
CONTRIBUTING.md → .github/CONTRIBUTING.md vendored
View File

0
ISSUE_TEMPLATE.md → .github/ISSUE_TEMPLATE.md vendored
View File

0
PULL_REQUEST_TEMPLATE.md → .github/PULL_REQUEST_TEMPLATE.md vendored
View File

7
CHANGELOG.md
View File

@ -1,5 +1,12 @@
# Bulma Changelog # Bulma Changelog
## 0.2.0
* Added: new branding
* Added: modularity
* Added: grid folder
* Added: .github folder
## 0.1.1 ## 0.1.1
* Remove `flex: 1` shorthand * Remove `flex: 1` shorthand

2
README.md
View File

@ -6,7 +6,7 @@
Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
[![Bulma: a Flexbox CSS framework](https://raw.githubusercontent.com/jgthms/bulma/master/images/bulma-banner.png)](http://bulma.io) [![Bulma: a Flexbox CSS framework](https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png)](http://bulma.io)
## Quick install ## Quick install

2
bower.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bulma", "name": "bulma",
"version": "0.1.2", "version": "0.2.0",
"homepage": "http://bulma.io", "homepage": "http://bulma.io",
"authors": [ "authors": [
"jgthms <bbxdesign@gmail.com>" "jgthms <bbxdesign@gmail.com>"

10
bulma.sass vendored
View File

@ -1,7 +1,7 @@
@charset "utf-8" @charset "utf-8"
@import "sass/utilities/utilities" @import "sass/base/base.sass"
@import "sass/base/base" @import "sass/elements/elements.sass"
@import "sass/elements/elements" @import "sass/components/components.sass"
@import "sass/components/components" @import "sass/grid/grid.sass"
@import "sass/layout/layout" @import "sass/layout/layout.sass"

4511
css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
docs/.gitignore vendored
View File

@ -1,6 +1,8 @@
# Files # Files
.DS_Store .DS_Store
_config.local.yml _config.local.yml
css/bulma-test.css
bulma-test.sass
bulma-website-local.sass bulma-website-local.sass
npm-debug.log npm-debug.log

6
docs/_config.yml
View File

@ -1,7 +1,7 @@
# Meta # Meta
title: "Bulma: a modern CSS framework based on Flexbox" title: "Bulma: a modern CSS framework based on Flexbox"
description: "Bulma is a CSS framework based on Flexbox and built with Sass" description: "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free."
# Build # Build
@ -13,6 +13,6 @@ url: http://bulma.io
baseurl: "" baseurl: ""
documentation: "/documentation/overview/start/" documentation: "/documentation/overview/start/"
download: https://github.com/jgthms/bulma/archive/0.1.2.zip download: https://github.com/jgthms/bulma/archive/0.2.0.zip
github: https://github.com/jgthms/bulma github: https://github.com/jgthms/bulma
version: 0.1.2 version: 0.2.0

32
docs/_includes/footer.html
View File

@ -68,26 +68,21 @@
{% if page.route == 'index' %} {% if page.route == 'index' %}
<style type="text/css"> <style type="text/css">
@media screen and (max-width: 979px) {
.title.is-2 .icon.is-large {
display: none;
}
}
.title.is-2 { .title.is-2 {
position: relative; position: relative;
} }
.title.is-2 a { .title.is-2 a {
color: #222324; color: #242424;
padding-left: 60px;
} }
.title.is-2 a:hover { .title.is-2 a:hover {
color: #1fc8db; color: #11e4c4;
} }
.title.is-2 .icon.is-large { .title.is-2 .icon.is-large {
left: -72px; left: 0;
position: absolute; position: absolute;
top: -1px; top: -1px;
} }
@ -99,6 +94,25 @@
.hero .title.is-2 a:hover { .hero .title.is-2 a:hover {
color: white; color: white;
} }
.hero.is-primary a.column,
.hero.is-primary a.column:hover {
color: white;
}
.hero.is-primary a.column:hover .title strong {
border-bottom: 1px solid;
}
@media screen and (max-width: 979px) {
.title.is-2 a {
padding-left: 0;
}
.title.is-2 .icon.is-large {
display: none;
}
}
</style> </style>
{% endif %} {% endif %}

44
docs/_includes/head.html
View File

@ -12,24 +12,28 @@
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}"> <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
<link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/favicons/apple-touch-icon-57x57.png"> <meta property="og:url" content="{{site.url}}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/favicons/apple-touch-icon-60x60.png"> <meta property="og:type" content="website">
<link rel="apple-touch-icon" sizes="72x72" href="{{ site.baseurl }}/favicons/apple-touch-icon-72x72.png"> <meta property="og:title" content="{{site.title}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ site.baseurl }}/favicons/apple-touch-icon-76x76.png"> <meta property="og:image" content="{{site.url}}/images/bulma-banner.png">
<link rel="apple-touch-icon" sizes="114x114" href="{{ site.baseurl }}/favicons/apple-touch-icon-114x114.png"> <meta property="og:image:type" content="image/png">
<link rel="apple-touch-icon" sizes="120x120" href="{{ site.baseurl }}/favicons/apple-touch-icon-120x120.png"> <meta property="og:image:width" content="1200">
<link rel="apple-touch-icon" sizes="144x144" href="{{ site.baseurl }}/favicons/apple-touch-icon-144x144.png"> <meta property="og:image:height" content="630">
<link rel="apple-touch-icon" sizes="152x152" href="{{ site.baseurl }}/favicons/apple-touch-icon-152x152.png"> <meta property="og:description" content="{{site.description}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-32x32.png" sizes="32x32"> <meta name="twitter:card" content="summary">
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/android-chrome-192x192.png" sizes="192x192"> <meta name="twitter:site" content="@jgthms">
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-96x96.png" sizes="96x96"> <meta name="twitter:creator" content="@jgthms">
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-16x16.png" sizes="16x16"> <meta name="twitter:title" content="{{site.title}}">
<link rel="manifest" href="{{ site.baseurl }}/favicons/manifest.json"> <meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
<link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#1fc8db"> <meta name="twitter:description" content="{{site.description}}">
<link rel="shortcut icon" href="{{ site.baseurl }}/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#1fc8db"> <link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201609241700">
<meta name="msapplication-TileImage" content="{{ site.baseurl }}/favicons/mstile-144x144.png"> <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201609241700" sizes="32x32">
<meta name="msapplication-config" content="{{ site.baseurl }}/favicons/browserconfig.xml"> <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201609241700" sizes="16x16">
<meta name="theme-color" content="#ffffff"> <link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201609241700">
<link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201609241700" color="#11e4c4">
<link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201609241700">
<meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201609241700">
<meta name="theme-color" content="#11e4c4">
</head> </head>

4
docs/_includes/header.html
View File

@ -2,9 +2,9 @@
<div class="nav-left"> <div class="nav-left">
<a class="nav-item is-brand" href="{{ site.baseurl }}/"> <a class="nav-item is-brand" href="{{ site.baseurl }}/">
{% if page.route == 'index' %} {% if page.route == 'index' %}
<img src="{{ site.baseurl }}/images/bulma.png" alt="{{ site.title }}"> <img src="{{ site.baseurl }}/images/bulma-type.png" alt="{{ site.title }}">
{% else %} {% else %}
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="{{ site.title }}"> <img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="{{ site.title }}">
{% endif %} {% endif %}
</a> </a>
</div> </div>

9
docs/_includes/subnav-overview.html
View File

@ -7,12 +7,15 @@
<a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/variables/"> <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/variables/">
Variables Variables
</a> </a>
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
Classes
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/responsiveness/"> <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
Responsiveness Responsiveness
</a> </a>
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/modular/">
Modular
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
Classes
</a>
</div> </div>
</div> </div>
</nav> </nav>

6
docs/_includes/svg/bulma-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="480px" height="480px" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="#11E4C4" fill-rule="evenodd">
<polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 394 B

2
docs/_layouts/default.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
{% include head.html %} {% include head.html %}
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}"> <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
{{ content }} {{ content }}

2
docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md
View File

@ -6,6 +6,6 @@ title: "Metro UI CSS grid with Bulma tiles"
Have you ever wanted to build a **Metro-UI-like grid in CSS**? Have you ever wanted to build a **Metro-UI-like grid in CSS**?
Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element. Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.
[![Metro UI grid tiles in CSS](/images/metro-ui-css-grid-tiles.png)](http://bulma.io/documentation/grid/tiles/) [![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](http://bulma.io/documentation/grid/tiles/)
Check out the [documentation](http://bulma.io/documentation/grid/tiles/)! Check out the [documentation](http://bulma.io/documentation/grid/tiles/)!

4
docs/blog.html
View File

@ -9,7 +9,7 @@ route: blog
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-8"> <div class="column is-4">
<p class="subtitle4"> <p class="subtitle4">
{{ post.date | date_to_string }} {{ post.date | date_to_string }}
</p> </p>
@ -18,6 +18,8 @@ route: blog
{{ post.title }} {{ post.title }}
</a> </a>
</h2> </h2>
</div>
<div class="column is-8">
<div class="content"> <div class="content">
{{ post.content }} {{ post.content }}
</div> </div>

124
docs/bulma-docs.sass
View File

@ -1,6 +1,7 @@
@charset "utf-8" @charset "utf-8"
@import "../bulma.sass" @import "../bulma.sass"
@import "../sass/utilities/mixins.sass"
// Override // Override
@ -52,7 +53,6 @@ $carbon-space: 15px
.carbon-text .carbon-text
display: block display: block
color: $text-strong color: $text-strong
margin-bottom: 5px
margin-left: 130px + $carbon-space margin-left: 130px + $carbon-space
.carbon-poweredby .carbon-poweredby
font-size: $size-small font-size: $size-small
@ -77,20 +77,117 @@ $twitter: #55acee
border-color: $twitter border-color: $twitter
color: $white color: $white
@keyframes floatUp
0%
box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
transform: scale(0.86)
67%
box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
transform: scale(1)
100%
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
transform: scale(1)
@keyframes strokePath
from
stroke-dashoffset: 880
to
stroke-dashoffset: 0
@keyframes fadeIn
from
opacity: 0
transform: scale(0.86)
to
opacity: 1
transform: scale(1)
@keyframes fadeOut
0%
opacity: 1
transform: scale(0.86)
67%
opacity: 1
transform: scale(0.86)
100%
opacity: 0
transform: scale(1)
@keyframes slideDown
0%
opacity: 0
transform: translateY(-10px)
100%
opacity: 1
transform: translateY(0)
@keyframes slideUp
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
$curve: cubic-bezier(0, 0.71, 0.29, 1)
#b #b
animation-delay: 1s
animation-duration: 1.5s
animation-fill-mode: both
animation-name: floatUp
animation-timing-function: $curve
border-radius: 20px border-radius: 20px
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
display: inline-block display: inline-block
height: 240px height: 240px
margin-bottom: 40px margin-bottom: 40px
position: relative
vertical-align: top vertical-align: top
width: 240px width: 240px
svg
+overlay
display: block
height: 240px
width: 240px
&:first-child
animation-duration: 1.5s
animation-fill-mode: both
animation-name: fadeOut
animation-timing-function: $curve
g
animation-duration: 1s
animation-fill-mode: both
animation-name: strokePath
animation-timing-function: $curve
fill: none
stroke: $turquoise
stroke-dasharray: 880
stroke-width: 2px
&:last-child
animation-delay: 1s
animation-duration: 1s
animation-fill-mode: both
animation-name: fadeIn
animation-timing-function: $curve
g
fill: $turquoise
+mobile +mobile
border-radius: 10px border-radius: 10px
height: 120px height: 120px
width: 120px width: 120px
#bulma
animation: slideDown 500ms both
animation-delay: 1s
#modern-framework
animation: slideUp 500ms both
animation-delay: 1.2s
#npm #npm
animation: fadeIn 500ms both
animation-delay: 1.4s
background: none background: none
margin: -10px 0 20px margin: -10px 0 20px
code code
@ -100,6 +197,18 @@ $twitter: #55acee
font-size: 16px font-size: 16px
padding: 16px 32px padding: 16px 32px
#ghbtns
animation: slideDown 500ms both
animation-delay: 1.6s
html.route-index #carbon
animation: slideUp 500ms both
animation-delay: 1.8s
#download
animation: fadeIn 500ms both
animation-delay: 2s
#grid #grid
.notification .notification
padding-left: 0 padding-left: 0
@ -231,11 +340,12 @@ $structure-invert: $danger-invert
position: relative position: relative
.copy, .copy,
.expand .expand
@extend .unselectable +unselectable
background: $white background: $white
border: solid $border border: solid $border
border-width: 0 0 1px 1px border-width: 0 0 1px 1px
color: $text-light color: $text-light
cursor: pointer
outline: none outline: none
position: absolute position: absolute
right: 0 right: 0
@ -271,3 +381,11 @@ $structure-invert: $danger-invert
.input .input
border-color: $white border-color: $white
box-shadow: none box-shadow: none
html
\::-moz-selection
background: $primary
color: $primary-invert
\::selection
background: $primary
color: $primary-invert

4861
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

5887
docs/css/bulma.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

175
docs/css/utilities.css Normal file
View File

@ -0,0 +1,175 @@
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
background: transparent;
}
article, aside, figure, footer, header, nav, section, details, summary {
display: block;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
img,
object,
embed {
max-width: 100%;
}
html {
overflow-y: scroll;
}
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th {
font-weight: bold;
vertical-align: bottom;
}
td {
font-weight: normal;
vertical-align: top;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
pre {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;
}
input[type="radio"] {
vertical-align: text-bottom;
}
input[type="checkbox"] {
vertical-align: bottom;
}
select, input, textarea {
font: 99% sans-serif;
}
table {
font-size: inherit;
font: 100%;
}
small {
font-size: 85%;
}
strong {
font-weight: bold;
}
td, td img {
vertical-align: top;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
pre, code, kbd, samp {
font-family: monospace, sans-serif;
}
label,
input[type=button],
input[type=submit],
input[type=file],
button {
cursor: pointer;
}
button, input, select, textarea {
margin: 0;
}
button,
input[type=button] {
width: auto;
overflow: visible;
}
@keyframes spin-around {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

0
docs/css/variables.css Normal file
View File

4
docs/documentation/components/level.html
View File

@ -199,7 +199,7 @@ doc-subtab: level
<a class="link is-info">Menu</a> <a class="link is-info">Menu</a>
</p> </p>
<p class="level-item has-text-centered"> <p class="level-item has-text-centered">
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;"> <img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
</p> </p>
<p class="level-item has-text-centered"> <p class="level-item has-text-centered">
<a class="link is-info">Reservations</a> <a class="link is-info">Reservations</a>
@ -219,7 +219,7 @@ doc-subtab: level
<a class="link is-info">Menu</a> <a class="link is-info">Menu</a>
</p> </p>
<p class="level-item has-text-centered"> <p class="level-item has-text-centered">
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;"> <img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
</p> </p>
<p class="level-item has-text-centered"> <p class="level-item has-text-centered">
<a class="link is-info">Reservations</a> <a class="link is-info">Reservations</a>

4
docs/documentation/components/nav.html
View File

@ -37,7 +37,7 @@ doc-subtab: nav
<nav class="nav"> <nav class="nav">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item is-brand" href="#"> <a class="nav-item is-brand" href="#">
<img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo"> <img src="{{ site.baseurl }}/images/bulma-type.png" alt="Bulma logo">
</a> </a>
</div> </div>
@ -93,7 +93,7 @@ doc-subtab: nav
<nav class="nav"> <nav class="nav">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item is-brand" href="#"> <a class="nav-item is-brand" href="#">
<img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo"> <img src="{{ site.baseurl }}/images/bulma-type.png" alt="Bulma logo">
</a> </a>
</div> </div>

12
docs/documentation/elements/form.html
View File

@ -479,7 +479,7 @@ doc-subtab: form
</select> </select>
</span> </span>
<input class="input is-expanded" type="text" placeholder="Amount of money"> <input class="input is-expanded" type="text" placeholder="Amount of money">
<a class="button is-success"> <a class="button">
Transfer Transfer
</a> </a>
</p> </p>
@ -494,7 +494,7 @@ doc-subtab: form
</select> </select>
</span> </span>
<input class="input is-expanded" type="text" placeholder="Amount of money"> <input class="input is-expanded" type="text" placeholder="Amount of money">
<a class="button is-success"> <a class="button">
Transfer Transfer
</a> </a>
</p> </p>
@ -512,7 +512,7 @@ doc-subtab: form
</select> </select>
</span> </span>
<input class="input" type="text" placeholder="Amount of money"> <input class="input" type="text" placeholder="Amount of money">
<a class="button is-success"> <a class="button is-primary">
Transfer Transfer
</a> </a>
</p> </p>
@ -527,7 +527,7 @@ doc-subtab: form
</select> </select>
</span> </span>
<input class="input" type="text" placeholder="Amount of money"> <input class="input" type="text" placeholder="Amount of money">
<a class="button is-success"> <a class="button is-primary">
Transfer Transfer
</a> </a>
</p> </p>
@ -542,7 +542,7 @@ doc-subtab: form
</select> </select>
</span> </span>
<input class="input" type="text" placeholder="Amount of money"> <input class="input" type="text" placeholder="Amount of money">
<a class="button is-success"> <a class="button is-primary">
Transfer Transfer
</a> </a>
</p> </p>
@ -557,7 +557,7 @@ doc-subtab: form
</select> </select>
</span> </span>
<input class="input" type="text" placeholder="Amount of money"> <input class="input" type="text" placeholder="Amount of money">
<a class="button is-success"> <a class="button is-primary">
Transfer Transfer
</a> </a>
</p> </p>

21
docs/documentation/elements/tag.html
View File

@ -102,6 +102,7 @@ doc-subtab: tag
</div> </div>
<div class="column is-6"> <div class="column is-6">
{% highlight html %} {% highlight html %}
<span class="tag is-dark is-small">Small</span>
<span class="tag is-primary is-medium">Medium</span> <span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span> <span class="tag is-info is-large">Large</span>
{% endhighlight %} {% endhighlight %}
@ -116,19 +117,19 @@ doc-subtab: tag
<p class="control"> <p class="control">
<span class="tag is-info is-small"> <span class="tag is-info is-small">
Foo Foo
<button class="delete"></button> <button class="delete is-small"></button>
</span> </span>
</p> </p>
<p class="control"> <p class="control">
<span class="tag is-success"> <span class="tag is-success">
Bar Bar
<button class="delete"></button> <button class="delete is-small"></button>
</span> </span>
</p> </p>
<p class="control"> <p class="control">
<span class="tag is-warning is-medium"> <span class="tag is-warning is-medium">
Hello Hello
<button class="delete"></button> <button class="delete is-small"></button>
</span> </span>
</p> </p>
<p class="control"> <p class="control">
@ -140,16 +141,20 @@ doc-subtab: tag
</div> </div>
<div class="column is-6"> <div class="column is-6">
{% highlight html %} {% highlight html %}
<span class="tag is-success"> <span class="tag is-info is-small">
Foo Foo
<button class="delete"></button> <button class="delete is-small"></button>
</span>
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span> </span>
<span class="tag is-warning is-medium"> <span class="tag is-warning is-medium">
Bar Hello
<button class="delete"></button> <button class="delete is-small"></button>
</span> </span>
<span class="tag is-danger is-large"> <span class="tag is-danger is-large">
Foo bar World
<button class="delete"></button> <button class="delete"></button>
</span> </span>
{% endhighlight %} {% endhighlight %}

12
docs/documentation/layout/hero.html
View File

@ -434,7 +434,7 @@ doc-subtab: hero
<div class="container"> <div class="container">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item"> <a class="nav-item">
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo"> <img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="Logo">
</a> </a>
</div> </div>
<span class="nav-toggle"> <span class="nav-toggle">
@ -513,7 +513,7 @@ doc-subtab: hero
<div class="container"> <div class="container">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item"> <a class="nav-item">
<img src="images/bulma-white.png" alt="Logo"> <img src="images/bulma-type-white.png" alt="Logo">
</a> </a>
</div> </div>
<span class="nav-toggle"> <span class="nav-toggle">
@ -581,7 +581,7 @@ doc-subtab: hero
<div class="container"> <div class="container">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item"> <a class="nav-item">
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo"> <img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="Logo">
</a> </a>
</div> </div>
<span class="nav-toggle"> <span class="nav-toggle">
@ -660,7 +660,7 @@ doc-subtab: hero
<div class="container"> <div class="container">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item"> <a class="nav-item">
<img src="images/bulma-white.png" alt="Logo"> <img src="images/bulma-type-white.png" alt="Logo">
</a> </a>
</div> </div>
<span class="nav-toggle"> <span class="nav-toggle">
@ -728,7 +728,7 @@ doc-subtab: hero
<div class="container"> <div class="container">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item"> <a class="nav-item">
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo"> <img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="Logo">
</a> </a>
</div> </div>
<span class="nav-toggle"> <span class="nav-toggle">
@ -807,7 +807,7 @@ doc-subtab: hero
<div class="container"> <div class="container">
<div class="nav-left"> <div class="nav-left">
<a class="nav-item"> <a class="nav-item">
<img src="images/bulma-white.png" alt="Logo"> <img src="images/bulma-type-white.png" alt="Logo">
</a> </a>
</div> </div>
<span class="nav-toggle"> <span class="nav-toggle">

4
docs/documentation/navbar.html
View File

@ -196,7 +196,7 @@ doc-tab: navbar
<a class="link is-info">Menu</a> <a class="link is-info">Menu</a>
</p> </p>
<p class="navbar-item has-text-centered"> <p class="navbar-item has-text-centered">
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;"> <img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
</p> </p>
<p class="navbar-item has-text-centered"> <p class="navbar-item has-text-centered">
<a class="link is-info">Reservations</a> <a class="link is-info">Reservations</a>
@ -216,7 +216,7 @@ doc-tab: navbar
<a class="link is-info">Menu</a> <a class="link is-info">Menu</a>
</p> </p>
<p class="navbar-item has-text-centered"> <p class="navbar-item has-text-centered">
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;"> <img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
</p> </p>
<p class="navbar-item has-text-centered"> <p class="navbar-item has-text-centered">
<a class="link is-info">Reservations</a> <a class="link is-info">Reservations</a>

97
docs/documentation/overview/modular.html Normal file
View File

@ -0,0 +1,97 @@
---
layout: documentation
doc-tab: overview
doc-subtab: modular
---
{% include subnav-overview.html %}
<section class="section">
<div class="container">
<h1 class="title">Modular</h1>
<h2 class="subtitle">Just import what you <strong>need</strong></h2>
<hr>
<div class="content">
<p>
Bulma consists of <strong>29</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
</p>
<p>
For example, let's say you only want the Bulma <strong>columns.</strong>
<br>
The file is located in the <code>bulma/sass/grid</code> folder.
<br>
Simply <strong>import</strong> it directly:
</p>
{% highlight sass %}
@import "bulma/sass/grid/columns.sass"
{% endhighlight %}
<p>
Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
</p>
{% highlight html %}
<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>
{% endhighlight %}
<hr>
<p>
What if you only want the <strong>button</strong> styles instead?
</p>
{% highlight sass %}
@import "bulma/sass/elements/button.sass"
{% endhighlight %}
<p>
You can now use the <code>.button</code> class, and all its modifiers:
</p>
<ul>
<li>
<code>.is-active</code>
</li>
<li>
<code>.is-primary</code>,
<code>.is-info</code>,
<code>.is-success</code>...
</li>
<li>
<code>.is-small</code>,
<code>.is-medium</code>,
<code>.is-large</code>
</li>
<li>
<code>.is-outlined</code>,
<code>.is-inverted</code>,
<code>.is-link</code>
</li>
<li>
<code>.is-disabled</code>,
<code>.is-loading</code>
</li>
</ul>
{% highlight html %}
<a class="button">
Button
</a>
<a class="button is-primary">
Primary button
</a>
<a class="button is-large">
Large button
</a>
<a class="button is-loading">
Loading button
</a>
{% endhighlight %}
</div>
</div>
</section>

6
docs/documentation/overview/variables.html
View File

@ -189,12 +189,6 @@ doc-subtab: variables
<tr><td><code>$desktop</code></td><td>980px</td></tr> <tr><td><code>$desktop</code></td><td>980px</td></tr>
<tr><td><code>$widescreen</code></td><td>1180px</td></tr> <tr><td><code>$widescreen</code></td><td>1180px</td></tr>
<tr><th colspan="2">Dimensions</th></tr>
<tr><td><code>$column-gap</code></td><td>20px</td></tr>
<tr><td><code>$nav-height</code></td><td>50px</td></tr>
<tr><th colspan="2">Miscellaneous</th></tr> <tr><th colspan="2">Miscellaneous</th></tr>
<tr><td><code>$easing</code></td><td>ease-out</td></tr> <tr><td><code>$easing</code></td><td>ease-out</td></tr>

BIN
docs/favicons/android-chrome-144x144.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

BIN
docs/favicons/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
docs/favicons/android-chrome-36x36.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
docs/favicons/android-chrome-48x48.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
docs/favicons/android-chrome-72x72.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
docs/favicons/android-chrome-96x96.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
docs/favicons/apple-touch-icon-114x114.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
docs/favicons/apple-touch-icon-120x120.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
docs/favicons/apple-touch-icon-144x144.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/favicons/apple-touch-icon-152x152.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

BIN
docs/favicons/apple-touch-icon-180x180.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
docs/favicons/apple-touch-icon-57x57.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
docs/favicons/apple-touch-icon-60x60.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
docs/favicons/apple-touch-icon-72x72.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
docs/favicons/apple-touch-icon-76x76.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
docs/favicons/apple-touch-icon-precomposed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
docs/favicons/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

7
docs/favicons/browserconfig.xml
View File

@ -2,11 +2,8 @@
<browserconfig> <browserconfig>
<msapplication> <msapplication>
<tile> <tile>
<square70x70logo src="/favicons/mstile-70x70.png"/> <square150x150logo src="/favicons/mstile-150x150.png?v=201609241700"/>
<square150x150logo src="/favicons/mstile-150x150.png"/> <TileColor>#11e4c4</TileColor>
<square310x310logo src="/favicons/mstile-310x310.png"/>
<wide310x150logo src="/favicons/mstile-310x150.png"/>
<TileColor>#1fc8db</TileColor>
</tile> </tile>
</msapplication> </msapplication>
</browserconfig> </browserconfig>

BIN
docs/favicons/favicon-16x16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 710 B

BIN
docs/favicons/favicon-32x32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 917 B

BIN
docs/favicons/favicon-96x96.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
docs/favicons/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

41
docs/favicons/manifest.json
View File

@ -1,41 +1,12 @@
{ {
"name": "Bulma", "name": "bulma.io",
"icons": [ "icons": [
{ {
"src": "\/favicons\/android-chrome-36x36.png", "src": "\/favicons\/android-chrome-192x192.png?v=201609241700",
"sizes": "36x36",
"type": "image\/png",
"density": 0.75
},
{
"src": "\/favicons\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": 1
},
{
"src": "\/favicons\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": 1.5
},
{
"src": "\/favicons\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": 2
},
{
"src": "\/favicons\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": 3
},
{
"src": "\/favicons\/android-chrome-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image\/png", "type": "image\/png"
"density": 4
} }
] ],
"theme_color": "#11e4c4",
"display": "standalone"
} }

BIN
docs/favicons/mstile-144x144.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
docs/favicons/mstile-150x150.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
docs/favicons/mstile-310x150.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
docs/favicons/mstile-310x310.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
docs/favicons/mstile-70x70.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
docs/favicons/safari-pinned-tab.svg
View File

@ -2,18 +2,21 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="320.000000pt" height="320.000000pt" viewBox="0 0 320.000000 320.000000" width="480.000000pt" height="480.000000pt" viewBox="0 0 480.000000 480.000000"
preserveAspectRatio="xMidYMid meet"> preserveAspectRatio="xMidYMid meet">
<metadata> <metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013 Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata> </metadata>
<g transform="translate(0.000000,320.000000) scale(0.100000,-0.100000)" <g transform="translate(0.000000,480.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none"> fill="#000000" stroke="none">
<path d="M1105 2807 c-214 -215 -394 -397 -398 -404 -5 -8 -17 -74 -27 -146 <path d="M1760 4200 c-330 -330 -600 -603 -601 -607 0 -5 -2 -15 -3 -23 -2 -8
-11 -73 -22 -148 -24 -167 -3 -19 -26 -179 -51 -355 -57 -403 -54 -385 -60 -7 -40 -11 -70 -4 -30 -8 -62 -10 -70 -1 -8 -6 -40 -10 -70 -4 -30 -8 -64 -10
-415 -2 -14 -6 -41 -9 -60 -11 -84 -27 -198 -32 -227 -5 -31 12 -49 496 -533 -75 -4 -21 -13 -88 -21 -145 -6 -44 -13 -90 -19 -132 -4 -27 -95 -667 -110
l500 -500 600 400 600 400 -395 395 c-217 217 -395 399 -395 405 0 6 133 143 -773 -2 -16 -11 -79 -20 -140 -9 -60 -18 -126 -21 -145 -2 -20 -6 -46 -9 -59
295 305 l295 295 -500 500 c-275 275 -501 500 -503 499 -1 0 -177 -177 -392 -2 -13 -7 -44 -10 -70 -3 -25 -7 -59 -10 -76 -2 -16 -7 -47 -10 -68 -3 -20 -7
-392z"/> -54 -10 -75 -3 -20 -8 -51 -11 -69 -5 -31 18 -55 746 -783 l750 -750 673 447
c369 247 674 450 677 453 3 3 105 71 228 153 l222 147 -595 595 c-327 327
-595 599 -595 605 0 6 198 208 440 450 242 242 440 444 440 450 0 6 -335 345
-745 755 l-745 745 -600 -600z"/>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 901 B

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
docs/images/arc-de-triomphe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 461 KiB

BIN
docs/images/b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

0
docs/images/metro-ui-css-grid-tiles.png → docs/images/blog/metro-ui-css-grid-tiles.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 142 KiB

BIN
docs/images/bulma-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
docs/images/bulma-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
docs/images/bulma-type-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
docs/images/bulma-type.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/images/bulma-white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docs/images/bulma.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

129
docs/images/sparrow/app-store-badge.svg
View File

@ -1,129 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="US_UK_Download_on_the" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="135px" height="40px" viewBox="0 0 135 40" enable-background="new 0 0 135 40" xml:space="preserve">
<g>
<path fill="#A6A6A6" d="M130.197,40H4.729C2.122,40,0,37.872,0,35.267V4.726C0,2.12,2.122,0,4.729,0h125.468
C132.803,0,135,2.12,135,4.726v30.541C135,37.872,132.803,40,130.197,40L130.197,40z"/>
<path d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725
c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>
<g>
<g>
<path fill="#FFFFFF" d="M30.128,19.784c-0.029-3.223,2.639-4.791,2.761-4.864c-1.511-2.203-3.853-2.504-4.676-2.528
c-1.967-0.207-3.875,1.177-4.877,1.177c-1.022,0-2.565-1.157-4.228-1.123c-2.14,0.033-4.142,1.272-5.24,3.196
c-2.266,3.923-0.576,9.688,1.595,12.859c1.086,1.553,2.355,3.287,4.016,3.226c1.625-0.067,2.232-1.036,4.193-1.036
c1.943,0,2.513,1.036,4.207,0.997c1.744-0.028,2.842-1.56,3.89-3.127c1.255-1.78,1.759-3.533,1.779-3.623
C33.507,24.924,30.161,23.647,30.128,19.784z"/>
<path fill="#FFFFFF" d="M26.928,10.306c0.874-1.093,1.472-2.58,1.306-4.089c-1.265,0.056-2.847,0.875-3.758,1.944
c-0.806,0.942-1.526,2.486-1.34,3.938C24.557,12.205,26.016,11.382,26.928,10.306z"/>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M53.645,31.504h-2.271l-1.244-3.909h-4.324l-1.185,3.909h-2.211l4.284-13.308h2.646L53.645,31.504z
M49.755,25.955L48.63,22.48c-0.119-0.355-0.342-1.191-0.671-2.507h-0.04c-0.131,0.566-0.342,1.402-0.632,2.507l-1.105,3.475
H49.755z"/>
<path fill="#FFFFFF" d="M64.662,26.588c0,1.632-0.441,2.922-1.323,3.869c-0.79,0.843-1.771,1.264-2.942,1.264
c-1.264,0-2.172-0.454-2.725-1.362h-0.04v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
c0.711-1.146,1.79-1.718,3.238-1.718c1.132,0,2.077,0.447,2.833,1.342C64.284,23.949,64.662,25.127,64.662,26.588z M62.49,26.666
c0-0.934-0.21-1.704-0.632-2.31c-0.461-0.632-1.08-0.948-1.856-0.948c-0.526,0-1.004,0.176-1.431,0.523
c-0.428,0.35-0.708,0.807-0.839,1.373c-0.066,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.642,1.768
s0.984,0.721,1.668,0.721c0.803,0,1.428-0.31,1.875-0.928C62.266,28.496,62.49,27.68,62.49,26.666z"/>
<path fill="#FFFFFF" d="M75.699,26.588c0,1.632-0.441,2.922-1.324,3.869c-0.789,0.843-1.77,1.264-2.941,1.264
c-1.264,0-2.172-0.454-2.724-1.362H68.67v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
c0.71-1.146,1.789-1.718,3.238-1.718c1.131,0,2.076,0.447,2.834,1.342C75.32,23.949,75.699,25.127,75.699,26.588z M73.527,26.666
c0-0.934-0.211-1.704-0.633-2.31c-0.461-0.632-1.078-0.948-1.855-0.948c-0.527,0-1.004,0.176-1.432,0.523
c-0.428,0.35-0.707,0.807-0.838,1.373c-0.065,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.64,1.768
c0.428,0.48,0.984,0.721,1.67,0.721c0.803,0,1.428-0.31,1.875-0.928C73.303,28.496,73.527,27.68,73.527,26.666z"/>
<path fill="#FFFFFF" d="M88.039,27.772c0,1.132-0.393,2.053-1.182,2.764c-0.867,0.777-2.074,1.165-3.625,1.165
c-1.432,0-2.58-0.276-3.449-0.829l0.494-1.777c0.936,0.566,1.963,0.85,3.082,0.85c0.803,0,1.428-0.182,1.877-0.544
c0.447-0.362,0.67-0.848,0.67-1.454c0-0.54-0.184-0.995-0.553-1.364c-0.367-0.369-0.98-0.712-1.836-1.029
c-2.33-0.869-3.494-2.142-3.494-3.816c0-1.094,0.408-1.991,1.225-2.689c0.814-0.699,1.9-1.048,3.258-1.048
c1.211,0,2.217,0.211,3.02,0.632l-0.533,1.738c-0.75-0.408-1.598-0.612-2.547-0.612c-0.75,0-1.336,0.185-1.756,0.553
c-0.355,0.329-0.533,0.73-0.533,1.205c0,0.526,0.203,0.961,0.611,1.303c0.355,0.316,1,0.658,1.936,1.027
c1.145,0.461,1.986,1,2.527,1.618C87.77,26.081,88.039,26.852,88.039,27.772z"/>
<path fill="#FFFFFF" d="M95.088,23.508h-2.35v4.659c0,1.185,0.414,1.777,1.244,1.777c0.381,0,0.697-0.033,0.947-0.099l0.059,1.619
c-0.42,0.157-0.973,0.236-1.658,0.236c-0.842,0-1.5-0.257-1.975-0.77c-0.473-0.514-0.711-1.376-0.711-2.587v-4.837h-1.4v-1.6h1.4
v-1.757l2.094-0.632v2.389h2.35V23.508z"/>
<path fill="#FFFFFF" d="M105.691,26.627c0,1.475-0.422,2.686-1.264,3.633c-0.883,0.975-2.055,1.461-3.516,1.461
c-1.408,0-2.529-0.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487,0.43-2.705,1.293-3.652c0.861-0.948,2.023-1.422,3.484-1.422
c1.408,0,2.541,0.467,3.396,1.402C105.283,24.021,105.691,25.192,105.691,26.627z M103.479,26.696
c0-0.885-0.189-1.644-0.572-2.277c-0.447-0.766-1.086-1.148-1.914-1.148c-0.857,0-1.508,0.383-1.955,1.148
c-0.383,0.634-0.572,1.405-0.572,2.317c0,0.885,0.189,1.644,0.572,2.276c0.461,0.766,1.105,1.148,1.936,1.148
c0.814,0,1.453-0.39,1.914-1.168C103.281,28.347,103.479,27.58,103.479,26.696z"/>
<path fill="#FFFFFF" d="M112.621,23.783c-0.211-0.039-0.436-0.059-0.672-0.059c-0.75,0-1.33,0.283-1.738,0.85
c-0.355,0.5-0.533,1.132-0.533,1.895v5.035h-2.131l0.02-6.574c0-1.106-0.027-2.113-0.08-3.021h1.857l0.078,1.836h0.059
c0.225-0.631,0.58-1.139,1.066-1.52c0.475-0.343,0.988-0.514,1.541-0.514c0.197,0,0.375,0.014,0.533,0.039V23.783z"/>
<path fill="#FFFFFF" d="M122.156,26.252c0,0.382-0.025,0.704-0.078,0.967h-6.396c0.025,0.948,0.334,1.673,0.928,2.173
c0.539,0.447,1.236,0.671,2.092,0.671c0.947,0,1.811-0.151,2.588-0.454l0.334,1.48c-0.908,0.396-1.98,0.593-3.217,0.593
c-1.488,0-2.656-0.438-3.506-1.313c-0.848-0.875-1.273-2.05-1.273-3.524c0-1.447,0.395-2.652,1.186-3.613
c0.828-1.026,1.947-1.539,3.355-1.539c1.383,0,2.43,0.513,3.141,1.539C121.873,24.047,122.156,25.055,122.156,26.252z
M120.123,25.699c0.014-0.632-0.125-1.178-0.414-1.639c-0.369-0.593-0.936-0.889-1.699-0.889c-0.697,0-1.264,0.289-1.697,0.869
c-0.355,0.461-0.566,1.014-0.631,1.658H120.123z"/>
</g>
<g>
<g>
<path fill="#FFFFFF" d="M49.05,10.009c0,1.177-0.353,2.063-1.058,2.658c-0.653,0.549-1.581,0.824-2.783,0.824
c-0.596,0-1.106-0.026-1.533-0.078V6.982c0.557-0.09,1.157-0.136,1.805-0.136c1.145,0,2.008,0.249,2.59,0.747
C48.723,8.156,49.05,8.961,49.05,10.009z M47.945,10.038c0-0.763-0.202-1.348-0.606-1.756c-0.404-0.407-0.994-0.611-1.771-0.611
c-0.33,0-0.611,0.022-0.844,0.068v4.889c0.129,0.02,0.365,0.029,0.708,0.029c0.802,0,1.421-0.223,1.857-0.669
S47.945,10.892,47.945,10.038z"/>
<path fill="#FFFFFF" d="M54.909,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.009,0.718-1.727,0.718
c-0.692,0-1.243-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.712-0.698
c0.692,0,1.248,0.229,1.669,0.688C54.708,9.757,54.909,10.333,54.909,11.037z M53.822,11.071c0-0.435-0.094-0.808-0.281-1.119
c-0.22-0.376-0.533-0.564-0.94-0.564c-0.421,0-0.741,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.714-0.191,0.94-0.574
C53.725,11.882,53.822,11.506,53.822,11.071z"/>
<path fill="#FFFFFF" d="M62.765,8.719l-1.475,4.714h-0.96l-0.611-2.047c-0.155-0.511-0.281-1.019-0.379-1.523h-0.019
c-0.091,0.518-0.217,1.025-0.379,1.523l-0.649,2.047h-0.971l-1.387-4.714h1.077l0.533,2.241c0.129,0.53,0.235,1.035,0.32,1.513
h0.019c0.078-0.394,0.207-0.896,0.389-1.503l0.669-2.25h0.854l0.641,2.202c0.155,0.537,0.281,1.054,0.378,1.552h0.029
c0.071-0.485,0.178-1.002,0.32-1.552l0.572-2.202H62.765z"/>
<path fill="#FFFFFF" d="M68.198,13.433H67.15v-2.7c0-0.832-0.316-1.248-0.95-1.248c-0.311,0-0.562,0.114-0.757,0.343
c-0.193,0.229-0.291,0.499-0.291,0.808v2.796h-1.048v-3.366c0-0.414-0.013-0.863-0.038-1.349h0.921l0.049,0.737h0.029
c0.122-0.229,0.304-0.418,0.543-0.569c0.284-0.176,0.602-0.265,0.95-0.265c0.44,0,0.806,0.142,1.097,0.427
c0.362,0.349,0.543,0.87,0.543,1.562V13.433z"/>
<path fill="#FFFFFF" d="M71.088,13.433h-1.047V6.556h1.047V13.433z"/>
<path fill="#FFFFFF" d="M77.258,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.01,0.718-1.727,0.718
c-0.693,0-1.244-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.711-0.698
c0.693,0,1.248,0.229,1.67,0.688C77.057,9.757,77.258,10.333,77.258,11.037z M76.17,11.071c0-0.435-0.094-0.808-0.281-1.119
c-0.219-0.376-0.533-0.564-0.939-0.564c-0.422,0-0.742,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.713-0.191,0.939-0.574
C76.074,11.882,76.17,11.506,76.17,11.071z"/>
<path fill="#FFFFFF" d="M82.33,13.433h-0.941l-0.078-0.543h-0.029c-0.322,0.433-0.781,0.65-1.377,0.65
c-0.445,0-0.805-0.143-1.076-0.427c-0.246-0.258-0.369-0.579-0.369-0.96c0-0.576,0.24-1.015,0.723-1.319
c0.482-0.304,1.16-0.453,2.033-0.446V10.3c0-0.621-0.326-0.931-0.979-0.931c-0.465,0-0.875,0.117-1.229,0.349l-0.213-0.688
c0.438-0.271,0.979-0.407,1.617-0.407c1.232,0,1.85,0.65,1.85,1.95v1.736C82.262,12.78,82.285,13.155,82.33,13.433z
M81.242,11.813v-0.727c-1.156-0.02-1.734,0.297-1.734,0.95c0,0.246,0.066,0.43,0.201,0.553c0.135,0.123,0.307,0.184,0.512,0.184
c0.23,0,0.445-0.073,0.641-0.218c0.197-0.146,0.318-0.331,0.363-0.558C81.236,11.946,81.242,11.884,81.242,11.813z"/>
<path fill="#FFFFFF" d="M88.285,13.433h-0.93l-0.049-0.757h-0.029c-0.297,0.576-0.803,0.864-1.514,0.864
c-0.568,0-1.041-0.223-1.416-0.669s-0.562-1.025-0.562-1.736c0-0.763,0.203-1.381,0.611-1.853c0.395-0.44,0.879-0.66,1.455-0.66
c0.633,0,1.076,0.213,1.328,0.64h0.02V6.556h1.049v5.607C88.248,12.622,88.26,13.045,88.285,13.433z M87.199,11.445v-0.786
c0-0.136-0.01-0.246-0.029-0.33c-0.059-0.252-0.186-0.464-0.379-0.635c-0.195-0.171-0.43-0.257-0.701-0.257
c-0.391,0-0.697,0.155-0.922,0.466c-0.223,0.311-0.336,0.708-0.336,1.193c0,0.466,0.107,0.844,0.322,1.135
c0.227,0.31,0.533,0.465,0.916,0.465c0.344,0,0.619-0.129,0.828-0.388C87.1,12.069,87.199,11.781,87.199,11.445z"/>
<path fill="#FFFFFF" d="M97.248,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.008,0.718-1.727,0.718
c-0.691,0-1.242-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.713-0.698
c0.691,0,1.248,0.229,1.668,0.688C97.047,9.757,97.248,10.333,97.248,11.037z M96.162,11.071c0-0.435-0.094-0.808-0.281-1.119
c-0.221-0.376-0.533-0.564-0.941-0.564c-0.42,0-0.74,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.715-0.191,0.941-0.574
C96.064,11.882,96.162,11.506,96.162,11.071z"/>
<path fill="#FFFFFF" d="M102.883,13.433h-1.047v-2.7c0-0.832-0.316-1.248-0.951-1.248c-0.311,0-0.562,0.114-0.756,0.343
s-0.291,0.499-0.291,0.808v2.796h-1.049v-3.366c0-0.414-0.012-0.863-0.037-1.349h0.92l0.049,0.737h0.029
c0.123-0.229,0.305-0.418,0.543-0.569c0.285-0.176,0.602-0.265,0.951-0.265c0.439,0,0.805,0.142,1.096,0.427
c0.363,0.349,0.543,0.87,0.543,1.562V13.433z"/>
<path fill="#FFFFFF" d="M109.936,9.504h-1.154v2.29c0,0.582,0.205,0.873,0.611,0.873c0.188,0,0.344-0.016,0.467-0.049
l0.027,0.795c-0.207,0.078-0.479,0.117-0.814,0.117c-0.414,0-0.736-0.126-0.969-0.378c-0.234-0.252-0.35-0.676-0.35-1.271V9.504
h-0.689V8.719h0.689V7.855l1.027-0.31v1.173h1.154V9.504z"/>
<path fill="#FFFFFF" d="M115.484,13.433h-1.049v-2.68c0-0.845-0.316-1.268-0.949-1.268c-0.486,0-0.818,0.245-1,0.735
c-0.031,0.103-0.049,0.229-0.049,0.377v2.835h-1.047V6.556h1.047v2.841h0.02c0.33-0.517,0.803-0.775,1.416-0.775
c0.434,0,0.793,0.142,1.078,0.427c0.355,0.355,0.533,0.883,0.533,1.581V13.433z"/>
<path fill="#FFFFFF" d="M121.207,10.853c0,0.188-0.014,0.346-0.039,0.475h-3.143c0.014,0.466,0.164,0.821,0.455,1.067
c0.266,0.22,0.609,0.33,1.029,0.33c0.465,0,0.889-0.074,1.271-0.223l0.164,0.728c-0.447,0.194-0.973,0.291-1.582,0.291
c-0.73,0-1.305-0.215-1.721-0.645c-0.418-0.43-0.625-1.007-0.625-1.731c0-0.711,0.193-1.303,0.582-1.775
c0.406-0.504,0.955-0.756,1.648-0.756c0.678,0,1.193,0.252,1.541,0.756C121.068,9.77,121.207,10.265,121.207,10.853z
M120.207,10.582c0.008-0.311-0.061-0.579-0.203-0.805c-0.182-0.291-0.459-0.437-0.834-0.437c-0.342,0-0.621,0.142-0.834,0.427
c-0.174,0.227-0.277,0.498-0.311,0.815H120.207z"/>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/images/sparrow/business-insider.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/images/sparrow/google-play-badge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
docs/images/sparrow/iphone-perspective.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 698 KiB

BIN
docs/images/sparrow/iphone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 219 KiB

BIN
docs/images/sparrow/logo-grayscale.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

BIN
docs/images/sparrow/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
docs/images/sparrow/techcrunch.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
docs/images/sparrow/venture-beat.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

BIN
docs/images/sparrow/wired.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

61
docs/index.html
View File

@ -13,21 +13,22 @@ route: index
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<p id="b"> <p id="b">
<img src="{{ site.baseurl }}/images/b.png" alt="{{ site.title }}"> {% include svg/bulma-icon.svg %}
{% include svg/bulma-icon.svg %}
</p> </p>
<h1 class="title"> <h1 id="bulma" class="title">
Bulma Bulma
</h1> </h1>
<h2 class="subtitle"> <h2 id="modern-framework" class="subtitle">
A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong> A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
</h2> </h2>
<pre id="npm"><code>npm install bulma</code></pre> <pre id="npm"><code>npm install bulma</code></pre>
<div class="block"> <div id="ghbtns" class="block">
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
</div> </div>
{% include carbon.html %} {% include carbon.html %}
<p class="hero-buttons"> <p id="download" class="hero-buttons">
<a class="button is-primary is-large" href="{{ site.download }}"> <a class="button is-primary is-large" href="{{ site.download }}">
<span class="icon"> <span class="icon">
<i class="fa fa-download"></i> <i class="fa fa-download"></i>
@ -47,7 +48,7 @@ route: index
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<nav class="columns"> <nav class="columns">
<div class="column has-text-centered"> <a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
<span class="icon is-large" style="margin-right: -15px;"> <span class="icon is-large" style="margin-right: -15px;">
<i class="fa fa-mobile"></i> <i class="fa fa-mobile"></i>
</span> </span>
@ -57,20 +58,30 @@ route: index
<span class="icon is-large" style="margin-right: 10px;"> <span class="icon is-large" style="margin-right: 10px;">
<i class="fa fa-desktop"></i> <i class="fa fa-desktop"></i>
</span> </span>
<p class="title is-4"><strong>Responsive</strong> design</p> <p class="title is-4"><strong>Responsive</strong></p>
</div> <p class="subtitle">Designed for <strong>mobile</strong>-first</p>
<div class="column has-text-centered"> </a>
<a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/modular/">
<span class="icon is-large">
<i class="fa fa-cubes"></i>
</span>
<p class="title is-4"><strong>Modular</strong></p>
<p class="subtitle">Just import what you <strong>need</strong></p>
</a>
<a class="column has-text-centered" href="{{ site.baseurl }}/documentation/grid/columns/">
<span class="icon is-large"> <span class="icon is-large">
<i class="fa fa-css3"></i> <i class="fa fa-css3"></i>
</span> </span>
<p class="title is-4">Built with <strong>Flexbox</strong></p> <p class="title is-4"><strong>Modern</strong></p>
</div> <p class="subtitle">Built with <strong>Flexbox</strong></p>
<div class="column has-text-centered"> </a>
<a class="column has-text-centered" href="{{ site.github }}">
<span class="icon is-large"> <span class="icon is-large">
<i class="fa fa-github"></i> <i class="fa fa-github"></i>
</span> </span>
<p class="title is-4">Open source on <strong><a href="{{ site.github }}">GitHub</a></strong></p> <p class="title is-4"><strong>Free</strong></p>
</div> <p class="subtitle">Open source on <strong>GitHub</strong></p>
</a>
</nav> </nav>
</div> </div>
</div> </div>
@ -220,14 +231,12 @@ route: index
</div> </div>
<div class="tile is-parent"> <div class="tile is-parent">
<article class="tile is-child notification is-success"> <article class="tile is-child notification is-success">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content"> <div class="content">
<p class="title">Tall tile</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p class="subtitle">With even more content</p> <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<div class="content"> <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div> </div>
</article> </article>
</div> </div>
@ -287,7 +296,7 @@ route: index
</p> </p>
</div> </div>
<p class="level-item"> <p class="level-item">
<a class="button is-success"> <a class="button is-primary">
New New
</a> </a>
</p> </p>
@ -337,7 +346,7 @@ route: index
<h3 class="title is-2"> <h3 class="title is-2">
<a href="{{ site.baseurl }}/documentation/components/media-object/"> <a href="{{ site.baseurl }}/documentation/components/media-object/">
<span class="icon is-large"> <span class="icon is-large">
<i class="fa fa-cubes"></i> <i class="fa fa-magic"></i>
</span> </span>
Versatile <strong>media object</strong> Versatile <strong>media object</strong>
</a> </a>
@ -568,9 +577,9 @@ route: index
</ul> </ul>
</div> </div>
<p class="block"> <p class="block">
<span class="tag is-dark">Tag<button class="delete"></button></span> <span class="tag is-dark">Tag<button class="delete is-small"></button></span>
<span class="tag is-info">Two<button class="delete"></button></span> <span class="tag is-info">Two<button class="delete is-small"></button></span>
<span class="tag is-danger">Three<button class="delete"></button></span> <span class="tag is-danger">Three<button class="delete is-small"></button></span>
</p> </p>
<div class="message is-warning"> <div class="message is-warning">
<div class="message-header"> <div class="message-header">

BIN
images/bulma-banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

18
package.json
View File

@ -1,8 +1,8 @@
{ {
"name": "bulma", "name": "bulma",
"version": "0.1.2", "version": "0.2.0",
"homepage": "http://bulma.io", "homepage": "http://bulma.io",
"author": "jgthms <bbxdesign@gmail.com>", "author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)",
"description": "Modern CSS framework based on Flexbox", "description": "Modern CSS framework based on Flexbox",
"main": "bulma.sass", "main": "bulma.sass",
"repository": { "repository": {
@ -30,17 +30,21 @@
"build": "npm run build-clean && npm run build-sass && npm run build-autoprefix", "build": "npm run build-clean && npm run build-sass && npm run build-autoprefix",
"build-autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css", "build-autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css",
"build-clean": "rm -rf css", "build-clean": "rm -rf css",
"build-sass": "node-sass --output-style expanded --source-map true --output css/ bulma.sass --outFile css/bulma.css", "build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
"deploy": "npm run build && npm run docs",
"docs": "npm run docs-sass && npm run docs-autoprefix", "docs": "npm run docs-sass && npm run docs-autoprefix",
"docs-autoprefix": "postcss --use autoprefixer --output docs/css/bulma-docs.css docs/css/bulma-docs.css", "docs-autoprefix": "postcss --use autoprefixer --output docs/css/bulma-docs.css docs/css/bulma-docs.css",
"docs-sass": "node-sass --output-style expanded --output docs/css/ docs/bulma-docs.sass --outFile docs/css/bulma-docs.css", "docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css",
"pre-push": "npm run build && git add css && git commit --amend --no-edit",
"start": "npm run build-sass -- --watch", "start": "npm run build-sass -- --watch",
"start-docs": "npm run docs-sass -- --watch" "start-docs": "npm run docs-sass -- --watch",
"start-test": "npm run test-sass -- --watch",
"test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css"
}, },
"files": [ "files": [
"css", "css",
"sass", "sass",
"bulma.sass" "bulma.sass",
"LICENSE",
"README.md"
] ]
} }

6
sass/base/base.sass
View File

@ -1,5 +1,5 @@
@charset "utf-8" @charset "utf-8"
@import "generic" @import "minireset.sass"
@import "classes" @import "generic.sass"
@import "helpers" @import "helpers.sass"

20
sass/base/classes.sass
View File

@ -1,20 +0,0 @@
.block
&:not(:last-child)
margin-bottom: 20px
.container
position: relative
+desktop
margin: 0 auto
max-width: 960px
// Modifiers
&.is-fluid
margin: 0 20px
max-width: none
+widescreen
max-width: 1200px
.fa
font-size: 21px
text-align: center
vertical-align: top

12
sass/base/generic.sass
View File

@ -1,3 +1,8 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
$body-background: $white-ter !default
html html
background-color: $body-background background-color: $body-background
font-size: $size-normal font-size: $size-normal
@ -55,8 +60,11 @@ code
padding: 1px 2px 2px padding: 1px 2px 2px
hr hr
border-top-color: $border background-color: $border
margin: 40px 0 border: none
display: block
height: 1px
margin: 20px 0
img img
max-width: 100% max-width: 100%

4
sass/base/helpers.sass
View File

@ -1,3 +1,5 @@
@import "../utilities/mixins.sass"
// Display // Display
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@ -104,4 +106,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
padding: 0 !important padding: 0 !important
.is-unselectable .is-unselectable
@extend .unselectable +unselectable

81
sass/base/minireset.sass Normal file
View File

@ -0,0 +1,81 @@
/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6
margin: 0
padding: 0
// Headings
h1,
h2,
h3,
h4,
h5,
h6
font-size: 100%
font-weight: normal
// List
ul
list-style: none
// Form
button,
input,
select,
textarea
margin: 0
// Box sizing
html
box-sizing: border-box
*
box-sizing: inherit
&:before,
&:after
box-sizing: inherit
// Media
img,
embed,
object,
audio,
video
height: auto
max-width: 100%
// Iframe
iframe
border: 0
// Table
table
border-collapse: collapse
border-spacing: 0
td,
th
padding: 0
text-align: left

2
sass/components/card.sass
View File

@ -1,3 +1,5 @@
@import "../utilities/variables.sass"
.card-header .card-header
align-items: stretch align-items: stretch
box-shadow: 0 1px 2px rgba($black, 0.1) box-shadow: 0 1px 2px rgba($black, 0.1)

23
sass/components/components.sass
View File

@ -1,14 +1,13 @@
@charset "utf-8" @charset "utf-8"
@import "card" @import "card.sass"
@import "grid" @import "highlight.sass"
@import "highlight" @import "level.sass"
@import "level" @import "media.sass"
@import "media" @import "menu.sass"
@import "menu" @import "message.sass"
@import "message" @import "modal.sass"
@import "modal" @import "nav.sass"
@import "nav" @import "pagination.sass"
@import "pagination" @import "panel.sass"
@import "panel" @import "tabs.sass"
@import "tabs"

5
sass/components/level.sass
View File

@ -1,3 +1,6 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.level-item .level-item
.title, .title,
.subtitle .subtitle
@ -33,7 +36,7 @@
justify-content: flex-end justify-content: flex-end
.level .level
@extend .block +block
align-items: center align-items: center
justify-content: space-between justify-content: space-between
code code

3
sass/components/media.sass
View File

@ -1,3 +1,6 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.media-number .media-number
background-color: $background background-color: $background
border-radius: 290486px border-radius: 290486px

2
sass/components/menu.sass
View File

@ -1,3 +1,5 @@
@import "../utilities/variables.sass"
.menu-nav .menu-nav
a a
display: block display: block

5
sass/components/message.sass
View File

@ -1,3 +1,6 @@
@import "../utilities/functions.sass"
@import "../utilities/variables.sass"
.message-body .message-body
border: 1px solid $border border: 1px solid $border
border-radius: $radius border-radius: $radius
@ -17,7 +20,7 @@
border-top: none border-top: none
.message .message
@extend .block +block
background-color: $background background-color: $background
border-radius: $radius border-radius: $radius
// Colors // Colors

9
sass/components/modal.sass
View File

@ -1,8 +1,12 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.modal-background .modal-background
+overlay +overlay
background-color: rgba($black, 0.86) background-color: rgba($black, 0.86)
.modal-content .modal-content,
.modal-card
margin: 0 20px margin: 0 20px
max-height: calc(100vh - 160px) max-height: calc(100vh - 160px)
overflow: auto overflow: auto
@ -15,7 +19,7 @@
width: 640px width: 640px
.modal-close .modal-close
@extend .delete +delete
background: none background: none
height: 40px height: 40px
position: fixed position: fixed
@ -24,7 +28,6 @@
width: 40px width: 40px
.modal-card .modal-card
@extend .modal-content
display: flex display: flex
flex-direction: column flex-direction: column
max-height: calc(100vh - 40px) max-height: calc(100vh - 40px)

9
sass/components/nav.sass
View File

@ -1,7 +1,12 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
$nav-height: 50px !default
// Components // Components
.nav-toggle .nav-toggle
@extend .hamburger +hamburger($nav-height)
// Responsiveness // Responsiveness
+tablet +tablet
display: none display: none
@ -29,7 +34,7 @@
.nav-item a, .nav-item a,
a.nav-item a.nav-item
color: $text color: $text-light
&:hover &:hover
color: $link-hover color: $link-hover
// Modifiers // Modifiers

3
sass/components/pagination.sass
View File

@ -1,3 +1,6 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.pagination .pagination
align-items: center align-items: center
display: flex display: flex

3
sass/components/panel.sass
View File

@ -1,3 +1,6 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.panel-icon .panel-icon
+fa(14px, 16px) +fa(14px, 16px)
color: $text-light color: $text-light

7
sass/components/tabs.sass
View File

@ -1,6 +1,9 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.tabs .tabs
@extend .block +block
@extend .unselectable +unselectable
align-items: stretch align-items: stretch
display: flex display: flex
justify-content: space-between justify-content: space-between

4
sass/elements/box.sass
View File

@ -1,5 +1,7 @@
@import "../utilities/variables.sass"
.box .box
@extend .block +block
background-color: $white background-color: $white
border-radius: $radius-large border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)

Some files were not shown because too many files have changed in this diff Show More