{% include book-cover.html %}
</div>
<div class="bd-book-column bd-is-content">
- {% include book-content.html %}
+ {% include book-content.html show_cover=false %}
</div>
</div>
</div>
<h3 class="title">The official Bulma book! 😲</h3>
<p class="subtitle is-6 has-text-grey">by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,<br>Mikko Lauhakari, Aslam Shah and David Berning</p>
</header>
+
+ {% if include.show_cover %}
+ <div class="bd-book-inline-cover">
+ {% include book-cover.html %}
+ </div>
+ {% endif %}
+
<div class="block bd-book-description is-size-5">
<p>A <strong>step-by-step guide</strong> that teaches you how to build a <strong>web interface from scratch</strong> using Bulma.</p>
</div>
--- /dev/null
+<div id="bookModal" class="bd-book-modal modal">
+ <div class="bd-book-modal-background"></div>
+ <div class="modal-content">
+ <div class="bd-book-modal-columns">
+ <div class="bd-book-modal-column bd-is-cover">
+ {% include book-cover.html %}
+ </div>
+ <div class="bd-book-modal-column bd-is-content">
+ {% include book-content.html show_cover=true %}
+ </div>
+ </div>
+ </div>
+ <button class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
+</div>
\ No newline at end of file
</div>
</footer>
+{% include book-modal.html %}
+
{% include scripts.html %}
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
+<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
{% if page.route == 'index' %}
{% assign table_class = include.table_class | default: 'is-bordered' %}
{% if include.custom_message %}
-
{{ include.custom_message }}
-
{% else %}
-
{% assign variables_link_text = "these variables" %}
-
{% capture variables_link %}
-
{% if data.file_url %}
-
<a href="{{ data.file_url }}" target="_blank">{{ variables_link_text }}</a>
-
{% else %}
-
{{ variables_link_text }}
-
{% endif %}
-
{% endcapture %}
-
You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-
{% endif %}
{% endcapture %}
<p>{{ content | strip }}</p>
</div>
-<table class="table {{ table_class }}">
- <thead>
- <tr>
- <th>Name</th>
- <th>Default value</th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <th>Name</th>
- <th>Default value</th>
- </tr>
- </tfoot>
- <tbody>
- {% for variable_hash in variables %}
- {% assign variable = variable_hash[1] %}
+<div class="table-container">
+ <table class="table {{ table_class }}">
+ <thead>
<tr>
- <td >
- <code style="white-space: nowrap;">{{ variable.name }}</code>
- </td>
- <td>
- <code>{{ variable.value }}</code>
- </td>
+ <th>Name</th>
+ <th>Default value</th>
</tr>
- {% endfor %}
- </tbody>
-</table>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Name</th>
+ <th>Default value</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ {% for variable_hash in variables %}
+ {% assign variable = variable_hash[1] %}
+ <tr>
+ <td >
+ <code style="white-space: nowrap;">{{ variable.name }}</code>
+ </td>
+ <td>
+ <code>{{ variable.value }}</code>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+</div>
document.addEventListener('DOMContentLoaded', () => {
- // Dropdowns
+ // Cookies
+
+ const bdCookies = Cookies.getJSON('bulma') || {};
+
+ // Book modal
+
+ const $bookModal = document.getElementById('bookModal');
+ const $bookModalCloseButtons = getAll('.bd-book-modal-close');
+
+ if (!bdCookies['closed_book_modal']) {
+ setTimeout(() => {
+ openModal('bookModal');
+ }, 5000);
+ }
+
+ if ($bookModalCloseButtons.length > 0) {
+ $bookModalCloseButtons.forEach($el => {
+ $el.addEventListener('click', event => {
+ event.stopPropagation();
+ bdCookies['closed_book_modal'] = true;
+ Cookies.set('bulma', bdCookies);
+ });
+ });
+ }
+
+ // Meta links
const $metalinks = getAll('#meta a');
$modalButtons.forEach($el => {
$el.addEventListener('click', () => {
const target = $el.dataset.target;
- const $target = document.getElementById(target);
- rootEl.classList.add('is-clipped');
- $target.classList.add('is-active');
+ openModal(target);
});
});
}
});
}
- document.addEventListener('keydown', event => {
- const e = event || window.event;
- if (e.keyCode === 27) {
- closeModals();
- closeDropdowns();
- }
- });
+ function openModal(target) {
+ const $target = document.getElementById(target);
+ rootEl.classList.add('is-clipped');
+ $target.classList.add('is-active');
+ }
function closeModals() {
rootEl.classList.remove('is-clipped');
$book-beige: #FFEDD7
+@keyframes fadeIn
+ from
+ opacity: 0
+ to
+ opacity: 1
+
+@keyframes zoomIn
+ from
+ transform: scale(0.8)
+ to
+ transform: scale(1)
+
.bd-book-banner
background-color: $white
position: relative
-.bd-book-pattern
- +overlay
+.bd-book-pattern,
+.bd-book-modal-column.bd-is-cover
background-image: url("/images/hab/lightpaperfibers_@2X.png")
background-repeat: repeat
background-size: 250px 150px
- &::after
+ &::before
+overlay
background-color: rgba($book-beige, 0.1)
content: ""
display: block
+.bd-book-pattern
+ +overlay
+
.bd-book-header
position: relative
.bd-book-cover
+ padding-top: 0.75rem
+ position: relative
+ text-align: center
+ a
+ display: inline-block
+ vertical-align: top
img
display: block
margin-right: auto
max-width: 1080px
+.bd-book-modal-background
+ +overlay
+ background-color: rgba($black, 0.86)
+
+.bd-book-modal
+ .bd-book-modal-background,
+ .modal-content
+ animation-duration: 250ms
+ animation-easing-function: ease-out
+ animation-fill-mode: both
+ .bd-book-modal-background
+ animation-name: fadeIn
+ .modal-content
+ animation-name: zoomIn
+ transform-origin: center
+.bd-book-modal-cover
+ padding: 2rem
+ position: relative
+
+.bd-book-modal-columns
+ align-items: stretch
+ display: flex
+ justify-content: center
+
+mobile
.bd-book-columns
flex-direction: column
+ .bd-book-modal
+ .bd-book-content
+ padding: 2rem
+ .bd-book-modal-column.bd-is-cover
+ display: none
+tablet
.bd-book-columns
position: absolute
right: calc(100% + 1.25rem)
top: 0.5rem
+ // Modal
+ .bd-book-modal
+ .modal-content
+ width: 960px
+ .bd-book-inline-cover
+ display: none
+ .bd-book-modal-column
+ background-color: $white
+ position: relative
+ &.bd-is-cover
+ align-items: center
+ display: flex
+ justify-content: center
+ padding: 2rem
+ &.bd-is-content
+ .bd-book-content
+ box-shadow: none
background-color: #fafafa;
}
+.table-container {
+ -webkit-overflow-scrolling: touch;
+ overflow: auto;
+ overflow-y: hidden;
+ max-width: 100%;
+}
+
+.table-container:not(:last-child) {
+ margin-bottom: 1.5rem;
+}
+
.tags {
-webkit-box-align: center;
-ms-flex-align: center;
width: 200px;
}
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes zoomIn {
+ from {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ }
+ to {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ }
+ to {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
.bd-book-banner {
background-color: white;
position: relative;
}
-.bd-book-pattern {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
+.bd-book-pattern,
+.bd-book-modal-column.bd-is-cover {
background-image: url("/images/hab/lightpaperfibers_@2X.png");
background-repeat: repeat;
background-size: 250px 150px;
}
-.bd-book-pattern::after {
+.bd-book-pattern::before,
+.bd-book-modal-column.bd-is-cover::before {
bottom: 0;
left: 0;
position: absolute;
display: block;
}
+.bd-book-pattern {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
.bd-book-header {
position: relative;
}
+.bd-book-cover {
+ padding-top: 0.75rem;
+ position: relative;
+ text-align: center;
+}
+
+.bd-book-cover a {
+ display: inline-block;
+ vertical-align: top;
+}
+
.bd-book-cover img {
display: block;
}
max-width: 1080px;
}
+.bd-book-modal-background {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background-color: rgba(10, 10, 10, 0.86);
+}
+
+.bd-book-modal .bd-book-modal-background,
+.bd-book-modal .modal-content {
+ -webkit-animation-duration: 250ms;
+ animation-duration: 250ms;
+ animation-easing-function: ease-out;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.bd-book-modal .bd-book-modal-background {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+
+.bd-book-modal .modal-content {
+ -webkit-animation-name: zoomIn;
+ animation-name: zoomIn;
+ -webkit-transform-origin: center;
+ transform-origin: center;
+}
+
+.bd-book-modal-cover {
+ padding: 2rem;
+ position: relative;
+}
+
+.bd-book-modal-columns {
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
@media screen and (max-width: 768px) {
.bd-book-columns {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;
}
+ .bd-book-modal .bd-book-content {
+ padding: 2rem;
+ }
+ .bd-book-modal-column.bd-is-cover {
+ display: none;
+ }
}
@media screen and (min-width: 769px), print {
right: calc(100% + 1.25rem);
top: 0.5rem;
}
+ .bd-book-modal .modal-content {
+ width: 960px;
+ }
+ .bd-book-inline-cover {
+ display: none;
+ }
+ .bd-book-modal-column {
+ background-color: white;
+ position: relative;
+ }
+ .bd-book-modal-column.bd-is-cover {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 2rem;
+ }
+ .bd-book-modal-column.bd-is-content .bd-book-content {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
}
/*# sourceMappingURL=bulma-docs.css.map */
\ No newline at end of file
document.addEventListener('DOMContentLoaded', function () {
- // Dropdowns
+ // Cookies
+
+ var bdCookies = Cookies.getJSON('bulma') || {};
+
+ // Book modal
+
+ var $bookModal = document.getElementById('bookModal');
+ var $bookModalCloseButtons = getAll('.bd-book-modal-close');
+
+ if (!bdCookies['closed_book_modal']) {
+ setTimeout(function () {
+ openModal('bookModal');
+ }, 5000);
+ }
+
+ if ($bookModalCloseButtons.length > 0) {
+ $bookModalCloseButtons.forEach(function ($el) {
+ $el.addEventListener('click', function (event) {
+ event.stopPropagation();
+ bdCookies['closed_book_modal'] = true;
+ Cookies.set('bulma', bdCookies);
+ });
+ });
+ }
+
+ // Meta links
var $metalinks = getAll('#meta a');
$modalButtons.forEach(function ($el) {
$el.addEventListener('click', function () {
var target = $el.dataset.target;
- var $target = document.getElementById(target);
- rootEl.classList.add('is-clipped');
- $target.classList.add('is-active');
+ openModal(target);
});
});
}
});
}
- document.addEventListener('keydown', function (event) {
- var e = event || window.event;
- if (e.keyCode === 27) {
- closeModals();
- closeDropdowns();
- }
- });
+ function openModal(target) {
+ var $target = document.getElementById(target);
+ rootEl.classList.add('is-clipped');
+ $target.classList.add('is-active');
+ }
function closeModals() {
rootEl.classList.remove('is-clipped');
--- /dev/null
+/*! js-cookie v2.1.4 | MIT */
+
+!function(a){var b=!1;if("function"==typeof define&&define.amd&&(define(a),b=!0),"object"==typeof exports&&(module.exports=a(),b=!0),!b){var c=window.Cookies,d=window.Cookies=a();d.noConflict=function(){return window.Cookies=c,d}}}(function(){function a(){for(var a=0,b={};a<arguments.length;a++){var c=arguments[a];for(var d in c)b[d]=c[d]}return b}function b(c){function d(b,e,f){var g;if("undefined"!=typeof document){if(arguments.length>1){if(f=a({path:"/"},d.defaults,f),"number"==typeof f.expires){var h=new Date;h.setMilliseconds(h.getMilliseconds()+864e5*f.expires),f.expires=h}f.expires=f.expires?f.expires.toUTCString():"";try{g=JSON.stringify(e),/^[\{\[]/.test(g)&&(e=g)}catch(p){}e=c.write?c.write(e,b):encodeURIComponent(e+"").replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),b=encodeURIComponent(b+""),b=b.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent),b=b.replace(/[\(\)]/g,escape);var i="";for(var j in f)f[j]&&(i+="; "+j,!0!==f[j]&&(i+="="+f[j]));return document.cookie=b+"="+e+i}b||(g={});for(var k=document.cookie?document.cookie.split("; "):[],l=0;l<k.length;l++){var m=k[l].split("="),n=m.slice(1).join("=");'"'===n.charAt(0)&&(n=n.slice(1,-1));try{var o=m[0].replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent);if(n=c.read?c.read(n,o):c(n,o)||n.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent),this.json)try{n=JSON.parse(n)}catch(p){}if(b===o){g=n;break}b||(g[o]=n)}catch(p){}}return g}}return d.set=d,d.get=function(a){return d.call(d,a)},d.getJSON=function(){return d.apply({json:!0},[].slice.call(arguments))},d.defaults={},d.remove=function(b,c){d(b,"",a(c,{expires:-1}))},d.withConverter=b,d}return b(function(){})});
\ No newline at end of file
tr:not(.is-selected)
&:nth-child(even)
background-color: $table-striped-row-even-background-color
+
+.table-container
+ +block
+ +overflow-touch
+ overflow: auto
+ overflow-y: hidden
+ max-width: 100%
\ No newline at end of file
projects / thirdparty / bulma.git / commitdiff
