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

Add JS

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-10 15:38:50 +01:00
parent 69899e57f5
commit cbf8c62dde
15 changed files with 128 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_data/love.json
View File

@ -83,7 +83,7 @@
"835834634655174658": {
"id": "835834634655174658",
"date": "12:51 PM - 26 Feb 2017",
"content": "<a href=\"https://t.co/ClYmBd8tGR\">bulma.io</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href=\"https://twitter.com/jgthms\">@jgthms</a>s.",
"content": "<a href=\"https://t.co/ClYmBd8tGR\">bulma.io</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href=\"https://twitter.com/jgthms\">@jgthms</a>.",
"fullname": "scottgallant",
"username": "scottgallant",
"avatar": "https://pbs.twimg.com/profile_images/737847066030936064/1yHqQT-h_normal.jpg",
@ -693,7 +693,7 @@
"915580081938018304": {
"id": "915580081938018304",
"date": "3:11 PM - 4 Oct 2017",
"content": "Best css framework, amazing implementation. No idea how I lived without this.<br><a href=\"https://t.co/FhBPLhWVIU\">bulma.io</a> <a href=\"https://twitter.com/search?q=%23bulmaio\">#bulmaio</a> via <a href=\"https://twitter.com/jgthms\">@jgthms</a>",
"content": "Best css framework, amazing implementation. No idea how I lived without this.",
"fullname": "Juan Carlos Andreu",
"username": "andreujuanc",
"avatar": "https://pbs.twimg.com/profile_images/530443756114153472/nSmN8eUj_normal.jpeg",

7
docs/_includes/elements/tws.html
View File

@ -1,21 +1,18 @@
<div class="container">
<div class="columns">
<div class="column is-4">
{% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include elements/tw.html tweet=tweet%}
</div>
<div class="column is-4">
{% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%}
</div>
<div class="column is-4">
{% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include elements/tw.html tweet=tweet%}
{% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include elements/tw.html tweet=tweet%}

3
docs/_includes/global/head.html
View File

@ -18,9 +18,6 @@
{% if page.mdi %}
<link rel="stylesheet" href="{{ site.data.icons.mdi }}">
{% endif %}
{% if page.route == 'index' %}
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
{% endif %}
<link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

13
docs/_includes/global/scripts.html
View File

@ -5,6 +5,19 @@
{% if page.route == 'index' %}
<script src="https://player.vimeo.com/api/player.js" ></script>
<script type="text/javascript" src="{{ site.url }}/lib/index.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
<script>
WebFont.load({
google: {
families: ['Nunito:400,700']
}
});
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
{% elsif page.doc-subtab == 'navbar' %}
{% include examples/navbar-bottom.html %}
<script type="text/javascript" src="{{ site.url }}/lib/navbar.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>

12
docs/_includes/index/focus.html
View File

@ -1,6 +1,10 @@
{% assign responsiveness_link = site.data.links.by_id['overview-responsiveness'] %}
{% assign modularity_link = site.data.links.by_id['overview-modular'] %}
{% assign columns_link = site.data.links.by_id['columns-basics'] %}
<div class="bd-focus">
<nav class="columns">
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ responsiveness_link.path }}">
<p class="title is-4">
<strong>100% Responsive</strong>
</p>
@ -18,7 +22,7 @@
</figure>
</a>
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ modularity_link.path }}">
<p class="title is-4">
<strong>Modular</strong>
</p>
@ -32,7 +36,7 @@
</figure>
</a>
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ columns_link.path }}">
<p class="title is-4">
<strong>Modern</strong>
</p>
@ -46,7 +50,7 @@
</figure>
</a>
<a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}">
<a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}" target="_blank">
<p class="title is-4">
<strong>Free</strong>
</p>

28
docs/_includes/index/js.html Normal file
View File

@ -0,0 +1,28 @@
{% assign css_only_link = site.data.links.by_id['overview-classes'] %}
<section class="bd-easy section is-medium">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<header class="bd-index-header bd-is-left">
<h3 class="title is-3">
<a href="{{ site.url }}{{ css_only_link.path }}">
No <strong>JavaScript</strong> required
</a>
</h3>
<h4 class="subtitle is-4">
CSS only, so it integrates in any JS environment
</h4>
<img src="{{ site.url }}/images/index/js-frameworks.png" width="568" height="91">
</header>
</div>
<div class="column">
<div class="bd-index-js-tweet">
{% assign tweet = site.data.love.tweetsById.860885116909998080 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
</div>
</div>
</div>
</div>
</section>

2
docs/_includes/index/modifiers.html
View File

@ -15,11 +15,9 @@
</h4>
</header>
<div class="bd-easy-tweet">
{% assign tweet = site.data.love.tweetsById.868829487072464897 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
</div>
</div>
<div class="column">
<div class="block">

2
docs/_includes/index/start.html
View File

@ -18,7 +18,7 @@
</span>
<span>Read the <strong>docs</strong></span>
</a>
<a class="button is-black is-large" href="{{ site.data.meta.github }}">
<a class="button is-black is-large" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon">
<i class="fab fa-github"></i>
</span>

24
docs/_sass/index.sass
View File

@ -1,7 +1,6 @@
// Index common
.bd-index-header
margin-bottom: 3rem
text-align: center
a
color: currentColor
@ -18,9 +17,18 @@
color: $grey-light !important
strong
color: currentColor
&:not(:last-child)
margin-bottom: 3rem
&.bd-is-left
text-align: left
// JS
.bd-index-js-tweet
.bd-tw
margin-left: auto
margin-right: auto
// Customize
.bd-index-custom-title
@ -72,6 +80,9 @@
background-color: darken($pink, 2.5%)
&:active
background-color: darken($pink, 5%)
+selection
background-color: $pink
color: $white
// Fullscreen
@ -129,10 +140,21 @@
max-width: $intro-width
.bd-focus-item
border-radius: $radius-large
padding-top: 1.25rem
transition-duration: $speed * 2
transition-property: background-color
.subtitle
color: $grey-light
strong
color: currentColor
.title
transition-duration: $speed * 2
transition-property: color
&:hover
background-color: $white-bis
.title
color: $link
.bd-focus-icon
.fa-mobile-alt

2
docs/_sass/specific.sass
View File

@ -11,6 +11,8 @@
display: block
font-size: $size-5
padding: 1rem 3rem 1.5rem
transition-duration: $speed
transition-property: background-color, color
strong
font-weight: $weight-semibold
&:hover

2
docs/_sass/sponsors.sass
View File

@ -22,8 +22,6 @@
.bd-partners
background-color: $white-bis
.container
max-width: $intro-width
#carbonads
.carbon-text
padding-bottom: 0

2
docs/bulma-docs.sass
View File

@ -21,7 +21,7 @@ $beige-lighter: #EFF0EB;
$carbon-width: 300px
$carbon-height: 100px
$main-spacing: 3rem
$intro-width: 1130px
$intro-width: 1080px
%center
align-items: center

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

@ -10096,7 +10096,6 @@ svg {
}
.bd-index-header {
margin-bottom: 3rem;
text-align: center;
}
@ -10128,10 +10127,19 @@ svg {
color: currentColor;
}
.bd-index-header:not(:last-child) {
margin-bottom: 3rem;
}
.bd-index-header.bd-is-left {
text-align: left;
}
.bd-index-js-tweet .bd-tw {
margin-left: auto;
margin-right: auto;
}
.bd-index-custom-title {
color: #b5b5b5;
}
@ -10212,6 +10220,16 @@ svg {
background-color: #f9637c;
}
.bd-index-custom.bd-is-after ::-moz-selection {
background-color: #FA7C91;
color: white;
}
.bd-index-custom.bd-is-after ::selection {
background-color: #FA7C91;
color: white;
}
.bd-index-fullscreen .tabs a {
color: #b5b5b5 !important;
}
@ -10267,7 +10285,14 @@ svg {
.bd-focus {
margin: 6rem auto 0;
max-width: 1130px;
max-width: 1080px;
}
.bd-focus-item {
border-radius: 6px;
padding-top: 1.25rem;
transition-duration: 172ms;
transition-property: background-color;
}
.bd-focus-item .subtitle {
@ -10278,6 +10303,19 @@ svg {
color: currentColor;
}
.bd-focus-item .title {
transition-duration: 172ms;
transition-property: color;
}
.bd-focus-item:hover {
background-color: #fafafa;
}
.bd-focus-item:hover .title {
color: #3273dc;
}
.bd-focus-icon .fa-mobile-alt {
color: #b86bff;
margin-right: -20px;
@ -10737,6 +10775,8 @@ svg {
display: block;
font-size: 1.25rem;
padding: 1rem 3rem 1.5rem;
transition-duration: 86ms;
transition-property: background-color, color;
}
.bd-link strong {
@ -12304,10 +12344,6 @@ svg {
background-color: #fafafa;
}
.bd-partners .container {
max-width: 1130px;
}
.bd-partners #carbonads .carbon-text {
padding-bottom: 0;
}

BIN
docs/images/index/js-frameworks.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

7
docs/index.html
View File

@ -12,10 +12,7 @@ fixed_navbar: true
{% include index/modifiers.html %}
<hr>
{% include index/customize.html %}
<!-- {% include index/tiles.html %} -->
<!-- {% include index/level.html %} -->
<!-- {% include index/media-object.html %} -->
<hr>
{% include index/js.html %}
{% include index/fullheight.html %}
<!-- {% include index/usual.html %} -->
<!-- {% include index/features.html %} -->
{% include index/start.html %}