├── .babelrc ├── images ├── jgthms.png ├── patreon.png ├── blog │ ├── dropup.png │ ├── fixed-navbar.mp4 │ ├── list-of-tags.png │ ├── list-of-buttons.png │ ├── patreon-homepage.png │ ├── share │ │ ├── fixed-navbar.jpg │ │ ├── list-of-tags.jpg │ │ ├── list-of-buttons.jpg │ │ ├── new-field-element.jpg │ │ ├── bulma-is-on-patreon.jpg │ │ ├── bulma-bootstrap-comparison.jpg │ │ ├── roses-are-red-links-are-blue.jpg │ │ ├── access-previous-bulma-versions.jpg │ │ ├── bulma-supports-font-awesome-5.jpg │ │ ├── metro-ui-css-grid-with-bulma-tiles.jpg │ │ └── blog-launched-new-responsive-columns-new-helpers.jpg │ └── metro-ui-css-grid-tiles.png ├── bulma-icon.png ├── bulma-logo.png ├── bulma-start.png ├── bulma-type.png ├── bulma-banner.png ├── paypal-donate.png ├── sponsors │ ├── nazar.png │ ├── 9brainz.png │ ├── bestcss.png │ └── themeisle.png ├── bulma-logo-white.png ├── bulma-type-white.png ├── customize-after.png ├── customize-before.png ├── expo │ ├── md5-672x420.jpg │ ├── zea-672x420.jpg │ ├── buefy-1344x840.jpg │ ├── buefy-672x420.jpg │ ├── elevo-1344x840.jpg │ ├── elevo-672x420.jpg │ ├── md5-1344x840.jpg │ ├── miso-1344x840.jpg │ ├── miso-672x420.jpg │ ├── oneday-672x420.jpg │ ├── penmob-672x420.jpg │ ├── zea-1344x840.jpg │ ├── zea-2688x1680.jpg │ ├── bulma-expo-share.png │ ├── favicon-1344x840.jpg │ ├── favicon-672x420.jpg │ ├── gustav-1344x840.jpg │ ├── gustav-2688x1680.jpg │ ├── jubiwee-1344x840.jpg │ ├── jubiwee-672x420.jpg │ ├── kappamon-672x420.jpg │ ├── oneday-1344x840.jpg │ ├── oneday-2688x1680.jpg │ ├── penmob-1344x840.jpg │ ├── pollygot-672x420.jpg │ ├── reportz-1344x840.jpg │ ├── reportz-672x420.jpg │ ├── uploadme-672x420.jpg │ ├── alt-three-1344x840.jpg │ ├── alt-three-672x420.jpg │ ├── anyshortcut-672x420.jpg │ ├── booknshelf-1344x840.jpg │ ├── booknshelf-672x420.jpg │ ├── driftrock-1344x840.jpg │ ├── driftrock-2688x1680.jpg │ ├── driftrock-672x420.jpg │ ├── hellogustav-672x420.jpg │ ├── kappamon-1344x840.jpg │ ├── lottiefiles-672x420.jpg │ ├── pollygot-1344x840.jpg │ ├── pragonauts-1344x840.jpg │ ├── pragonauts-672x420.jpg │ ├── uploadme-1344x840.jpg │ ├── uploadme-2688x1680.jpg │ ├── ysimplicity-672x420.jpg │ ├── anyshortcut-1344x840.jpg │ ├── lottiefiles-1344x840.jpg │ ├── mynameismirko-672x420.jpg │ ├── vybranthotels-672x420.jpg │ ├── ysimplicity-1344x840.jpg │ ├── bashful-birdie-1344x840.jpg │ ├── bashful-birdie-672x420.jpg │ ├── bongoutindonesia-672x420.jpg │ ├── bugcraft-studio-1344x840.jpg │ ├── bugcraft-studio-672x420.jpg │ ├── mynameismirko-1344x840.jpg │ ├── mynameismirko-2688x1680.jpg │ ├── smileonthetiles-1344x840.jpg │ ├── smileonthetiles-672x420.jpg │ ├── vybranthotels-1344x840.jpg │ ├── apache-bookkeeper-1344x840.jpg │ ├── apache-bookkeeper-672x420.jpg │ ├── bongoutindonesia-1344x840.jpg │ ├── brújula-turística-1344x840.jpg │ ├── brújula-turística-672x420.jpg │ ├── sketch-for-designrs-1344x840.jpg │ ├── sketch-for-designrs-2688x1680.jpg │ └── sketch-for-designrs-672x420.jpg ├── made-with-bulma.png ├── css-reference-logo.png ├── html-reference-logo.png ├── placeholders │ ├── 16x16.png │ ├── 24x24.png │ ├── 32x32.png │ ├── 48x48.png │ ├── 64x64.png │ ├── 96x96.png │ ├── empty.png │ ├── 1280x960.png │ ├── 128x128.png │ ├── 256x256.png │ ├── 300x225.png │ ├── 480x320.png │ ├── 480x480.png │ ├── 640x320.png │ ├── 640x360.png │ ├── 640x480.png │ └── 672x420.jpg ├── fortyfour-background.jpg ├── made-with-bulma--dark.png ├── become_a_patron_button.png ├── extensions │ ├── bulma-badge.png │ ├── bulma-divider.png │ ├── bulma-ribbon.png │ ├── bulma-slider.png │ ├── bulma-steps.png │ ├── bulma-switch.png │ ├── bulma-tooltip.png │ ├── bulma-accordion.png │ ├── bulma-calendar.png │ ├── bulma-carousel.png │ ├── bulma-megamenu.png │ ├── bulma-quickview.png │ ├── bulma-tagsinput.png │ ├── bulma-timeline.png │ ├── bulma.io-axure.png │ ├── bulma-checkradio.png │ ├── bulma-coolcheckbox.png │ ├── bulma-iconpicker.png │ ├── bulma-pageloader.png │ ├── bulma-pricingtable.png │ └── bulma-steps-alternative.png ├── index │ ├── vimeo-placeholder.jpg │ └── vimeo-placeholder-bis.jpg ├── made-with-bulma--black.png ├── made-with-bulma--white.png ├── made-with-bulma-badges.zip ├── become_a_patron_button@2x.png ├── become_a_patron_button@3x.png ├── made-with-bulma--semiblack.png ├── made-with-bulma--semiwhite.png └── various │ ├── tom-levold-260373.jpg │ ├── dmitri-popov-265077.jpg │ ├── rodion-kutsaev-24833.jpg │ └── sven-scheuermeier-34477.jpg ├── _includes ├── bp │ ├── fullhd.html │ ├── touch.html │ ├── desktop.html │ └── widescreen.html ├── color │ ├── black-bis.html │ ├── black.html │ ├── grey.html │ ├── white.html │ ├── black-ter.html │ ├── blue.html │ ├── cyan.html │ ├── grey-dark.html │ ├── grey-darker.html │ ├── grey-light.html │ ├── grey-lighter.html │ ├── red.html │ ├── white-bis.html │ ├── white-ter.html │ ├── green.html │ ├── orange.html │ ├── purple.html │ ├── turquoise.html │ └── yellow.html ├── elements │ ├── color-square.html │ ├── new-tag.html │ ├── patreon-item.html │ └── tw-button.html ├── anchor.html ├── sponsor.html ├── patreon.html ├── deprecated.html ├── svg │ ├── bulma-icon.svg │ ├── bulma-b.svg │ └── bootstrap-icon.svg ├── fortyfour.html ├── subnav-grid.html ├── pro.html ├── getting-started.html ├── sponsors.html ├── bsa.html ├── blog-hero.html ├── subnav-modifiers.html ├── snippet.html ├── subnav-columns.html ├── subnav-layout.html ├── newsletter.html ├── subnav-form.html ├── meta.html ├── tws.html ├── subnav-overview.html ├── subnav-components.html ├── variables.html ├── subnav-elements.html ├── scripts.html ├── carbon.html ├── tw.html ├── header.html └── examples │ └── navbar-bottom.html ├── favicons ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── mstile-150x150.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-384x384.png ├── browserconfig.xml ├── manifest.json └── safari-pinned-tab.svg ├── documentation ├── components │ ├── level.html │ ├── media-object.html │ └── menu.html ├── elements │ ├── form.html │ ├── notification.html │ ├── progress.html │ ├── box.html │ └── delete.html ├── layout │ ├── section.html │ └── footer.html ├── overview │ ├── classes.html │ ├── mixins.html │ ├── modular.html │ └── colors.html ├── columns │ ├── basics.html │ └── nesting.html ├── modifiers │ └── helpers.html └── form │ └── checkbox.html ├── docker-compose.yml ├── _sass ├── override.sass ├── callout.sass ├── sponsors.sass ├── route.sass ├── klmn.sass ├── header.sass ├── patreon.sass ├── expo.sass ├── global.sass ├── footer.sass ├── bsa.sass ├── bootstrap.sass ├── highlight.sass └── love.sass ├── .gitignore ├── _layouts ├── default.html ├── post.html └── documentation.html ├── _data ├── variables │ ├── grid │ │ └── columns.json │ ├── elements │ │ ├── image.json │ │ ├── progress.json │ │ ├── notification.json │ │ ├── tag.json │ │ ├── icon.json │ │ ├── box.json │ │ ├── title.json │ │ └── table.json │ ├── layout │ │ ├── footer.json │ │ └── section.json │ ├── utilities │ │ └── controls.json │ ├── components │ │ ├── breadcrumb.json │ │ ├── card.json │ │ ├── menu.json │ │ ├── message.json │ │ └── dropdown.json │ └── base │ │ └── generic.json ├── icons.json ├── breakpoints.json └── backers.json ├── package.json ├── _posts ├── 2017-07-24-access-previous-bulma-versions.md ├── 2017-11-14-bulma-is-on-patreon.md ├── 2017-10-22-list-of-buttons.md ├── 2016-04-11-metro-ui-css-grid-with-bulma-tiles.md ├── 2017-11-01-fixed-navbar.md ├── 2017-08-01-bulma-bootstrap-comparison.md ├── 2017-08-03-list-of-tags.md ├── 2018-01-18-bulma-supports-font-awesome-5.md └── 2017-10-09-roses-are-red-links-are-blue.md ├── bulma-docs.sass ├── _config.yml ├── thank-you.html ├── _javascript ├── navbar.js ├── klmn.js └── index.js ├── lib ├── navbar.js ├── klmn.js ├── bulma.js └── index.js ├── LICENSE ├── blog.html ├── atom.xml ├── README.md ├── backers.html ├── templates.html ├── vendor └── lazyload-2.0.0-beta.2.min.js └── love.html /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015-ie"] 3 | } 4 | -------------------------------------------------------------------------------- /images/jgthms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/jgthms.png -------------------------------------------------------------------------------- /_includes/bp/fullhd.html: -------------------------------------------------------------------------------- 1 | >= {{ site.data.breakpoints.fullhd.from }}px 2 | -------------------------------------------------------------------------------- /_includes/bp/touch.html: -------------------------------------------------------------------------------- 1 | < {{ site.data.breakpoints.desktop.from }}px 2 | -------------------------------------------------------------------------------- /favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/favicons/favicon.ico -------------------------------------------------------------------------------- /images/patreon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/patreon.png -------------------------------------------------------------------------------- /_includes/bp/desktop.html: -------------------------------------------------------------------------------- 1 | >= {{ site.data.breakpoints.desktop.from }}px 2 | -------------------------------------------------------------------------------- /images/blog/dropup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/dropup.png -------------------------------------------------------------------------------- /images/bulma-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/bulma-icon.png -------------------------------------------------------------------------------- /images/bulma-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/bulma-logo.png -------------------------------------------------------------------------------- /images/bulma-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/bulma-start.png -------------------------------------------------------------------------------- /images/bulma-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/bulma-type.png -------------------------------------------------------------------------------- /_includes/bp/widescreen.html: -------------------------------------------------------------------------------- 1 | >= {{ site.data.breakpoints.widescreen.from }}px 2 | -------------------------------------------------------------------------------- /images/bulma-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/bulma-banner.png -------------------------------------------------------------------------------- /images/paypal-donate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/paypal-donate.png -------------------------------------------------------------------------------- /images/sponsors/nazar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/sponsors/nazar.png -------------------------------------------------------------------------------- /favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /images/bulma-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/bulma-logo-white.png -------------------------------------------------------------------------------- /images/bulma-type-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/bulma-type-white.png -------------------------------------------------------------------------------- /images/customize-after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/customize-after.png -------------------------------------------------------------------------------- /images/customize-before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/customize-before.png -------------------------------------------------------------------------------- /images/expo/md5-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/md5-672x420.jpg -------------------------------------------------------------------------------- /images/expo/zea-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/zea-672x420.jpg -------------------------------------------------------------------------------- /images/made-with-bulma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/made-with-bulma.png -------------------------------------------------------------------------------- /images/sponsors/9brainz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/sponsors/9brainz.png -------------------------------------------------------------------------------- /images/sponsors/bestcss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/sponsors/bestcss.png -------------------------------------------------------------------------------- /favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /images/blog/fixed-navbar.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/fixed-navbar.mp4 -------------------------------------------------------------------------------- /images/blog/list-of-tags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/list-of-tags.png -------------------------------------------------------------------------------- /images/css-reference-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/css-reference-logo.png -------------------------------------------------------------------------------- /images/expo/buefy-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/buefy-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/buefy-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/buefy-672x420.jpg -------------------------------------------------------------------------------- /images/expo/elevo-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/elevo-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/elevo-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/elevo-672x420.jpg -------------------------------------------------------------------------------- /images/expo/md5-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/md5-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/miso-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/miso-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/miso-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/miso-672x420.jpg -------------------------------------------------------------------------------- /images/expo/oneday-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/oneday-672x420.jpg -------------------------------------------------------------------------------- /images/expo/penmob-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/penmob-672x420.jpg -------------------------------------------------------------------------------- /images/expo/zea-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/zea-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/zea-2688x1680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/zea-2688x1680.jpg -------------------------------------------------------------------------------- /images/html-reference-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/html-reference-logo.png -------------------------------------------------------------------------------- /images/placeholders/16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/16x16.png -------------------------------------------------------------------------------- /images/placeholders/24x24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/24x24.png -------------------------------------------------------------------------------- /images/placeholders/32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/32x32.png -------------------------------------------------------------------------------- /images/placeholders/48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/48x48.png -------------------------------------------------------------------------------- /images/placeholders/64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/64x64.png -------------------------------------------------------------------------------- /images/placeholders/96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/96x96.png -------------------------------------------------------------------------------- /images/placeholders/empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/empty.png -------------------------------------------------------------------------------- /images/sponsors/themeisle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/sponsors/themeisle.png -------------------------------------------------------------------------------- /images/blog/list-of-buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/list-of-buttons.png -------------------------------------------------------------------------------- /images/blog/patreon-homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/patreon-homepage.png -------------------------------------------------------------------------------- /images/expo/bulma-expo-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/bulma-expo-share.png -------------------------------------------------------------------------------- /images/expo/favicon-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/favicon-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/favicon-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/favicon-672x420.jpg -------------------------------------------------------------------------------- /images/expo/gustav-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/gustav-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/gustav-2688x1680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/gustav-2688x1680.jpg -------------------------------------------------------------------------------- /images/expo/jubiwee-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/jubiwee-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/jubiwee-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/jubiwee-672x420.jpg -------------------------------------------------------------------------------- /images/expo/kappamon-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/kappamon-672x420.jpg -------------------------------------------------------------------------------- /images/expo/oneday-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/oneday-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/oneday-2688x1680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/oneday-2688x1680.jpg -------------------------------------------------------------------------------- /images/expo/penmob-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/penmob-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/pollygot-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/pollygot-672x420.jpg -------------------------------------------------------------------------------- /images/expo/reportz-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/reportz-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/reportz-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/reportz-672x420.jpg -------------------------------------------------------------------------------- /images/expo/uploadme-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/uploadme-672x420.jpg -------------------------------------------------------------------------------- /images/fortyfour-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/fortyfour-background.jpg -------------------------------------------------------------------------------- /images/made-with-bulma--dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/made-with-bulma--dark.png -------------------------------------------------------------------------------- /images/placeholders/1280x960.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/1280x960.png -------------------------------------------------------------------------------- /images/placeholders/128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/128x128.png -------------------------------------------------------------------------------- /images/placeholders/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/256x256.png -------------------------------------------------------------------------------- /images/placeholders/300x225.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/300x225.png -------------------------------------------------------------------------------- /images/placeholders/480x320.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/480x320.png -------------------------------------------------------------------------------- /images/placeholders/480x480.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/480x480.png -------------------------------------------------------------------------------- /images/placeholders/640x320.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/640x320.png -------------------------------------------------------------------------------- /images/placeholders/640x360.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/640x360.png -------------------------------------------------------------------------------- /images/placeholders/640x480.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/640x480.png -------------------------------------------------------------------------------- /images/placeholders/672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/placeholders/672x420.jpg -------------------------------------------------------------------------------- /favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /favicons/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/favicons/android-chrome-384x384.png -------------------------------------------------------------------------------- /images/become_a_patron_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/become_a_patron_button.png -------------------------------------------------------------------------------- /images/blog/share/fixed-navbar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/fixed-navbar.jpg -------------------------------------------------------------------------------- /images/blog/share/list-of-tags.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/list-of-tags.jpg -------------------------------------------------------------------------------- /images/expo/alt-three-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/alt-three-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/alt-three-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/alt-three-672x420.jpg -------------------------------------------------------------------------------- /images/expo/anyshortcut-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/anyshortcut-672x420.jpg -------------------------------------------------------------------------------- /images/expo/booknshelf-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/booknshelf-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/booknshelf-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/booknshelf-672x420.jpg -------------------------------------------------------------------------------- /images/expo/driftrock-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/driftrock-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/driftrock-2688x1680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/driftrock-2688x1680.jpg -------------------------------------------------------------------------------- /images/expo/driftrock-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/driftrock-672x420.jpg -------------------------------------------------------------------------------- /images/expo/hellogustav-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/hellogustav-672x420.jpg -------------------------------------------------------------------------------- /images/expo/kappamon-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/kappamon-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/lottiefiles-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/lottiefiles-672x420.jpg -------------------------------------------------------------------------------- /images/expo/pollygot-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/pollygot-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/pragonauts-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/pragonauts-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/pragonauts-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/pragonauts-672x420.jpg -------------------------------------------------------------------------------- /images/expo/uploadme-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/uploadme-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/uploadme-2688x1680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/uploadme-2688x1680.jpg -------------------------------------------------------------------------------- /images/expo/ysimplicity-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/ysimplicity-672x420.jpg -------------------------------------------------------------------------------- /images/extensions/bulma-badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-badge.png -------------------------------------------------------------------------------- /images/extensions/bulma-divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-divider.png -------------------------------------------------------------------------------- /images/extensions/bulma-ribbon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-ribbon.png -------------------------------------------------------------------------------- /images/extensions/bulma-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-slider.png -------------------------------------------------------------------------------- /images/extensions/bulma-steps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-steps.png -------------------------------------------------------------------------------- /images/extensions/bulma-switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-switch.png -------------------------------------------------------------------------------- /images/extensions/bulma-tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-tooltip.png -------------------------------------------------------------------------------- /images/index/vimeo-placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/index/vimeo-placeholder.jpg -------------------------------------------------------------------------------- /images/made-with-bulma--black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/made-with-bulma--black.png -------------------------------------------------------------------------------- /images/made-with-bulma--white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/made-with-bulma--white.png -------------------------------------------------------------------------------- /images/made-with-bulma-badges.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/made-with-bulma-badges.zip -------------------------------------------------------------------------------- /_includes/color/black-bis.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 7%) 3 | -------------------------------------------------------------------------------- /_includes/color/black.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 4%) 3 | -------------------------------------------------------------------------------- /_includes/color/grey.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 48%) 3 | -------------------------------------------------------------------------------- /_includes/color/white.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 100%) 3 | -------------------------------------------------------------------------------- /images/become_a_patron_button@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/become_a_patron_button@2x.png -------------------------------------------------------------------------------- /images/become_a_patron_button@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/become_a_patron_button@3x.png -------------------------------------------------------------------------------- /images/blog/share/list-of-buttons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/list-of-buttons.jpg -------------------------------------------------------------------------------- /images/expo/anyshortcut-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/anyshortcut-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/lottiefiles-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/lottiefiles-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/mynameismirko-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/mynameismirko-672x420.jpg -------------------------------------------------------------------------------- /images/expo/vybranthotels-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/vybranthotels-672x420.jpg -------------------------------------------------------------------------------- /images/expo/ysimplicity-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/ysimplicity-1344x840.jpg -------------------------------------------------------------------------------- /images/extensions/bulma-accordion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-accordion.png -------------------------------------------------------------------------------- /images/extensions/bulma-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-calendar.png -------------------------------------------------------------------------------- /images/extensions/bulma-carousel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-carousel.png -------------------------------------------------------------------------------- /images/extensions/bulma-megamenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-megamenu.png -------------------------------------------------------------------------------- /images/extensions/bulma-quickview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-quickview.png -------------------------------------------------------------------------------- /images/extensions/bulma-tagsinput.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-tagsinput.png -------------------------------------------------------------------------------- /images/extensions/bulma-timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-timeline.png -------------------------------------------------------------------------------- /images/extensions/bulma.io-axure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma.io-axure.png -------------------------------------------------------------------------------- /images/made-with-bulma--semiblack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/made-with-bulma--semiblack.png -------------------------------------------------------------------------------- /images/made-with-bulma--semiwhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/made-with-bulma--semiwhite.png -------------------------------------------------------------------------------- /images/various/tom-levold-260373.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/various/tom-levold-260373.jpg -------------------------------------------------------------------------------- /_includes/color/black-ter.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 14%) 3 | -------------------------------------------------------------------------------- /_includes/color/blue.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(217, 71%, 53%) 3 | -------------------------------------------------------------------------------- /_includes/color/cyan.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(204, 86%, 53%) 3 | -------------------------------------------------------------------------------- /_includes/color/grey-dark.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 29%) 3 | -------------------------------------------------------------------------------- /_includes/color/grey-darker.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 21%) 3 | -------------------------------------------------------------------------------- /_includes/color/grey-light.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 71%) 3 | -------------------------------------------------------------------------------- /_includes/color/grey-lighter.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 86%) 3 | -------------------------------------------------------------------------------- /_includes/color/red.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(348, 100%, 61%) 3 | -------------------------------------------------------------------------------- /_includes/color/white-bis.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 98%) 3 | -------------------------------------------------------------------------------- /_includes/color/white-ter.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(0, 0%, 96%) 3 | -------------------------------------------------------------------------------- /images/blog/metro-ui-css-grid-tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/metro-ui-css-grid-tiles.png -------------------------------------------------------------------------------- /images/blog/share/new-field-element.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/new-field-element.jpg -------------------------------------------------------------------------------- /images/expo/bashful-birdie-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/bashful-birdie-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/bashful-birdie-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/bashful-birdie-672x420.jpg -------------------------------------------------------------------------------- /images/expo/bongoutindonesia-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/bongoutindonesia-672x420.jpg -------------------------------------------------------------------------------- /images/expo/bugcraft-studio-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/bugcraft-studio-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/bugcraft-studio-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/bugcraft-studio-672x420.jpg -------------------------------------------------------------------------------- /images/expo/mynameismirko-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/mynameismirko-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/mynameismirko-2688x1680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/mynameismirko-2688x1680.jpg -------------------------------------------------------------------------------- /images/expo/smileonthetiles-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/smileonthetiles-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/smileonthetiles-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/smileonthetiles-672x420.jpg -------------------------------------------------------------------------------- /images/expo/vybranthotels-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/vybranthotels-1344x840.jpg -------------------------------------------------------------------------------- /images/extensions/bulma-checkradio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-checkradio.png -------------------------------------------------------------------------------- /images/extensions/bulma-coolcheckbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-coolcheckbox.png -------------------------------------------------------------------------------- /images/extensions/bulma-iconpicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-iconpicker.png -------------------------------------------------------------------------------- /images/extensions/bulma-pageloader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-pageloader.png -------------------------------------------------------------------------------- /images/extensions/bulma-pricingtable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-pricingtable.png -------------------------------------------------------------------------------- /images/index/vimeo-placeholder-bis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/index/vimeo-placeholder-bis.jpg -------------------------------------------------------------------------------- /images/various/dmitri-popov-265077.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/various/dmitri-popov-265077.jpg -------------------------------------------------------------------------------- /images/various/rodion-kutsaev-24833.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/various/rodion-kutsaev-24833.jpg -------------------------------------------------------------------------------- /_includes/color/green.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(141, 71%, 48%) 3 | -------------------------------------------------------------------------------- /_includes/color/orange.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(14, 100%, 53%) 3 | -------------------------------------------------------------------------------- /_includes/color/purple.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(271, 100%, 71%) 3 | -------------------------------------------------------------------------------- /_includes/color/turquoise.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(171, 100%, 41%) 3 | -------------------------------------------------------------------------------- /_includes/color/yellow.html: -------------------------------------------------------------------------------- 1 | 2 | hsl(48, 100%, 67%) 3 | -------------------------------------------------------------------------------- /images/blog/share/bulma-is-on-patreon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/bulma-is-on-patreon.jpg -------------------------------------------------------------------------------- /images/expo/apache-bookkeeper-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/apache-bookkeeper-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/apache-bookkeeper-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/apache-bookkeeper-672x420.jpg -------------------------------------------------------------------------------- /images/expo/bongoutindonesia-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/bongoutindonesia-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/brújula-turística-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/brújula-turística-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/brújula-turística-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/brújula-turística-672x420.jpg -------------------------------------------------------------------------------- /images/various/sven-scheuermeier-34477.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/various/sven-scheuermeier-34477.jpg -------------------------------------------------------------------------------- /images/expo/sketch-for-designrs-1344x840.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/sketch-for-designrs-1344x840.jpg -------------------------------------------------------------------------------- /images/expo/sketch-for-designrs-2688x1680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/sketch-for-designrs-2688x1680.jpg -------------------------------------------------------------------------------- /images/expo/sketch-for-designrs-672x420.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/expo/sketch-for-designrs-672x420.jpg -------------------------------------------------------------------------------- /images/extensions/bulma-steps-alternative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/extensions/bulma-steps-alternative.png -------------------------------------------------------------------------------- /_includes/elements/color-square.html: -------------------------------------------------------------------------------- 1 | 2 | {{ include.value }} 3 | -------------------------------------------------------------------------------- /images/blog/share/bulma-bootstrap-comparison.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/bulma-bootstrap-comparison.jpg -------------------------------------------------------------------------------- /images/blog/share/roses-are-red-links-are-blue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/roses-are-red-links-are-blue.jpg -------------------------------------------------------------------------------- /images/blog/share/access-previous-bulma-versions.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/access-previous-bulma-versions.jpg -------------------------------------------------------------------------------- /images/blog/share/bulma-supports-font-awesome-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/bulma-supports-font-awesome-5.jpg -------------------------------------------------------------------------------- /_includes/elements/new-tag.html: -------------------------------------------------------------------------------- 1 |
2 | New! 3 | {{ include.version }} 4 |
-------------------------------------------------------------------------------- /images/blog/share/metro-ui-css-grid-with-bulma-tiles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/metro-ui-css-grid-with-bulma-tiles.jpg -------------------------------------------------------------------------------- /images/blog/share/blog-launched-new-responsive-columns-new-helpers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lqzhgood/bulma-docs-cn/HEAD/images/blog/share/blog-launched-new-responsive-columns-new-helpers.jpg -------------------------------------------------------------------------------- /documentation/components/level.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: documentation 3 | doc-tab: components 4 | doc-subtab: level 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /documentation/elements/form.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Form 3 | layout: documentation 4 | doc-tab: elements 5 | doc-subtab: form 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /documentation/components/media-object.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: documentation 3 | doc-tab: components 4 | doc-subtab: media-object 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /_includes/anchor.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

4 | {{ include.name }} 5 | 6 | # 7 | 8 |

9 | -------------------------------------------------------------------------------- /_includes/elements/patreon-item.html: -------------------------------------------------------------------------------- 1 |
  • 2 | {{ backer.FirstName }} {{ backer.LastName }} 3 | {% if backer.Twitter != "" %} 4 | 5 | @{{ backer.Twitter }} 6 | 7 | {% endif %} 8 |
    • 9 | -------------------------------------------------------------------------------- /_includes/sponsor.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Sponsor

    3 |
    4 | 5 | themeisle logo 6 | 7 |
    8 |
    9 | -------------------------------------------------------------------------------- /favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #00d1b2 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /_includes/patreon.html: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | Support Bulma on Patreon 4 |

    5 | 6 | Become a patron 7 | 8 |
    9 | -------------------------------------------------------------------------------- /_includes/deprecated.html: -------------------------------------------------------------------------------- 1 | {% if site.deprecated %} 2 |
    3 |

    4 | You are viewing the deprecated {{site.version}} version of the website. 5 | Click here to view the latest version 6 |

    7 |
    8 | {% endif %} 9 | -------------------------------------------------------------------------------- /_includes/svg/bulma-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | # run jekyll with docker container 2 | # 3 | # install docker && docker-compose 4 | # https://docs.docker.com/compose/install/ 5 | # then run docker-compose up 6 | 7 | jekyll: 8 | image: jekyll/jekyll:pages 9 | command: jekyll serve --watch --incremental 10 | ports: 11 | - 4000:4000 12 | volumes: 13 | - .:/srv/jekyll 14 | -------------------------------------------------------------------------------- /_sass/override.sass: -------------------------------------------------------------------------------- 1 | .content 2 | .bd-spaced 3 | li + li 4 | margin-top: 1em 5 | .highlighter-rouge 6 | &:not(:last-child) 7 | margin-bottom: 1.5rem 8 | 9 | body.page-grid .column > .notification 10 | padding-left: 0 11 | padding-right: 0 12 | text-align: center 13 | 14 | +tablet 15 | .header-item .button + .button 16 | margin-left: 0.75rem 17 | -------------------------------------------------------------------------------- /_sass/callout.sass: -------------------------------------------------------------------------------- 1 | .bd-callout 2 | +block 3 | background-color: $background 4 | border-radius: $radius 5 | padding: 1.25rem 2.5rem 1.25rem 1.5rem 6 | position: relative 7 | // Colors 8 | @each $name, $pair in $colors 9 | $color: nth($pair, 1) 10 | $color-invert: nth($pair, 2) 11 | &.is-#{$name} 12 | background-color: $color 13 | color: $color-invert 14 | -------------------------------------------------------------------------------- /_includes/svg/bulma-b.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "icons": [ 4 | { 5 | "src": "\/favicons\/android-chrome-192x192.png?v=201701041855", 6 | "sizes": "192x192", 7 | "type": "image\/png" 8 | }, 9 | { 10 | "src": "\/favicons\/android-chrome-384x384.png?v=201701041855", 11 | "sizes": "384x384", 12 | "type": "image\/png" 13 | } 14 | ], 15 | "theme_color": "#00d1b2", 16 | "display": "standalone" 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Files 2 | 3 | .DS_Store 4 | .jekyll-metadata 5 | _config.local.yml 6 | _config.version.yml 7 | bulma-test.sass 8 | bulma-test.scss 9 | bulma-test.css 10 | bulma-website-local.sass 11 | css/bulma-test.css 12 | css/bulma-docs.css.map 13 | PUBLISHING.md 14 | npm-debug.log 15 | test.sass 16 | test.scss 17 | 18 | # Folders 19 | 20 | .sass-cache 21 | /bulma 22 | /icons 23 | /styles/node_modules 24 | /versions 25 | _site 26 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {% include deprecated.html %} 6 | {{ content }} 7 | {% include footer.html %} 8 | 9 | 10 | -------------------------------------------------------------------------------- /_data/variables/grid/columns.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "grid", 3 | "file_name": "columns", 4 | "file_relative_path": "grid/columns.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 1, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/grid/columns.sass#L1,L1", 8 | "vars": { 9 | "column-gap": { 10 | "id": "column-gap", 11 | "name": "$column-gap", 12 | "value": "0.75rem" 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /_data/variables/elements/image.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "image", 4 | "file_relative_path": "elements/image.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 1, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/image.sass#L1,L1", 8 | "vars": { 9 | "dimensions": { 10 | "id": "dimensions", 11 | "name": "$dimensions", 12 | "value": "16 24 32 48 64 96 128" 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /_includes/elements/tw-button.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | {{ include.label }} 12 | 13 | 14 | -------------------------------------------------------------------------------- /_data/icons.json: -------------------------------------------------------------------------------- 1 | { 2 | "fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", 3 | "fontawesome5": "https://use.fontawesome.com/releases/v5.0.6/js/all.js", 4 | "iconic": "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css", 5 | "ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css", 6 | "mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" 7 | } 8 | -------------------------------------------------------------------------------- /_includes/fortyfour.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |

    4 | New! My 44-page ebook "CSS in 44 minutes" is out! 😃 5 |

    6 | 7 | Get it now → 8 | 9 |     10 | -------------------------------------------------------------------------------- /_data/variables/layout/footer.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "layout", 3 | "file_name": "footer", 4 | "file_relative_path": "layout/footer.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 1, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/footer.sass#L1,L1", 8 | "vars": { 9 | "footer-background-color": { 10 | "id": "footer-background-color", 11 | "name": "$footer-background-color", 12 | "value": "$background" 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /_includes/subnav-grid.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /_includes/pro.html: -------------------------------------------------------------------------------- 1 |
    2 | 7 |
    8 |

    9 | {{ include.title }} 10 |

    11 |
    12 | {{ include.content | markdownify }} 13 |
    14 |
    15 |
    16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bulma-docs", 3 | "version": "1.0.0", 4 | "main": "index.html", 5 | "author": "Jeremy Thomas (https://jgthms.com)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "babel-cli": "^6.24.1", 9 | "babel-preset-env": "^1.5.2", 10 | "babel-preset-es2015-ie": "^6.7.0", 11 | "i": "^0.3.5", 12 | "npm": "^6.13.4" 13 | }, 14 | "scripts": { 15 | "build": "babel _javascript --out-dir lib", 16 | "watch": "npm run build -- --watch" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /_posts/2017-07-24-access-previous-bulma-versions.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Access previous Bulma versions" 4 | introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)" 5 | color: "primary" 6 | name: "Versions" 7 | icon: "undo" 8 | --- 9 | 10 | It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/) 11 | 12 | While only version [0.4.4](http://versions.bulma.io/0.4.4/) is accessible now, each **new release** will remain available forever. 13 | -------------------------------------------------------------------------------- /_data/breakpoints.json: -------------------------------------------------------------------------------- 1 | { 2 | "mobile": { 3 | "id": "mobile", 4 | "name": "Mobile", 5 | "from": 0, 6 | "to": 768 7 | }, 8 | "tablet": { 9 | "id": "tablet", 10 | "name": "Tablet", 11 | "from": 769, 12 | "to": 1023 13 | }, 14 | "desktop": { 15 | "id": "desktop", 16 | "name": "Desktop", 17 | "from": 1024, 18 | "to": 1215 19 | }, 20 | "widescreen": { 21 | "id": "widescreen", 22 | "name": "Widescreen", 23 | "from": 1216, 24 | "to": 1407 25 | }, 26 | "fullhd": { 27 | "id": "fullhd", 28 | "name": "FullHD", 29 | "from": 1408 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/sponsors.sass: -------------------------------------------------------------------------------- 1 | .bd-sponsors 2 | align-items: center 3 | display: flex 4 | a 5 | align-items: center 6 | display: flex 7 | justify-content: center 8 | margin-right: 3rem 9 | width: 150px 10 | 11 | .bd-sponsor 12 | margin-left: auto 13 | margin-right: auto 14 | text-align: center 15 | 16 | .bd-sponsor-title 17 | font-size: $size-small 18 | margin-bottom: 1em 19 | opacity: 0.5 20 | 21 | .bd-sponsor-list 22 | align-items: center 23 | display: flex 24 | justify-content: center 25 | a 26 | align-items: center 27 | display: flex 28 | justify-content: center 29 | width: 200px 30 | -------------------------------------------------------------------------------- /_posts/2017-11-14-bulma-is-on-patreon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Bulma is on Patreon!" 3 | layout: post 4 | introduction: "Support Bulma's future" 5 | color: "primary" 6 | name: "Bulma on Patreon" 7 | icon: "patreon" 8 | icon_brand: true 9 | --- 10 | 11 | **Bulma** has now its own [Patreon page](https://www.patreon.com/jgthms): 12 | 13 |
    14 | 15 | Bulma Patreon homepage 16 | 17 |
    18 | 19 | This will allow people to easily support Bulma, and ensure its future development. 20 | -------------------------------------------------------------------------------- /_data/variables/elements/progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "progress", 4 | "file_relative_path": "elements/progress.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 2, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/progress.sass#L1,L2", 8 | "vars": { 9 | "progress-bar-background-color": { 10 | "id": "progress-bar-background-color", 11 | "name": "$progress-bar-background-color", 12 | "value": "$border" 13 | }, 14 | "progress-value-background-color": { 15 | "id": "progress-value-background-color", 16 | "name": "$progress-value-background-color", 17 | "value": "$text" 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /_includes/getting-started.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello Bulma! 7 | 8 | 9 | 10 | 11 |
    12 |
    13 |

    14 | Hello World 15 |

    16 |

    17 | My first website with Bulma! 18 |

    19 |
    20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /bulma-docs.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | $bootstrap: #6f5499 4 | $github: #333333 5 | $twitter: #55acee 6 | $patreon: #f96854 7 | $patreon-blue: #052d49 8 | $fortyfour: #5f45bb 9 | 10 | @import "../bulma" 11 | @import "./_sass/highlight" 12 | @import "./_sass/override" 13 | @import "./_sass/global" 14 | @import "./_sass/index" 15 | @import "./_sass/header" 16 | @import "./_sass/footer" 17 | @import "./_sass/specific" 18 | @import "./_sass/example" 19 | @import "./_sass/callout" 20 | @import "./_sass/bsa" 21 | @import "./_sass/route" 22 | @import "./_sass/twitter" 23 | @import "./_sass/expo" 24 | @import "./_sass/love" 25 | @import "./_sass/bootstrap" 26 | @import "./_sass/klmn" 27 | @import "./_sass/patreon" 28 | @import "./_sass/sponsors" 29 | -------------------------------------------------------------------------------- /_sass/route.sass: -------------------------------------------------------------------------------- 1 | html.route-index 2 | .title.is-2 3 | position: relative 4 | .title.is-2 a 5 | color: $text-strong 6 | position: relative 7 | .title.is-2 a:hover 8 | color: $blue 9 | .title.is-2 .icon.is-medium 10 | font-size: 56px 11 | left: -80px 12 | opacity: 0.1 13 | position: absolute 14 | top: 10px 15 | .hero .title.is-2 a 16 | color: $white 17 | .hero .title.is-2 a:hover 18 | color: $white 19 | .hero.is-primary a.column, 20 | .hero.is-primary a.column:hover 21 | color: $white 22 | .hero.is-primary a.column:hover .title strong 23 | border-bottom: 1px solid 24 | @media screen and (max-width: 979px) 25 | .title.is-2 a 26 | padding-left: 0 27 | .title.is-2 .icon.is-medium 28 | display: none 29 | -------------------------------------------------------------------------------- /_data/variables/layout/section.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "layout", 3 | "file_name": "section", 4 | "file_relative_path": "layout/section.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 3, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/section.sass#L1,L3", 8 | "vars": { 9 | "section-padding": { 10 | "id": "section-padding", 11 | "name": "$section-padding", 12 | "value": "3rem 1.5rem" 13 | }, 14 | "section-padding-medium": { 15 | "id": "section-padding-medium", 16 | "name": "$section-padding-medium", 17 | "value": "9rem 1.5rem" 18 | }, 19 | "section-padding-large": { 20 | "id": "section-padding-large", 21 | "name": "$section-padding-large", 22 | "value": "18rem 1.5rem" 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /_sass/klmn.sass: -------------------------------------------------------------------------------- 1 | .bd-klmn 2 | margin-bottom: 1.5rem 3 | 4 | .bd-klmn-gaps 5 | align-items: center 6 | display: flex 7 | flex-wrap: wrap 8 | justify-content: flex-start 9 | margin-bottom: 1.25rem 10 | 11 | .bd-klmn-label 12 | margin: 0.25rem auto 0.25rem 0 13 | 14 | .bd-klmn-gap 15 | background-color: $background 16 | border-radius: $radius 17 | color: $red 18 | font-family: $family-monospace 19 | font-size: 0.75rem 20 | margin: 0.25rem 0 0.25rem 0.5rem 21 | padding: 0.375em 0.75em 22 | text-align: center 23 | vertical-align: middle !important 24 | white-space: nowrap 25 | &.bd-is-selected 26 | background-color: $green 27 | color: $white 28 | 29 | .bd-klmn-columns:last-child 30 | .bd-notification 31 | font-size: 0.75rem 32 | white-space: nowrap 33 | -------------------------------------------------------------------------------- /_includes/sponsors.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 |
    6 |

    Bulma Sponsors

    7 |
    8 | 9 |
    10 |
    11 | 12 | 9brainz logo 13 | 14 | 15 | nazar logo 16 | 17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 | -------------------------------------------------------------------------------- /_posts/2017-10-22-list-of-buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "New feature: list of buttons" 4 | introduction: "What's better than one button? Multiple buttons!" 5 | color: "danger" 6 | name: "List of buttons" 7 | icon: "hand-pointer" 8 | --- 9 | 10 | Similarly to the [list of tags](/2017/08/03/list-of-tags/) launched a few months ago, the [button](/documentation/elements/button/) has its own **list of buttons**: 11 | 12 |
    13 | 14 | List of buttons in CSS 15 | 16 |
    17 | 18 | Although you could already **group** buttons by using [from groups](/documentation/form/general/#form-group), this new `buttons` class makes everything easier. 19 | -------------------------------------------------------------------------------- /_includes/bsa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    4 |
    5 |
    6 |
    7 |

    Bulma Partners

    8 |

    Check out their products!

    9 |
    10 | 11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 | 18 | 29 | -------------------------------------------------------------------------------- /_data/variables/elements/notification.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "notification", 4 | "file_relative_path": "elements/notification.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 3, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/notification.sass#L1,L3", 8 | "vars": { 9 | "notification-background-color": { 10 | "id": "notification-background-color", 11 | "name": "$notification-background-color", 12 | "value": "$background" 13 | }, 14 | "notification-radius": { 15 | "id": "notification-radius", 16 | "name": "$notification-radius", 17 | "value": "$radius" 18 | }, 19 | "notification-padding": { 20 | "id": "notification-padding", 21 | "name": "$notification-padding", 22 | "value": "1.25rem 2.5rem 1.25rem 1.5rem" 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /_data/variables/elements/tag.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "tag", 4 | "file_relative_path": "elements/tag.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 4, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/tag.sass#L1,L4", 8 | "vars": { 9 | "tag-background-color": { 10 | "id": "tag-background-color", 11 | "name": "$tag-background-color", 12 | "value": "$background" 13 | }, 14 | "tag-color": { 15 | "id": "tag-color", 16 | "name": "$tag-color", 17 | "value": "$text" 18 | }, 19 | "tag-radius": { 20 | "id": "tag-radius", 21 | "name": "$tag-radius", 22 | "value": "$radius" 23 | }, 24 | "tag-delete-margin": { 25 | "id": "tag-delete-margin", 26 | "name": "$tag-delete-margin", 27 | "value": "1px" 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Metro UI CSS grid with Bulma tiles" 4 | introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?
    Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element." 5 | color: "info" 6 | name: "Metro UI" 7 | icon: "th-large" 8 | --- 9 | 10 | Have you ever wanted to build a **Metro-UI-like grid in CSS**? 11 | Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element. 12 | 13 | [![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](https://bulma.io/documentation/layout/tiles/) 14 | 15 | Check out the [documentation](https://bulma.io/documentation/layout/tiles/)! 16 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Meta 2 | 3 | title: "Bulma: a modern CSS framework based on Flexbox" 4 | 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." 5 | env: "production" 6 | 7 | # Build 8 | 9 | markdown: kramdown 10 | permalink: pretty 11 | url: https://lqzhgood.github.io/bulma-docs-cn 12 | exclude: ['icons', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock'] 13 | 14 | # Variables 15 | 16 | documentation: "https://lqzhgood.github.io/bulma-docs-cn/documentation/overview/start/" 17 | download: https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip 18 | github: https://github.com/jgthms/bulma 19 | twitter: https://twitter.com/jgthms 20 | version: 0.6.2 21 | -------------------------------------------------------------------------------- /_sass/header.sass: -------------------------------------------------------------------------------- 1 | #github 2 | color: $github 3 | border-color: $github 4 | &:hover 5 | background: $github 6 | border-color: $github 7 | color: $white 8 | 9 | .bd-tw-button 10 | background-color: $twitter 11 | color: $white 12 | border-color: transparent !important 13 | &:hover 14 | background-color: darken($twitter, 2.5%) 15 | color: $white 16 | &:active, 17 | &:focus 18 | background-color: darken($twitter, 5%) 19 | color: $white 20 | 21 | #moreDropdownBootstrap 22 | .icon 23 | color: $bootstrap 24 | 25 | #moreDropdownPatreon 26 | .icon 27 | color: $patreon 28 | 29 | +desktop 30 | #blogDropdown 31 | width: 17rem 32 | .navbar-item 33 | white-space: normal 34 | #moreDropdown 35 | width: 18rem 36 | .navbar-item 37 | padding-right: 1rem 38 | white-space: normal 39 | .level 40 | flex-grow: 1 41 | -------------------------------------------------------------------------------- /_includes/blog-hero.html: -------------------------------------------------------------------------------- 1 | {% include navbar.html id="BlogHero" %} 2 | 3 |
    4 |
    5 |
    6 |
    7 |
    8 |

    9 | Blog 10 |

    11 |

    12 | Stay updated about new features, bug fixes, and releases 13 |

    14 | 15 | 16 | 17 | 18 | Subscribe 19 | 20 |
    21 |
    22 | {% include carbon.html %} 23 |
    24 |
    25 |
    26 |
    27 |
    28 | -------------------------------------------------------------------------------- /_data/variables/elements/icon.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "icon", 4 | "file_relative_path": "elements/icon.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 4, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/icon.sass#L1,L4", 8 | "vars": { 9 | "icon-dimensions": { 10 | "id": "icon-dimensions", 11 | "name": "$icon-dimensions", 12 | "value": "1.5rem" 13 | }, 14 | "icon-dimensions-small": { 15 | "id": "icon-dimensions-small", 16 | "name": "$icon-dimensions-small", 17 | "value": "1rem" 18 | }, 19 | "icon-dimensions-medium": { 20 | "id": "icon-dimensions-medium", 21 | "name": "$icon-dimensions-medium", 22 | "value": "2rem" 23 | }, 24 | "icon-dimensions-large": { 25 | "id": "icon-dimensions-large", 26 | "name": "$icon-dimensions-large", 27 | "value": "3rem" 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /_posts/2017-11-01-fixed-navbar.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "New feature: fixed navbar" 4 | introduction: "Fix your navbar at the top or bottom" 5 | color: "success" 6 | name: "Fixed navbar" 7 | icon: "map-pin" 8 | --- 9 | 10 | You can now fix a [navbar](/documentation/components/navbar/#fixed-navbar) to the **top** or the **bottom**: 11 | 12 |
    13 | 16 |
    17 | 18 | [Check it out!](/documentation/components/navbar/#fixed-navbar) 19 | 20 | As a added **bonus**, the bottom navbar required a new **dropup** feature which has also been implemented! 21 | 22 |
    23 | 24 | Navbar dropup 25 | 26 |
    27 | -------------------------------------------------------------------------------- /_posts/2017-08-01-bulma-bootstrap-comparison.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Bulma / Bootstrap comparison" 4 | introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have." 5 | color: "bootstrap" 6 | name: "Bulma over Bootstrap?" 7 | icon: "heart" 8 | --- 9 | 10 | Bulma has always been a Bootstrap fan, inspired by its goal and purpose. 11 | 12 | Some users ask why they should use Bulma over Bootstrap, and there is **no definite answer**, because while both CSS frameworks share _similarities_, they also **differ** in many ways. 13 | 14 | The new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) draws a **feature comparison** to help undecided users choose the right tool for their web design needs, which can be either Bulma or Bootstrap. 15 | -------------------------------------------------------------------------------- /thank-you.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Thank you 3 | layout: default 4 | route: index 5 | --- 6 | 7 | {% include navbar.html id="ThankYou" fixed=true has_container=true boxed=true transparent=true %} 8 | 9 |
    10 |
    11 |
    12 |
    13 |
    14 |

    15 | 📫 😃 16 |
    17 | Thanks for subscribing! 18 |

    19 |
    20 |

    21 | You'll occasionally receive news about new features, documentation updates, and beautiful websites made with Bulma! 22 |

    23 |

    24 | Go back 25 |

    26 |
    27 |
    28 |
    29 |
    30 |
    31 |
    32 | -------------------------------------------------------------------------------- /_posts/2017-08-03-list-of-tags.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "New feature: list of tags" 4 | introduction: "What's better than one tag? Multiple tags!" 5 | color: "orange" 6 | name: "List of tags" 7 | icon: "tag" 8 | --- 9 | 10 | The [tag](/documentation/elements/tag/) is a small but useful element that can be used in many contexts, to **enhance** the meaning of the text it's attached to. 11 | 12 | A tag rarely comes on its own though, so Bulma now supports [list of tags](/documentation/elements/tag/#list-of-tags). The same way you can [group controls](together), you can now **group tags together** to form a list that can span multiple lines. 13 | 14 |
    15 | 16 | List of tags in CSS 17 | 18 |
    19 | 20 | As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available! -------------------------------------------------------------------------------- /_data/variables/utilities/controls.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "utilities", 3 | "file_name": "controls", 4 | "file_relative_path": "utilities/controls.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 5, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/controls.sass#L1,L5", 8 | "vars": { 9 | "control-radius": { 10 | "id": "control-radius", 11 | "name": "$control-radius", 12 | "value": "$radius" 13 | }, 14 | "control-radius-small": { 15 | "id": "control-radius-small", 16 | "name": "$control-radius-small", 17 | "value": "$radius-small" 18 | }, 19 | "control-padding-vertical": { 20 | "id": "control-padding-vertical", 21 | "name": "$control-padding-vertical", 22 | "value": "calc(0.375em - 1px)" 23 | }, 24 | "control-padding-horizontal": { 25 | "id": "control-padding-horizontal", 26 | "name": "$control-padding-horizontal", 27 | "value": "calc(0.625em - 1px)" 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /_javascript/navbar.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | 3 | const rootEl = document.documentElement; 4 | const navbarTopEl = document.getElementById('navbar'); 5 | const navbarBottomEl = document.getElementById('navbarBottom'); 6 | const fixBottomEl = document.getElementById('navbarFixBottom'); 7 | const fixBottomElIcon = fixBottomEl.querySelector('.fa'); 8 | let fixedBottom = false; 9 | 10 | fixBottomEl.addEventListener('click', event => { 11 | fixedBottom = !fixedBottom; 12 | 13 | if (fixedBottom) { 14 | fixBottomEl.className = 'button is-success'; 15 | fixBottomElIcon.className = 'far fa-check-square'; 16 | rootEl.classList.add('has-navbar-fixed-bottom'); 17 | navbarBottomEl.classList.remove('is-hidden'); 18 | } else { 19 | fixBottomEl.className = 'button is-link'; 20 | fixBottomElIcon.className = 'far fa-square'; 21 | rootEl.classList.remove('has-navbar-fixed-bottom'); 22 | navbarBottomEl.classList.add('is-hidden'); 23 | } 24 | }); 25 | 26 | }); 27 | -------------------------------------------------------------------------------- /_data/variables/components/breadcrumb.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "components", 3 | "file_name": "breadcrumb", 4 | "file_relative_path": "components/breadcrumb.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 5, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/breadcrumb.sass#L1,L5", 8 | "vars": { 9 | "breadcrumb-item-color": { 10 | "id": "breadcrumb-item-color", 11 | "name": "$breadcrumb-item-color", 12 | "value": "$link" 13 | }, 14 | "breadcrumb-item-hover-color": { 15 | "id": "breadcrumb-item-hover-color", 16 | "name": "$breadcrumb-item-hover-color", 17 | "value": "$link-hover" 18 | }, 19 | "breadcrumb-item-active-color": { 20 | "id": "breadcrumb-item-active-color", 21 | "name": "$breadcrumb-item-active-color", 22 | "value": "$text-strong" 23 | }, 24 | "breadcrumb-item-separator-color": { 25 | "id": "breadcrumb-item-separator-color", 26 | "name": "$breadcrumb-item-separator-color", 27 | "value": "$text" 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /lib/navbar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | document.addEventListener('DOMContentLoaded', function () { 4 | 5 | var rootEl = document.documentElement; 6 | var navbarTopEl = document.getElementById('navbar'); 7 | var navbarBottomEl = document.getElementById('navbarBottom'); 8 | var fixBottomEl = document.getElementById('navbarFixBottom'); 9 | var fixBottomElIcon = fixBottomEl.querySelector('.fa'); 10 | var fixedBottom = false; 11 | 12 | fixBottomEl.addEventListener('click', function (event) { 13 | fixedBottom = !fixedBottom; 14 | 15 | if (fixedBottom) { 16 | fixBottomEl.className = 'button is-success'; 17 | fixBottomElIcon.className = 'far fa-check-square'; 18 | rootEl.classList.add('has-navbar-fixed-bottom'); 19 | navbarBottomEl.classList.remove('is-hidden'); 20 | } else { 21 | fixBottomEl.className = 'button is-link'; 22 | fixBottomElIcon.className = 'far fa-square'; 23 | rootEl.classList.remove('has-navbar-fixed-bottom'); 24 | navbarBottomEl.classList.add('is-hidden'); 25 | } 26 | }); 27 | }); -------------------------------------------------------------------------------- /_includes/subnav-modifiers.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /_includes/snippet.html: -------------------------------------------------------------------------------- 1 | {% if include.plain %} 2 |
    3 |
    4 |
    5 | {{ include.content }} 6 |
    7 |
    8 |
    9 | {% highlight html %}{{ include.content }}{% endhighlight %} 10 |
    11 |
    12 | {% else %} 13 |
    20 |
    21 | {{ include.content }} 22 |
    23 |
    24 | {% highlight html %}{{ include.content }}{% endhighlight %} 25 |
    26 |
    27 | {% endif %} 28 | -------------------------------------------------------------------------------- /documentation/layout/section.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 部分 3 | layout: documentation 4 | doc-tab: layout 5 | doc-subtab: section 6 | --- 7 | 8 | {% include subnav-layout.html %} 9 | 10 |
    11 |
    12 |

    部分

    13 |

    14 | 一个简单的容器，将你的页面分成不同的 部分，就像你正在阅读的部分一样。 15 |

    16 | 17 |
    18 | 19 |
    20 | 使用 .section 作为 body 的直接子元素。 21 |
    22 | 23 | {% highlight html %} 24 | 25 |
    26 |
    27 |

    Section

    28 |

    29 | A simple container to divide your page into sections, like the one you're currently reading 30 |

    31 |
    32 |
    33 | 34 | {% endhighlight %} 35 | 36 |
    37 |

    你可以使用 is-medium 和 is-large 修饰符来修改间距。

    38 |
    39 | 40 | {% include variables.html %} 41 | 42 |
    43 |
    44 | -------------------------------------------------------------------------------- /documentation/layout/footer.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 页脚 3 | layout: documentation 4 | doc-tab: layout 5 | doc-subtab: footer 6 | --- 7 | 8 | {% include subnav-layout.html %} 9 | 10 | {% capture footer_example %} 11 | 22 | {% endcapture %} 23 | 24 |
    25 |
    26 |

    页脚

    27 |

    28 | 一个简单的响应式 页脚，其中可以包含任何内容：lists, headings, columns, icons, buttons 等。 29 |

    30 | 31 | {% include snippet.html content=footer_example horizontal=true more=true %} 32 | 33 | {% include variables.html %} 34 |
    35 |
    36 | -------------------------------------------------------------------------------- /_javascript/klmn.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | 3 | const $klmnColumns = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-columns'), 0); 4 | const $klmnGaps = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-gap'), 0); 5 | const $klmnValue = document.getElementById('klmnValue'); 6 | 7 | $klmnGaps.forEach(el => { 8 | el.addEventListener('mouseenter', () => { 9 | const index = el.dataset.value; 10 | selectGap(index); 11 | }); 12 | }); 13 | 14 | function resetGaps() { 15 | $klmnGaps.forEach(el => { 16 | el.classList.remove('bd-is-selected'); 17 | }); 18 | } 19 | 20 | function setColumns(n) { 21 | $klmnColumns.forEach(el => { 22 | el.className = `columns is-variable bd-klmn-columns is-${n}`; 23 | }); 24 | } 25 | 26 | function setValue(n) { 27 | const rem = `${n * 0.25}rem`; 28 | $klmnValue.innerHTML = rem; 29 | } 30 | 31 | function selectGap(n) { 32 | resetGaps(); 33 | $klmnGaps[n].classList.add('bd-is-selected'); 34 | setColumns(n); 35 | setValue(n); 36 | } 37 | 38 | selectGap(3); 39 | 40 | }); 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Jeremy Thomas 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/klmn.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | document.addEventListener('DOMContentLoaded', function () { 4 | 5 | var $klmnColumns = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-columns'), 0); 6 | var $klmnGaps = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-gap'), 0); 7 | var $klmnValue = document.getElementById('klmnValue'); 8 | 9 | $klmnGaps.forEach(function (el) { 10 | el.addEventListener('mouseenter', function () { 11 | var index = el.dataset.value; 12 | selectGap(index); 13 | }); 14 | }); 15 | 16 | function resetGaps() { 17 | $klmnGaps.forEach(function (el) { 18 | el.classList.remove('bd-is-selected'); 19 | }); 20 | } 21 | 22 | function setColumns(n) { 23 | $klmnColumns.forEach(function (el) { 24 | el.className = 'columns is-variable bd-klmn-columns is-' + n; 25 | }); 26 | } 27 | 28 | function setValue(n) { 29 | var rem = n * 0.25 + 'rem'; 30 | $klmnValue.innerHTML = rem; 31 | } 32 | 33 | function selectGap(n) { 34 | resetGaps(); 35 | $klmnGaps[n].classList.add('bd-is-selected'); 36 | setColumns(n); 37 | setValue(n); 38 | } 39 | 40 | selectGap(3); 41 | }); -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | route: blog 4 | --- 5 | 6 | {% include blog-hero.html %} 7 | 8 |
    9 |
    10 |
    11 | {% for post in site.posts %} 12 | 30 | {% endfor %} 31 |
    32 |
    33 |
    34 | -------------------------------------------------------------------------------- /_posts/2018-01-18-bulma-supports-font-awesome-5.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Bulma supports Font Awesome 5" 3 | layout: post 4 | introduction: "No change required!" 5 | color: "info" 6 | name: "Font Awesome 5" 7 | icon: "font-awesome-alt" 8 | icon_brand: true 9 | --- 10 | 11 | Bulma is **icon library agnostic**: this means that you can use _any_ icon font library (like Font Awesome 4 or 5, Material Design Icons, Open Iconic, Ionicons…) with Bulma's `icon` class. 12 | 13 | As a result, **Bulma already supports Font Awesome 5**! 😃 14 | 15 | Since the `icon` element is simply a **container** for any icon font *allowing the layout to reserve a spot for the icon while it loads), it supports any size of Font Awesome 4 and 5. 16 | 17 | For the sake of being in sync with Bulma users, I've recently updated the website to actually use Font Awesome 5! The process of **migrating** from Font Awesome 4 to 5 is straightforward. You simply need to: 18 | 19 | 1. include Font Awesome 5 instead, [using the script tag](https://fontawesome.com/get-started) 20 | 2. replace `fa` classes with their `fas` and `fab` equivalents 21 | 22 | That's it! 23 | 24 | Check out the [icon documentation](/documentation/elements/icon/). 25 | -------------------------------------------------------------------------------- /_sass/patreon.sass: -------------------------------------------------------------------------------- 1 | .bd-banner 2 | align-items: center 3 | display: flex 4 | justify-content: center 5 | overflow: hidden 6 | padding: 1rem 7 | position: relative 8 | strong 9 | color: currentColor 10 | .tag 11 | margin-right: 0.5em 12 | &.is-patreon 13 | background-color: $patreon-blue 14 | color: $white 15 | &.is-fortyfour 16 | background-color: $fortyfour 17 | color: $white 18 | .button 19 | transform-origin: center 20 | transition-duration: $speed 21 | transition-property: transform 22 | &:hover 23 | .button 24 | transform: scale(1.1) 25 | 26 | .bd-banner-background 27 | +overlay 28 | background-image: url("/images/fortyfour-background.jpg") 29 | background-position: center center 30 | background-size: cover 31 | opacity: 0.5 32 | 33 | .bd-banner-text 34 | line-height: 1.25 35 | margin-right: 0.5rem 36 | position: relative 37 | 38 | .bd-banner-button 39 | display: inline-block 40 | flex-shrink: 0 41 | height: 34px 42 | position: relative 43 | width: 145px 44 | img 45 | max-height: 100% 46 | 47 | .hero.bd-is-patreon 48 | background-color: $patreon 49 | 50 | +from(480px) 51 | .bd-banner-text 52 | margin-right: 1rem 53 | -------------------------------------------------------------------------------- /atom.xml: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | {{ site.title | xml_escape }} 7 | {% if site.description %}{{ site.description | xml_escape }}{% endif %} 8 | {{ site.url }} 9 | {{ site.url }} 10 | {{ site.time | date_to_xmlschema }} 11 | 12 | {{ site.title }} 13 | bbxdesign@gmail.com 14 | 15 | 16 | {% for post in site.posts limit:10 %} 17 | 18 | {{ post.title | xml_escape }} 19 | {% if post.author.name %} 20 | {{ post.author.name | xml_escape }} 21 | {% endif %} 22 | {{ post.content | xml_escape }} 23 | {{ post.date | date_to_rfc822 }} 24 | {{ site.url }}{{ post.url }} 25 | {{ site.url }}{{ post.url }} 26 | 27 | {% endfor %} 28 | 29 | 30 | -------------------------------------------------------------------------------- /_includes/subnav-columns.html: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /_sass/expo.sass: -------------------------------------------------------------------------------- 1 | .bd-expo 2 | background-color: $background 3 | padding: 1.5rem 4 | 5 | .bd-website 6 | display: block 7 | position: relative 8 | text-align: center 9 | &:last-child 10 | margin-bottom: 0 11 | 12 | .bd-website-image 13 | align-items: center 14 | display: flex 15 | justify-content: center 16 | margin-bottom: 1.5rem 17 | position: relative 18 | &:hover 19 | .bd-website-shadow 20 | opacity: 0 21 | .bd-website-overlay 22 | opacity: 0.25 23 | .b-lazy 24 | opacity: 0 25 | transition: opacity 500ms $easing 26 | .b-loaded 27 | opacity: 1 28 | 29 | .bd-website-shadow 30 | border: 1px solid rgba(#000, 0.04) 31 | transition: opacity 200ms $easing 32 | 33 | .bd-website-overlay 34 | background-color: $black 35 | opacity: 0 36 | transition: opacity 200ms $easing 37 | 38 | +mobile 39 | .bd-website:not(:last-child) 40 | margin-bottom: 1.5rem 41 | 42 | +tablet 43 | .bd-expo 44 | padding-bottom: 3rem 45 | padding-top: 3rem 46 | .bd-websites 47 | display: flex 48 | flex-wrap: wrap 49 | justify-content: space-between 50 | .bd-website 51 | margin-top: 3rem 52 | width: calc(50% - 3rem) 53 | &:nth-child(1) 54 | margin-top: 0 55 | &.bd-is-highlighted 56 | width: 100% 57 | .bd-website-image 58 | margin-bottom: 3rem 59 | -------------------------------------------------------------------------------- /documentation/overview/classes.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS 类 3 | layout: documentation 4 | doc-tab: overview 5 | doc-subtab: classes 6 | --- 7 | 8 | {% include subnav-overview.html %} 9 | 10 |
    11 |
    12 |

    类

    13 |

    Bulma 是一个 CSS 类的简单 集合。只需要编写你想要的 HTML 代码。

    14 | 15 |
    16 | 17 |
    18 |

    19 | Bulma 是一个 CSS 框架，这意味着最终只有 一个 .css 文件。 20 |
    21 | https://github.com/jgthms/bulma/blob/master/css/bulma.css

    22 |

    23 | 因为 Bulma 只包含 CSS 类，所以您编写的 HTML 代码 不会影响 页面的样式。这就是为什么 .input 作为一个类存在的原因，所以你可以选择 你想要的 <input type="text"> 元素样式。 24 |

    25 |

    26 | Bulma 针对 通用 标签仅修改以下 两处 27 |

    28 |
      29 |
    • 30 | generic.sass 定义页面的基本样式 31 |
      • 32 |
    • 33 | the .content 类 用于 任何 文本内容, 例如 WYSIWYG 34 |
      • 35 |
    36 |
    37 |
    38 |
    39 | -------------------------------------------------------------------------------- /_includes/svg/bootstrap-icon.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /_data/variables/elements/box.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "box", 4 | "file_relative_path": "elements/box.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 8, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/box.sass#L1,L8", 8 | "vars": { 9 | "box-color": { 10 | "id": "box-color", 11 | "name": "$box-color", 12 | "value": "$text" 13 | }, 14 | "box-background-color": { 15 | "id": "box-background-color", 16 | "name": "$box-background-color", 17 | "value": "$white" 18 | }, 19 | "box-radius": { 20 | "id": "box-radius", 21 | "name": "$box-radius", 22 | "value": "$radius-large" 23 | }, 24 | "box-shadow": { 25 | "id": "box-shadow", 26 | "name": "$box-shadow", 27 | "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)" 28 | }, 29 | "box-padding": { 30 | "id": "box-padding", 31 | "name": "$box-padding", 32 | "value": "1.25rem" 33 | }, 34 | "box-link-hover-shadow": { 35 | "id": "box-link-hover-shadow", 36 | "name": "$box-link-hover-shadow", 37 | "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link" 38 | }, 39 | "box-link-active-shadow": { 40 | "id": "box-link-active-shadow", 41 | "name": "$box-link-active-shadow", 42 | "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link" 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /_data/variables/components/card.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "components", 3 | "file_name": "card", 4 | "file_relative_path": "components/card.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 9, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/card.sass#L1,L9", 8 | "vars": { 9 | "card-color": { 10 | "id": "card-color", 11 | "name": "$card-color", 12 | "value": "$text" 13 | }, 14 | "card-background-color": { 15 | "id": "card-background-color", 16 | "name": "$card-background-color", 17 | "value": "$white" 18 | }, 19 | "card-shadow": { 20 | "id": "card-shadow", 21 | "name": "$card-shadow", 22 | "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)" 23 | }, 24 | "card-header-color": { 25 | "id": "card-header-color", 26 | "name": "$card-header-color", 27 | "value": "$text-strong" 28 | }, 29 | "card-header-shadow": { 30 | "id": "card-header-shadow", 31 | "name": "$card-header-shadow", 32 | "value": "0 1px 2px rgba($black, 0.1)" 33 | }, 34 | "card-header-weight": { 35 | "id": "card-header-weight", 36 | "name": "$card-header-weight", 37 | "value": "$weight-bold" 38 | }, 39 | "card-footer-border-top": { 40 | "id": "card-footer-border-top", 41 | "name": "$card-footer-border-top", 42 | "value": "1px solid $border" 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /_includes/subnav-layout.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /_sass/global.sass: -------------------------------------------------------------------------------- 1 | svg 2 | max-height: 100% 3 | max-width: 100% 4 | 5 | $carbon-space: 15px 6 | 7 | #carboncontainer 8 | align-items: center 9 | display: flex 10 | justify-content: center 11 | margin-left: auto 12 | margin-right: auto 13 | max-width: 340px 14 | min-height: 120px + ($carbon-space * 2) 15 | 16 | #carbon 17 | flex-grow: 1 18 | min-height: 100px + ($carbon-space * 2) 19 | padding: 0 20 | position: relative 21 | &:hover 22 | box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary 23 | +tablet 24 | width: 340px 25 | 26 | #carbonads 27 | font-size: 14px 28 | text-align: left 29 | a, 30 | span 31 | display: block 32 | .carbon-wrap 33 | min-height: 130px 34 | position: relative 35 | .carbon-img 36 | bottom: 0 37 | float: left 38 | left: 0 39 | min-height: 130px 40 | padding: 15px 0 15px 15px 41 | position: absolute 42 | top: 0 43 | width: 145px 44 | img 45 | display: block 46 | height: 100px 47 | width: 130px 48 | &:hover 49 | opacity: 0.9 50 | &:active 51 | opacity: 0.8 52 | a:hover 53 | text-decoration: underline 54 | .carbon-text 55 | display: block 56 | color: $text-strong 57 | line-height: 20px 58 | padding: 15px 15px 35px 160px 59 | .carbon-poweredby 60 | bottom: 10px 61 | color: $text-light 62 | display: inline 63 | font-size: $size-small 64 | position: absolute 65 | right: 10px 66 | -------------------------------------------------------------------------------- /_includes/newsletter.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 |
    6 |

    Bulma Newsletter

    7 |

    Get notified when v1 is ready!

    8 |
    9 | 10 |
    11 |
    12 |
    13 |
    14 | 15 | 16 | 17 | 18 |
    19 |
    20 | 23 | 24 | 25 |
    26 |
    27 |
    28 |
    29 |
    30 |
    31 |
    32 |
    -------------------------------------------------------------------------------- /_includes/subnav-form.html: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /documentation/columns/basics.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Columns powered by Flexbox 3 | layout: documentation 4 | doc-tab: columns 5 | doc-subtab: basics 6 | --- 7 | 8 | {% capture columns %} 9 |
    10 |
    11 | 第一列 12 |
    13 |
    14 | 第二列 15 |
    16 |
    17 | 第三列 18 |
    19 |
    20 | 第四列 21 |
    22 |
    23 | {% endcapture %} 24 | 25 | {% include subnav-columns.html %} 26 | 27 |
    28 |
    29 |

    列

    30 |

    通过一个简单方式创建 响应式的多列

    31 |
    32 |
    33 |

    通过 Bulma 创建一个 响应式布局 是非常简单的：

    34 |
      35 |
    1. 增加一个 columns 作为容器
      2. 36 |
    2. 根据你的需要在其中添加更多的 column 元素
      3. 37 |
    38 |

    无论有多少列，他们的宽度将会 均分.

    39 |
    40 | 41 |
    42 |
    43 |

    第一列

    44 |
    45 |
    46 |

    第二列

    47 |
    48 |
    49 |

    第三列

    50 |
    51 |
    52 |

    第四列

    53 |
    54 |
    55 | 56 |
    57 | {% highlight html %}{{ columns }}{% endhighlight %} 58 |
    59 |
    60 |
    61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ############################################################## 2 | 3 | 4 | 感谢 @vmlite https://v2ex.com/member/vmlite 翻译 v0.9
    5 | 可以访问 https://bulma.zcopy.site 查看 6 | 7 | 8 | 9 | 10 | ############################################################## 11 | 12 | ## 这是 Bulma 的中文翻译。可以通过以下链接访问 13 | http://lqzhgood.github.io/bulma-docs-cn 14 | 15 | 欢迎提交 Issues 改进。 16 | 17 | 18 | ## Building the documentation 19 | 20 | The documentation HTML is produced with the Ruby-based `jekyll` tool. 21 | 22 | 1. Make sure Ruby 2.x is installed. 23 | 2. `gem install jekyll` 24 | 25 | ## Viewing the documentation locally 26 | 27 | Then to view the documentation in your local checkout: 28 | 29 | 1. Before you begin, cd into `docs/` directory, and `cp _config.yml _config.local.yml`. Then edit `_config.local.yml` and change the `url:` value to `http://localhost:4000`. This local config file will be ignored by git. 30 | 1. In a separate shell session, `cd` to the `docs/` directory, and do: 31 | ``` 32 | jekyll serve --incremental --config _config.local.yml 33 | ``` 34 | This will start an HTTP server at `http://localhost:4000/` that serves the docs built in the `_site` directory; and anytime the docs are rebuilt by you, it will serve the docs site on the fly. 35 | 2. In your main shell session where you develop, if you change anything in `docs/` the jekyll server will rebuild those on the fly. But if you change anything about the Bulma SASS or CSS, you need to do `npm run start-docs` to build the docs' CSS before you will see it in the browser. The process running `jekyll serve` will pick up the new CSS automatically. 36 | 37 | -------------------------------------------------------------------------------- /_sass/footer.sass: -------------------------------------------------------------------------------- 1 | #about 2 | .twitter-container 3 | display: block 4 | height: 30px 5 | line-height: 30px 6 | margin-top: 0.5rem 7 | small 8 | display: block 9 | margin-top: 5px 10 | 11 | #mc_embed_signup 12 | .field 13 | margin-bottom: 0 14 | .notification 15 | margin-top: 0.75rem 16 | 17 | #share 18 | form 19 | height: 30px 20 | margin-top: 10px 21 | 22 | #social 23 | align-items: center 24 | display: flex 25 | flex-wrap: wrap 26 | justify-content: flex-start 27 | max-width: 400px 28 | > iframe, 29 | > a, 30 | > form, 31 | > div 32 | display: inline-block 33 | font-size: 11px 34 | height: 30px 35 | line-height: 30px 36 | margin-top: 0.5rem 37 | .github-btn 38 | width: 160px 39 | .twitter-share-button 40 | margin-right: 10px 41 | min-width: 76px 42 | .paypal-form 43 | min-width: 148px 44 | .fb-like 45 | align-items: center 46 | display: flex 47 | width: 130px 48 | .bd-patreon-button 49 | height: 30px 50 | margin-right: 0.5rem 51 | width: 128px 52 | 53 | #newsletter 54 | .input 55 | border-color: $white 56 | box-shadow: none 57 | 58 | #sister 59 | ul 60 | display: flex 61 | flex-wrap: wrap 62 | li 63 | display: flex 64 | height: 30px 65 | margin: 5px 1rem 0 0 66 | img 67 | height: 30px 68 | 69 | #tsp 70 | margin-top: 3rem 71 | text-align: center 72 | small 73 | display: block 74 | 75 | #alternative 76 | font-size: 0.875rem 77 | margin-top: 0.5rem 78 | a 79 | color: $text-light 80 | &:hover 81 | text-decoration: underline 82 | -------------------------------------------------------------------------------- /documentation/components/menu.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Menu 3 | layout: documentation 4 | doc-tab: components 5 | doc-subtab: menu 6 | --- 7 | 8 | {% capture menu_example %} 9 | 43 | {% endcapture %} 44 | 45 | {% include subnav-components.html %} 46 | 47 |
    48 |
    49 |

    Menu

    50 |

    一个简单的 菜单，适用于任何类型的垂直导航

    51 | {% 52 | include meta.html 53 | colors=false 54 | sizes=false 55 | variables=true 56 | %} 57 | 58 |
    59 | 60 | {% include snippet.html content=menu_example size="one-third" %} 61 | 62 | {% include variables.html type='component' %} 63 | 64 |
    65 |
    66 | -------------------------------------------------------------------------------- /_data/variables/components/menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "components", 3 | "file_name": "menu", 4 | "file_relative_path": "components/menu.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 10, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/menu.sass#L1,L10", 8 | "vars": { 9 | "menu-item-color": { 10 | "id": "menu-item-color", 11 | "name": "$menu-item-color", 12 | "value": "$text" 13 | }, 14 | "menu-item-radius": { 15 | "id": "menu-item-radius", 16 | "name": "$menu-item-radius", 17 | "value": "$radius-small" 18 | }, 19 | "menu-item-hover-color": { 20 | "id": "menu-item-hover-color", 21 | "name": "$menu-item-hover-color", 22 | "value": "$text-strong" 23 | }, 24 | "menu-item-hover-background-color": { 25 | "id": "menu-item-hover-background-color", 26 | "name": "$menu-item-hover-background-color", 27 | "value": "$background" 28 | }, 29 | "menu-item-active-color": { 30 | "id": "menu-item-active-color", 31 | "name": "$menu-item-active-color", 32 | "value": "$link-invert" 33 | }, 34 | "menu-item-active-background-color": { 35 | "id": "menu-item-active-background-color", 36 | "name": "$menu-item-active-background-color", 37 | "value": "$link" 38 | }, 39 | "menu-list-border-left": { 40 | "id": "menu-list-border-left", 41 | "name": "$menu-list-border-left", 42 | "value": "1px solid $border" 43 | }, 44 | "menu-label-color": { 45 | "id": "menu-label-color", 46 | "name": "$menu-label-color", 47 | "value": "$text-light" 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | route: blog 4 | --- 5 | 6 | {% include navbar.html id="BlogHero" %} 7 | 8 |
    9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | {{ page.name }} 20 | 21 | 22 | 23 |
    24 | 25 |
    26 |
    27 |
    28 |
    29 |

    30 | Back to Blog home 31 |

    32 |

    33 | {{ page.title }} 34 |

    35 | 36 |
    37 |
    38 | {{ content }} 39 |
    40 | 48 |
    49 |
    50 |
    51 |
    52 | -------------------------------------------------------------------------------- /_includes/meta.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | {% if include.new %} 4 |
    5 |
    6 | New! 7 |
    8 |
    9 | {% endif %} 10 | 11 | {% if include.experimental %} 12 |
    13 |
    14 | Experimental 15 |
    16 |
    17 | {% endif %} 18 | 19 | {% if include.since %} 20 |
    21 |
    22 | Since 23 | {{ include.since }} 24 |
    25 |
    26 | {% endif %} 27 | 28 |
    29 |
    30 | Colors 31 | {% if include.colors %} 32 | Yes 33 | {% else %} 34 | No 35 | {% endif %} 36 |
    37 |
    38 | 39 |
    40 |
    41 | Sizes 42 | {% if include.sizes %} 43 | Yes 44 | {% else %} 45 | No 46 | {% endif %} 47 |
    48 |
    49 | 50 |
    51 |
    52 | Variables 53 | {% if include.variables %} 54 | Yes 55 | {% else %} 56 | No 57 | {% endif %} 58 |
    59 |
    60 |
    61 | -------------------------------------------------------------------------------- /backers.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Backers via Patreon 3 | layout: default 4 | route: backers 5 | --- 6 | 7 | {% include navbar.html id="BackersNavbar" %} 8 | 9 |
    10 |
    11 |
    12 |
    13 |
    14 |

    15 | Backers via Patreon 16 |

    17 |

    18 | Everyone who is supporting Bulma 19 |

    20 |
    21 |
    22 | {% include carbon.html %} 23 |
    24 |
    25 |
    26 |
    27 |
    28 | 29 |
    30 |
    31 |

    32 | Homepage sponsors via Patreon ($100+) 33 |

    34 |
    35 |
      36 | {% for backer in site.data.backers["100"] reversed %} 37 | {% include elements/patreon-item.html %} 38 | {% endfor %} 39 |
    40 |
    41 | 42 |

    43 | Generous backers via Patreon ($30+) 44 |

    45 |
    46 |
      47 | {% for backer in site.data.backers["30"] reversed %} 48 | {% include elements/patreon-item.html %} 49 | {% endfor %} 50 |
    51 |
    52 | 53 |

    54 | Backers via Patreon ($10+) 55 |

    56 |
    57 |
      58 | {% for backer in site.data.backers["10"] reversed %} 59 | {% include elements/patreon-item.html %} 60 | {% endfor %} 61 |
    62 |
    63 |
    64 |
    65 | -------------------------------------------------------------------------------- /_data/variables/elements/title.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "title", 4 | "file_relative_path": "elements/title.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 11, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/title.sass#L1,L11", 8 | "vars": { 9 | "title-color": { 10 | "id": "title-color", 11 | "name": "$title-color", 12 | "value": "$grey-darker" 13 | }, 14 | "title-size": { 15 | "id": "title-size", 16 | "name": "$title-size", 17 | "value": "$size-3" 18 | }, 19 | "title-weight": { 20 | "id": "title-weight", 21 | "name": "$title-weight", 22 | "value": "$weight-semibold" 23 | }, 24 | "title-strong-color": { 25 | "id": "title-strong-color", 26 | "name": "$title-strong-color", 27 | "value": "inherit" 28 | }, 29 | "title-strong-weight": { 30 | "id": "title-strong-weight", 31 | "name": "$title-strong-weight", 32 | "value": "inherit" 33 | }, 34 | "subtitle-color": { 35 | "id": "subtitle-color", 36 | "name": "$subtitle-color", 37 | "value": "$grey-dark" 38 | }, 39 | "subtitle-size": { 40 | "id": "subtitle-size", 41 | "name": "$subtitle-size", 42 | "value": "$size-5" 43 | }, 44 | "subtitle-weight": { 45 | "id": "subtitle-weight", 46 | "name": "$subtitle-weight", 47 | "value": "$weight-normal" 48 | }, 49 | "subtitle-strong-color": { 50 | "id": "subtitle-strong-color", 51 | "name": "$subtitle-strong-color", 52 | "value": "$grey-darker" 53 | }, 54 | "subtitle-strong-weight": { 55 | "id": "subtitle-strong-weight", 56 | "name": "$subtitle-strong-weight", 57 | "value": "$weight-semibold" 58 | } 59 | } 60 | } -------------------------------------------------------------------------------- /_includes/tws.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include tw.html tweet=tweet%} 5 | {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include tw.html tweet=tweet%} 6 | {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include tw.html tweet=tweet%} 7 | {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include tw.html tweet=tweet%} 8 |
    9 | 10 |
    11 | {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include tw.html tweet=tweet%} 12 | {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include tw.html tweet=tweet%} 13 | {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include tw.html tweet=tweet%} 14 | {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include tw.html tweet=tweet%} 15 |
    16 | 17 |
    18 | {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include tw.html tweet=tweet%} 19 | {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include tw.html tweet=tweet%} 20 | {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include tw.html tweet=tweet%} 21 | {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include tw.html tweet=tweet%} 22 |
    23 |
    24 | 25 |
    26 |

    27 | 28 | See more love 🤗 29 | 30 |

    31 |
    32 |
    33 | -------------------------------------------------------------------------------- /documentation/elements/notification.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Notification 3 | layout: documentation 4 | doc-tab: elements 5 | doc-subtab: notification 6 | --- 7 | 8 | {% capture notification %} 9 |
    10 | 11 | Lorem ipsum dolor sit amet, consectetur 12 | adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, 13 | consectetur adipiscing elit 14 |
    15 | {% endcapture %} 16 | 17 | {% capture notification_colors %} 18 | {% for color in site.data.colors.justColors %} 19 |
    20 | 21 | Primar lorem ipsum dolor sit amet, consectetur 22 | adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, 23 | consectetur adipiscing elit 24 |
    25 | {% endfor %} 26 | {% endcapture %} 27 | 28 | {% include subnav-elements.html %} 29 | 30 |
    31 |
    32 |

    Notifications

    33 |

    34 | 大块 通知 块，用于提醒用户一些事情。 35 |

    36 | {% 37 | include meta.html 38 | colors=true 39 | sizes=false 40 | variables=true 41 | %} 42 | 43 |
    44 | 45 | {% include snippet.html content=notification %} 46 | 47 | {% include anchor.html name="Colors | 颜色" %} 48 | 49 | {% include snippet.html content=notification_colors %} 50 | 51 | {% include variables.html type='element' %} 52 | 53 |
    54 |
    55 | -------------------------------------------------------------------------------- /_includes/subnav-overview.html: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /_sass/bsa.sass: -------------------------------------------------------------------------------- 1 | .bsa 2 | padding: 2rem 3 | 4 | .bsa-cpc 5 | min-height: 1px 6 | 7 | #_default_ 8 | .default-ad 9 | background-color: rgba(black, 0.3) 10 | border-radius: 2px 11 | color: $white 12 | display: inline-block 13 | font-size: 10px 14 | font-weight: bold 15 | padding: 0 4px 16 | text-transform: uppercase 17 | vertical-align: top 18 | & > a 19 | background-color: $white 20 | border-radius: $radius-large 21 | box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) 22 | color: $text 23 | display: block 24 | line-height: 1.375 25 | margin-top: 15px 26 | min-height: 70px 27 | padding: 15px 28 | padding-left: 70px 29 | position: relative 30 | &:hover, 31 | &:focus 32 | box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link 33 | &:active 34 | box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link 35 | span 36 | display: block 37 | .default-image 38 | display: block 39 | left: 15px 40 | height: 40px 41 | position: absolute 42 | top: 15px 43 | width: 40px 44 | img 45 | display: block 46 | height: 40px 47 | width: 40px 48 | .default-title 49 | color: $text-strong 50 | display: inline 51 | font-weight: $weight-bold 52 | &:after 53 | content: " — " 54 | .default-description 55 | display: inline 56 | 57 | +tablet 58 | .bsa 59 | .columns 60 | min-height: 120px 61 | #_default_ 62 | display: flex 63 | justify-content: center 64 | position: relative 65 | .default-ad 66 | left: 100% 67 | margin-left: 2rem 68 | position: absolute 69 | top: 0 70 | & > a 71 | margin: 0 72 | width: calc(50% - 1rem) 73 | &:not(:nth-child(2)) 74 | margin-left: 2rem 75 | -------------------------------------------------------------------------------- /templates.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | route: templates 4 | --- 5 | 6 |
    7 |
    8 |
    9 | {% include header.html %} 10 |
    11 |
    12 | 13 |
    14 |
    15 |

    16 | Templates 17 |

    18 |

    19 | Free HTML templates that make use of Bulma out of the box 20 |

    21 |
    22 |
    23 |
    24 | 25 |
    26 |
    27 |
    28 |
    29 | 30 |

    Everything

    31 |

    All Bulma elements on one page

    32 |
    33 |     34 |
    35 |
    36 | 37 |

    Business

    38 |

    Classic business homepage

    39 |
    40 |     41 |
    42 |
    43 | 44 |

    Welcome

    45 |

    Simple one-page introduction

    46 |
    47 |     48 |
    49 |
    50 |
    51 |
    52 | -------------------------------------------------------------------------------- /documentation/elements/progress.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress Bar 3 | layout: documentation 4 | doc-tab: elements 5 | doc-subtab: progress 6 | --- 7 | 8 | {% capture progress %} 9 | 15% 10 | {% endcapture %} 11 | 12 | {% capture progress_colors %} 13 | 30% 14 | 30% 15 | 45% 16 | 60% 17 | 75% 18 | 90% 19 | {% endcapture %} 20 | 21 | {% capture progress_sizes %} 22 | 15% 23 | 30% 24 | 45% 25 | 60% 26 | {% endcapture %} 27 | 28 | {% include subnav-elements.html %} 29 | 30 |
    31 |
    32 |

    Progress bars

    33 |

    34 | HTML 原生 进度 条 35 |

    36 | {% 37 | include meta.html 38 | colors=true 39 | sizes=true 40 | variables=true 41 | %} 42 | 43 |
    44 | 45 | {% include snippet.html content=progress %} 46 | 47 | {% include anchor.html name="Colors | 颜色" %} 48 | 49 | {% include snippet.html content=progress_colors %} 50 | 51 | {% include anchor.html name="Sizes | 尺寸" %} 52 | 53 | {% include snippet.html content=progress_sizes %} 54 | 55 | {% include variables.html type='element' %} 56 | 57 |
    58 |
    59 | -------------------------------------------------------------------------------- /lib/bulma.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | jQuery(document).ready(function ($) { 4 | 5 | var $toggle = $('#nav-toggle'); 6 | var $menu = $('#nav-menu'); 7 | 8 | $toggle.click(function () { 9 | $(this).toggleClass('is-active'); 10 | $menu.toggleClass('is-active'); 11 | }); 12 | 13 | $('.modal-button').click(function () { 14 | var target = $(this).data('target'); 15 | $('html').addClass('is-clipped'); 16 | $(target).addClass('is-active'); 17 | }); 18 | 19 | $('.modal-background, .modal-close').click(function () { 20 | $('html').removeClass('is-clipped'); 21 | $(this).parent().removeClass('is-active'); 22 | }); 23 | 24 | $('.modal-card-head .delete, .modal-card-foot .button').click(function () { 25 | $('html').removeClass('is-clipped'); 26 | $('#modal-ter').removeClass('is-active'); 27 | }); 28 | 29 | $(document).on('keyup', function (e) { 30 | if (e.keyCode == 27) { 31 | $('html').removeClass('is-clipped'); 32 | $('.modal').removeClass('is-active'); 33 | } 34 | }); 35 | 36 | var $highlights = $('.highlight'); 37 | 38 | $highlights.each(function () { 39 | var $el = $(this); 40 | var copy = ''; 41 | var expand = ''; 42 | $el.append(copy); 43 | 44 | if ($el.find('pre code').innerHeight() > 600) { 45 | $el.append(expand); 46 | } 47 | }); 48 | 49 | var $highlightButtons = $('.highlight .bd-copy, .highlight .bd-expand'); 50 | 51 | $highlightButtons.hover(function () { 52 | $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63'); 53 | }, function () { 54 | $(this).parent().css('box-shadow', 'none'); 55 | }); 56 | 57 | $('.highlight .bd-expand').click(function () { 58 | $(this).parent().children('pre').css('max-height', 'none'); 59 | }); 60 | 61 | new Clipboard('.bd-copy', { 62 | target: function target(trigger) { 63 | return trigger.previousSibling; 64 | } 65 | }); 66 | }); -------------------------------------------------------------------------------- /vendor/lazyload-2.0.0-beta.2.min.js: -------------------------------------------------------------------------------- 1 | /*! Lazy Load 2.0.0-beta.2 - MIT license - Copyright 2007-2017 Mika Tuupola */ 2 | !function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";function e(t,e){this.settings=r(s,e||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}const s={src:"data-src",srcset:"data-srcset",selector:".lazyload"},r=function(){let t={},e=!1,s=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],s++);for(;s0){e.observer.unobserve(t.target);let s=t.target.getAttribute(e.settings.src),r=t.target.getAttribute(e.settings.srcset);"img"===t.target.tagName.toLowerCase()?(s&&(t.target.src=s),r&&(t.target.srcset=r)):t.target.style.backgroundImage="url("+s+")"}})},s),this.images.forEach(function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;this.images.forEach(function(e){let s=e.getAttribute(t.settings.src),r=e.getAttribute(t.settings.srcset);"img"===e.tagName.toLowerCase()?(s&&(e.src=s),r&&(e.srcset=r)):e.style.backgroundImage="url("+s+")"})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,s){return new e(t,s)},t.jQuery){const s=t.jQuery;s.fn.lazyload=function(t){return t=t||{},t.attribute=t.attribute||"data-src",new e(s.makeArray(this),t),this}}return e}); 3 | -------------------------------------------------------------------------------- /love.html: -------------------------------------------------------------------------------- 1 | --- 2 | fulltitle: Love for Bulma 😍 3 | layout: default 4 | route: love 5 | tweets: 6 | - id: "900692286744535041" 7 | date: "2:12 PM - 24 Aug 2017" 8 | content: 'So impressed with the speed and clarity of implementing #bulma CSS framework on a new project. Kudos @jgthms' 9 | fullname: "Jamie Hylands" 10 | username: "JamieAHylands" 11 | avatar: "https://pbs.twimg.com/profile_images/872757791236272128/31VmJF-L_normal.jpg" 12 | hearts: "1" 13 | retweets: "0" 14 | --- 15 | 16 | {% include navbar.html id="LoveHero" %} 17 | 18 |
    19 |
    20 |
    21 |
    22 |
    23 |

    24 | Love 25 |

    26 |

    27 | Happy thoughts from Twitter 😃 28 |

    29 |
    30 |
    31 | {% include carbon.html %} 32 |
    33 |
    34 |
    35 |
    36 |
    37 | 38 |
    39 |
    40 |
    41 |

    42 | Are you a Bulma fan too? Show your support! 🤗 43 |

    44 |

    45 | {% include elements/tw-button.html label="Tweet #bulmaio" %} 46 |

    47 |
    48 | 49 |
    50 | {% for tweetId in site.data.love.tweets reversed %} 51 | {% assign tweet = site.data.love.tweetsById[tweetId] %} 52 | {% include tw.html tweet=tweet %} 53 | {% endfor %} 54 |
    55 |
    56 |
    57 | -------------------------------------------------------------------------------- /_includes/subnav-components.html: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /documentation/modifiers/helpers.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 辅助类 3 | layout: documentation 4 | doc-tab: modifiers 5 | doc-subtab: helpers 6 | --- 7 | 8 | {% include subnav-modifiers.html %} 9 | 10 |
    11 |
    12 |

    辅助类

    13 |

    您几乎可以在任何元素上应用 辅助类 来改变其样式。

    14 |
    15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
    Floatis-clearfixclearfix，修复浮动元素的子元素
    is-pulled-left浮动一个元素到左边
    is-pulled-right浮动一个元素到右边
    Spacingis-marginless移除所有的 外边距
    is-paddingless移除所有的 内边距
    Otheris-overlay完全覆盖上一层定位的父元素
    is-clipped隐藏 溢出部分
    is-radiusless移除任何 圆角
    is-shadowless移除任何 阴影
    is-unselectable禁止文本 选择
    is-invisible隐藏 - visibility元素
    65 |
    66 |
    67 | -------------------------------------------------------------------------------- /documentation/elements/box.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Box 3 | layout: documentation 4 | doc-tab: elements 5 | doc-subtab: box 6 | --- 7 | 8 | {% include subnav-elements.html %} 9 | 10 | {% capture box_example %} 11 |
    12 |
    13 |
    14 |
    15 | Image 16 |
    17 |
    18 |
    19 |
    20 |

    21 | John Smith @johnsmith 31m 22 |
    23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. 24 |

    25 |
    26 | 39 |
    40 |
    41 |
    42 | {% endcapture %} 43 | 44 |
    45 |
    46 |

    Box

    47 |

    48 | 一个用来包裹其他元素的白色 盒子 49 |

    50 | {% 51 | include meta.html 52 | colors=false 53 | sizes=false 54 | variables=true 55 | %} 56 | 57 |
    58 | 59 |
    60 |

    61 | .box 元素是一个带有阴影、边框、圆角和一些边距的容器。 62 |
    63 | 例如，您可以包含媒体对象。 64 |

    65 |
    66 | 67 | {% include snippet.html content=box_example more=true %} 68 | 69 | {% include variables.html type='element' %} 70 | 71 |
    72 |
    73 | -------------------------------------------------------------------------------- /_includes/variables.html: -------------------------------------------------------------------------------- 1 | {% capture content %} 2 | 3 | {% assign anchor_name = include.anchor_name | default: 'Variables | 变量' %} 4 | {% assign tab = include.tab | default: page.doc-tab %} 5 | {% assign subtab = include.subtab | default: page.doc-subtab %} 6 | {% assign type = include.type | default: tab %} 7 | {% assign data = include.data | default: site.data.variables[tab][subtab] %} 8 | {% assign variables = include.variables | default: data.vars %} 9 | {% assign table_class = include.table_class | default: 'is-bordered' %} 10 | 11 | {% if include.custom_message %} 12 | 13 | {{ include.custom_message }} 14 | 15 | {% else %} 16 | 17 | {% assign variables_link_text = "这些变量" %} 18 | 19 | {% capture variables_link %} 20 | 21 | {% if data.file_url %} 22 | 23 | {{ variables_link_text }} 24 | 25 | {% else %} 26 | 27 | {{ variables_link_text }} 28 | 29 | {% endif %} 30 | 31 | {% endcapture %} 32 | 33 | 你可以使用 {{ variables_link | strip }} 来 自定义 这些 {{ type }}。只需要在导入 Bulma 之前设置这些变量 学习如何开始. 34 | 35 | {% endif %} 36 | 37 | {% endcapture %} 38 | 39 | {% include anchor.html name=anchor_name %} 40 | 41 |
    42 |

    {{ content | strip }}

    43 |
    44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | {% for variable_hash in variables %} 60 | {% assign variable = variable_hash[1] %} 61 | 62 | 65 | 68 | 69 | {% endfor %} 70 | 71 |
    NameDefault value
    NameDefault value
    63 | {{ variable.name }} 64 | 66 | {{ variable.value }} 67 |
    72 | -------------------------------------------------------------------------------- /_sass/bootstrap.sass: -------------------------------------------------------------------------------- 1 | $bootstrap: #6f5499 2 | $bootstrap-invert: #fff 3 | 4 | .bd-bootstrap 5 | .hero 6 | background-color: $bootstrap 7 | color: $bootstrap-invert 8 | .title, 9 | .subtitle 10 | color: currentColor 11 | .subtitle 12 | color: rgba($bootstrap-invert, 0.5) 13 | .subtitle a 14 | border-bottom: 1px solid currentColor 15 | color: currentColor 16 | &:hover 17 | color: $bootstrap-invert 18 | 19 | .bd-pros-heading 20 | padding: 0 2rem 21 | text-align: center 22 | 23 | .bd-pros-icon 24 | margin-bottom: 3rem 25 | text-align: center 26 | svg 27 | height: 3rem 28 | width: auto 29 | 30 | .bd-pros-list 31 | margin: 0 auto 32 | max-width: 540px 33 | 34 | .bd-pro 35 | .icon 36 | position: relative 37 | top: -1px 38 | .title 39 | margin-bottom: 0.5rem 40 | 41 | .bd-pro + .pro 42 | margin-top: 2rem 43 | padding-top: 2rem 44 | 45 | .bd-pro-content 46 | p:not(:last-child) 47 | margin-bottom: 0.5rem 48 | 49 | .bd-pro.bd-is-bulma 50 | .icon 51 | color: $primary 52 | 53 | .bd-pro.bd-is-bootstrap 54 | .icon 55 | color: $bootstrap 56 | 57 | .bd-separator 58 | color: $border 59 | margin: 0 0.25em 60 | 61 | .bd-comparison 62 | margin: 0 auto 63 | max-width: 42rem 64 | .table 65 | color: $red 66 | thead, 67 | tfoot 68 | th 69 | font-size: 1.5rem 70 | text-align: center 71 | svg 72 | height: 1.5rem 73 | margin-right: 1rem 74 | position: relative 75 | top: 0.25rem 76 | width: auto 77 | tbody 78 | th 79 | font-size: 1.25rem 80 | text-align: center 81 | td 82 | font-family: $family-monospace 83 | width: 50% 84 | a 85 | color: currentColor 86 | &:hover 87 | text-decoration: underline 88 | .bd-is-empty 89 | background-color: $background 90 | color: $text-light 91 | .bd-is-unique 92 | background-color: rgba($green, 0.25) 93 | color: $text-strong 94 | font-weight: $weight-bold 95 | 96 | .bd-comparison-header 97 | margin-bottom: 3rem 98 | -------------------------------------------------------------------------------- /_includes/subnav-elements.html: -------------------------------------------------------------------------------- 1 | 40 | -------------------------------------------------------------------------------- /_includes/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% if page.route == 'index' %} 5 | 6 | 7 | {% elsif page.doc-subtab == 'navbar' %} 8 | {% include examples/navbar-bottom.html %} 9 | 10 | {% endif %} 11 | 12 |
    13 | 14 | 23 | 24 | 25 | 26 | 27 | 36 | 37 | 46 | 47 | {% if page.route == 'index' %} 48 | 49 | {% endif %} 50 | -------------------------------------------------------------------------------- /documentation/form/checkbox.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checkbox 3 | layout: documentation 4 | doc-tab: form 5 | doc-subtab: checkbox 6 | --- 7 | 8 | {% capture checkbox_example %} 9 | 13 | {% endcapture %} 14 | 15 | {% capture checkbox_link_example %} 16 | 20 | {% endcapture %} 21 | 22 | {% capture checkbox_disabled_example %} 23 | 27 | {% endcapture %} 28 | 29 | {% include subnav-form.html %} 30 | 31 |
    32 |
    33 |

    Checkbox

    34 |

    35 | 原生格式的 复选框 36 |

    37 | {% 38 | include meta.html 39 | colors=false 40 | sizes=false 41 | variables=false 42 | %} 43 | 44 |
    45 | 46 |
    47 |

    48 | checkbox 类是 HTML 元素 <input type="checkbox"> 的简单包装，它故意没有增加样式，以保证跨浏览器的兼容性和用户体验。 49 |

    50 |
    51 | 52 |
    53 |
    54 | {{checkbox_example}} 55 |
    56 |
    57 | {% highlight html %}{{checkbox_example}}{% endhighlight %} 58 |
    59 |
    60 | 61 |
    62 |

    63 | 你可以添加 链接 到你的复选框，或者 禁用 它。 64 |

    65 |
    66 | 67 |
    68 |
    69 | {{checkbox_link_example}} 70 |
    71 |
    72 | {% highlight html %}{{checkbox_link_example}}{% endhighlight %} 73 |
    74 |
    75 | 76 |
    77 |
    78 | {{checkbox_disabled_example}} 79 |
    80 |
    81 | {% highlight html %}{{checkbox_disabled_example}}{% endhighlight %} 82 |
    83 |
    84 |
    85 |
    86 | -------------------------------------------------------------------------------- /_data/variables/components/message.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "components", 3 | "file_name": "message", 4 | "file_relative_path": "components/message.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 15, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/message.sass#L1,L15", 8 | "vars": { 9 | "message-background-color": { 10 | "id": "message-background-color", 11 | "name": "$message-background-color", 12 | "value": "$background" 13 | }, 14 | "message-radius": { 15 | "id": "message-radius", 16 | "name": "$message-radius", 17 | "value": "$radius" 18 | }, 19 | "message-header-background-color": { 20 | "id": "message-header-background-color", 21 | "name": "$message-header-background-color", 22 | "value": "$text" 23 | }, 24 | "message-header-color": { 25 | "id": "message-header-color", 26 | "name": "$message-header-color", 27 | "value": "$text-invert" 28 | }, 29 | "message-header-padding": { 30 | "id": "message-header-padding", 31 | "name": "$message-header-padding", 32 | "value": "0.5em 0.75em" 33 | }, 34 | "message-header-radius": { 35 | "id": "message-header-radius", 36 | "name": "$message-header-radius", 37 | "value": "$radius" 38 | }, 39 | "message-body-border": { 40 | "id": "message-body-border", 41 | "name": "$message-body-border", 42 | "value": "1px solid $border" 43 | }, 44 | "message-body-color": { 45 | "id": "message-body-color", 46 | "name": "$message-body-color", 47 | "value": "$text" 48 | }, 49 | "message-body-padding": { 50 | "id": "message-body-padding", 51 | "name": "$message-body-padding", 52 | "value": "1em 1.25em" 53 | }, 54 | "message-body-radius": { 55 | "id": "message-body-radius", 56 | "name": "$message-body-radius", 57 | "value": "$radius" 58 | }, 59 | "message-body-pre-background-color": { 60 | "id": "message-body-pre-background-color", 61 | "name": "$message-body-pre-background-color", 62 | "value": "$white" 63 | }, 64 | "message-body-pre-code-background-color": { 65 | "id": "message-body-pre-code-background-color", 66 | "name": "$message-body-pre-code-background-color", 67 | "value": "transparent" 68 | } 69 | } 70 | } -------------------------------------------------------------------------------- /_includes/carbon.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 51 | 52 |
    53 |
    54 | -------------------------------------------------------------------------------- /_sass/highlight.sass: -------------------------------------------------------------------------------- 1 | .highlight 2 | background-color: #f5f5f5 3 | color: #586e75 4 | .c 5 | color: #93a1a1 6 | .err, 7 | .g 8 | color: #586e75 9 | .k 10 | color: #859900 11 | .l, 12 | .n 13 | color: #586e75 14 | .o 15 | color: #859900 16 | .x 17 | color: #cb4b16 18 | .p 19 | color: #586e75 20 | .cm 21 | color: #93a1a1 22 | .cp 23 | color: #859900 24 | .c1 25 | color: #93a1a1 26 | .cs 27 | color: #859900 28 | .gd 29 | color: #2aa198 30 | .ge 31 | color: #586e75 32 | font-style: italic 33 | .gr 34 | color: #dc322f 35 | .gh 36 | color: #cb4b16 37 | .gi 38 | color: #859900 39 | .go, 40 | .gp 41 | color: #586e75 42 | .gs 43 | color: #586e75 44 | font-weight: bold 45 | .gu 46 | color: #cb4b16 47 | .gt 48 | color: #586e75 49 | .kc 50 | color: #cb4b16 51 | .kd 52 | color: #268bd2 53 | .kn, 54 | .kp 55 | color: #859900 56 | .kr 57 | color: #268bd2 58 | .kt 59 | color: #dc322f 60 | .ld 61 | color: #586e75 62 | .m, 63 | .s 64 | color: #2aa198 65 | .na 66 | color: #B58900 67 | .nb 68 | color: #586e75 69 | .nc 70 | color: #268bd2 71 | .no 72 | color: #cb4b16 73 | .nd 74 | color: #268bd2 75 | .ni, 76 | .ne 77 | color: #cb4b16 78 | .nf 79 | color: #268bd2 80 | .nl, 81 | .nn, 82 | .nx, 83 | .py 84 | color: #586e75 85 | .nt, 86 | .nv 87 | color: #268bd2 88 | .ow 89 | color: #859900 90 | .w 91 | color: #586e75 92 | .mf, 93 | .mh, 94 | .mi, 95 | .mo 96 | color: #2aa198 97 | .sb 98 | color: #93a1a1 99 | .sc 100 | color: #2aa198 101 | .sd 102 | color: #586e75 103 | .s2 104 | color: #2aa198 105 | .se 106 | color: #cb4b16 107 | .sh 108 | color: #586e75 109 | .si, 110 | .sx 111 | color: #2aa198 112 | .sr 113 | color: #dc322f 114 | .s1, 115 | .ss 116 | color: #2aa198 117 | .bp, 118 | .vc, 119 | .vg, 120 | .vi 121 | color: #268bd2 122 | .il 123 | color: #2aa198 124 | 125 | .content .highlight 126 | margin-left: 0 127 | margin-right: 0 128 | text-align: left 129 | &:not(:first-child) 130 | margin-top: 1em 131 | &:not(:last-child) 132 | margin-bottom: 1em 133 | 134 | .content li .highlight 135 | margin-top: 0.5em 136 | -------------------------------------------------------------------------------- /_includes/tw.html: -------------------------------------------------------------------------------- 1 | {% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %} 2 | 3 |
    4 |
    5 | 6 |
    7 | 8 |
    9 |
    10 | 11 | {{ include.tweet.fullname }} 12 | 13 | 14 | @{{ include.tweet.username }} 15 | 16 |
    17 |     18 |
    19 | 20 |
    21 | {{ include.tweet.content }} 22 |
    23 | 24 |

    25 | 26 | {{ include.tweet.date }} 27 | 28 |

    29 | 30 | 57 |
    58 | -------------------------------------------------------------------------------- /documentation/overview/mixins.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mixins 3 | layout: documentation 4 | doc-tab: overview 5 | doc-subtab: mixins 6 | --- 7 | 8 | {% include subnav-overview.html %} 9 | 10 |
    11 |
    12 |

    Mixins

    13 |

    mixins 可用于自定义元素，对响应式也有帮助

    14 | 15 |
    16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
    =arrow($color)Creates a CSS-only down arrow. Used for the dropdown select.
    =blockDefines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.
    =clearfixAdds a clearfix at the end of the element. Used for the "is-clearfix" helper.
    =center($size)Positions an element in the exact center of its parent. Used for the spinner in a loading button.
    =deleteCreates a CSS-only cross. Used for the delete element in modals, messages, tags...
    =fa($size, $dimensions)Sets the style of a Font Awesome icon container.
    =hamburger($dimensions)Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".
    =loaderCreates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.
    =overflow-touchSets the style of a container so that it keeps momentum when scrolling on iOS devices.
    =overlay($offset: 0)Makes the element overlay its parent container, like the transparent modal background.
    =placeholderSets the styles of an input placeholder.
    =unselectableTurns the element unselectable. Used for buttons to prevent selection when clicking.
    67 | 68 |
    69 |

    这些 mixins 已经整合在 bulma 中可以使用，您也可以使用他们来扩展自己的样式。

    70 |
    71 |
    72 |
    73 | -------------------------------------------------------------------------------- /_data/backers.json: -------------------------------------------------------------------------------- 1 | { 2 | "100": [ 3 | { 4 | "FirstName": "Aaron", 5 | "LastName": "", 6 | "Twitter": "aequasi" 7 | } 8 | ], 9 | "30": [ 10 | { 11 | "FirstName": "Nazar", 12 | "LastName": "", 13 | "Twitter": "nazar_io" 14 | }, 15 | { 16 | "FirstName": "Garry", 17 | "LastName": "Newman", 18 | "Twitter": "" 19 | }, 20 | { 21 | "FirstName": "Adrian", 22 | "LastName": "Ocneanu", 23 | "Twitter": "" 24 | } 25 | ], 26 | "10": [ 27 | { 28 | "FirstName": "Emil", 29 | "LastName": "Sonesson", 30 | "Twitter": "" 31 | }, 32 | { 33 | "FirstName": "Patrick", 34 | "LastName": "Cool", 35 | "Twitter": "" 36 | }, 37 | { 38 | "FirstName": "Jon", 39 | "LastName": "Yongfook", 40 | "Twitter": "" 41 | }, 42 | { 43 | "FirstName": "Jan", 44 | "LastName": "Jan", 45 | "Twitter": "jankremlacek" 46 | }, 47 | { 48 | "FirstName": "Mohammed", 49 | "LastName": "bumonther", 50 | "Twitter": "" 51 | }, 52 | { 53 | "FirstName": "Corentin", 54 | "LastName": "Corentin", 55 | "Twitter": "viki53" 56 | }, 57 | { 58 | "FirstName": "Stanley", 59 | "LastName": "Eosakul", 60 | "Twitter": "" 61 | }, 62 | { 63 | "FirstName": "Leo", 64 | "LastName": "Zeba", 65 | "Twitter": "leozeba" 66 | }, 67 | { 68 | "FirstName": "Takayuki", 69 | "LastName": "Yamaguchi", 70 | "Twitter": "takyam" 71 | }, 72 | { 73 | "FirstName": "Kyu", 74 | "LastName": "", 75 | "Twitter": "" 76 | }, 77 | { 78 | "FirstName": "Matt", 79 | "LastName": "Swan", 80 | "Twitter": "" 81 | }, 82 | { 83 | "FirstName": "Jordan", 84 | "LastName": "Nemrow", 85 | "Twitter": "" 86 | }, 87 | { 88 | "FirstName": "Niklas", 89 | "LastName": "", 90 | "Twitter": "paradoxxger" 91 | }, 92 | { 93 | "FirstName": "Wikiki", 94 | "LastName": "", 95 | "Twitter": "" 96 | }, 97 | { 98 | "FirstName": "Peter", 99 | "LastName": "Ryszkiewicz", 100 | "Twitter": "" 101 | }, 102 | { 103 | "FirstName": "Michael", 104 | "LastName": "Schinis", 105 | "Twitter": "" 106 | } 107 | ] 108 | } 109 | -------------------------------------------------------------------------------- /_data/variables/components/dropdown.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "components", 3 | "file_name": "dropdown", 4 | "file_relative_path": "components/dropdown.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 14, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/dropdown.sass#L1,L14", 8 | "vars": { 9 | "dropdown-content-background-color": { 10 | "id": "dropdown-content-background-color", 11 | "name": "$dropdown-content-background-color", 12 | "value": "$white" 13 | }, 14 | "dropdown-content-arrow": { 15 | "id": "dropdown-content-arrow", 16 | "name": "$dropdown-content-arrow", 17 | "value": "$link" 18 | }, 19 | "dropdown-content-offset": { 20 | "id": "dropdown-content-offset", 21 | "name": "$dropdown-content-offset", 22 | "value": "4px" 23 | }, 24 | "dropdown-content-radius": { 25 | "id": "dropdown-content-radius", 26 | "name": "$dropdown-content-radius", 27 | "value": "$radius" 28 | }, 29 | "dropdown-content-shadow": { 30 | "id": "dropdown-content-shadow", 31 | "name": "$dropdown-content-shadow", 32 | "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)" 33 | }, 34 | "dropdown-content-z": { 35 | "id": "dropdown-content-z", 36 | "name": "$dropdown-content-z", 37 | "value": "20" 38 | }, 39 | "dropdown-item-color": { 40 | "id": "dropdown-item-color", 41 | "name": "$dropdown-item-color", 42 | "value": "$grey-dark" 43 | }, 44 | "dropdown-item-hover-color": { 45 | "id": "dropdown-item-hover-color", 46 | "name": "$dropdown-item-hover-color", 47 | "value": "$black" 48 | }, 49 | "dropdown-item-hover-background-color": { 50 | "id": "dropdown-item-hover-background-color", 51 | "name": "$dropdown-item-hover-background-color", 52 | "value": "$background" 53 | }, 54 | "dropdown-item-active-color": { 55 | "id": "dropdown-item-active-color", 56 | "name": "$dropdown-item-active-color", 57 | "value": "$link-invert" 58 | }, 59 | "dropdown-item-active-background-color": { 60 | "id": "dropdown-item-active-background-color", 61 | "name": "$dropdown-item-active-background-color", 62 | "value": "$link" 63 | }, 64 | "dropdown-divider-background-color": { 65 | "id": "dropdown-divider-background-color", 66 | "name": "$dropdown-divider-background-color", 67 | "value": "$border" 68 | } 69 | } 70 | } -------------------------------------------------------------------------------- /documentation/columns/nesting.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 列嵌套 3 | layout: documentation 4 | doc-tab: columns 5 | doc-subtab: nesting 6 | --- 7 | 8 | {% include subnav-columns.html %} 9 | 10 |
    11 |
    12 |

    列嵌套

    13 |

    通过一个简单方式创建 响应式的多列

    14 |
    15 | 16 |
    17 |

    18 | 你只要遵循以下结构，就可以在你的设计中灵活的嵌套 19 |

    20 |
      21 |
    • 22 | columns:顶层列 23 |
        24 |
      • 25 | column 26 |
          27 |
        • 28 | columns: 嵌套列 29 |
            30 |
          • 31 | column 更多... 32 |
            • 33 |
          34 |
          • 35 |
        36 |
        • 37 |
      38 |
      • 39 |
    40 |

    41 | 和 .is-multiline 所产生多行列的区别在于 HTML 代码显示的位置，缩小窗口后，所有蓝色列将显示在红色列上方。 42 |

    43 |
    44 | 45 |
    46 |
    47 |

    第一列

    48 |
    49 |
    50 |

    第一个嵌套

    51 |
    52 |
    53 |

    第二个嵌套

    54 |
    55 |
    56 |
    57 |
    58 |

    第二列

    59 |
    60 |
    61 |

    50%

    62 |
    63 |
    64 |

    Auto

    65 |
    66 |
    67 |

    Auto

    68 |
    69 |
    70 |
    71 |
    72 | 73 |
    74 |

    75 | 对于.is-multiline的多行列，每行间会产生间距 76 |

    77 |
    78 |
    79 |
    80 | -------------------------------------------------------------------------------- /_data/variables/base/generic.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "base", 3 | "file_name": "generic", 4 | "file_relative_path": "base/generic.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 19, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass#L1,L19", 8 | "vars": { 9 | "body-background-color": { 10 | "id": "body-background-color", 11 | "name": "$body-background-color", 12 | "value": "#fff" 13 | }, 14 | "body-size": { 15 | "id": "body-size", 16 | "name": "$body-size", 17 | "value": "16px" 18 | }, 19 | "body-rendering": { 20 | "id": "body-rendering", 21 | "name": "$body-rendering", 22 | "value": "optimizeLegibility" 23 | }, 24 | "body-family": { 25 | "id": "body-family", 26 | "name": "$body-family", 27 | "value": "$family-primary" 28 | }, 29 | "body-color": { 30 | "id": "body-color", 31 | "name": "$body-color", 32 | "value": "$text" 33 | }, 34 | "body-weight": { 35 | "id": "body-weight", 36 | "name": "$body-weight", 37 | "value": "$weight-normal" 38 | }, 39 | "body-line-height": { 40 | "id": "body-line-height", 41 | "name": "$body-line-height", 42 | "value": "1.5" 43 | }, 44 | "code-family": { 45 | "id": "code-family", 46 | "name": "$code-family", 47 | "value": "$family-code" 48 | }, 49 | "code-padding": { 50 | "id": "code-padding", 51 | "name": "$code-padding", 52 | "value": "0.25em 0.5em 0.25em" 53 | }, 54 | "code-weight": { 55 | "id": "code-weight", 56 | "name": "$code-weight", 57 | "value": "normal" 58 | }, 59 | "code-size": { 60 | "id": "code-size", 61 | "name": "$code-size", 62 | "value": "0.875em" 63 | }, 64 | "hr-background-color": { 65 | "id": "hr-background-color", 66 | "name": "$hr-background-color", 67 | "value": "$border" 68 | }, 69 | "hr-height": { 70 | "id": "hr-height", 71 | "name": "$hr-height", 72 | "value": "1px" 73 | }, 74 | "hr-margin": { 75 | "id": "hr-margin", 76 | "name": "$hr-margin", 77 | "value": "1.5rem 0" 78 | }, 79 | "strong-color": { 80 | "id": "strong-color", 81 | "name": "$strong-color", 82 | "value": "$text-strong" 83 | }, 84 | "strong-weight": { 85 | "id": "strong-weight", 86 | "name": "$strong-weight", 87 | "value": "$weight-bold" 88 | } 89 | } 90 | } -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | 70 | -------------------------------------------------------------------------------- /documentation/overview/modular.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 模块化 3 | layout: documentation 4 | doc-tab: overview 5 | doc-subtab: modular 6 | --- 7 | 8 | {% include subnav-overview.html %} 9 | 10 |
    11 |
    12 |

    模块化

    13 |

    只需导入你 需要 的东西

    14 | 15 |
    16 | 17 |
    18 |

    19 | Bulma 由 39 个 .sass 文件组成，您可以 单独 导入。 20 |

    21 |

    22 | 例如，您只需要 Bulma columns. 23 |
    24 | 该文件位于 bulma/sass/grid 文件夹中. 25 |
    26 | 只需要 导入 公共依赖，然后直接导入您需要的文件： 27 |

    28 | {% highlight sass %} 29 | @import "bulma/sass/utilities/_all" 30 | @import "bulma/sass/grid/columns" 31 | {% endhighlight %} 32 |

    33 | 现在您可以直接使用 .columns 类 (用于容器) 和 .column : 34 |

    35 | {% highlight html %} 36 |
    37 |
    1
    38 |
    2
    39 |
    3
    40 |
    4
    41 |
    5
    42 |
    43 | {% endhighlight %} 44 | 45 |
    46 | 47 |

    48 | 如果您只需要 button 样式呢? 49 |

    50 | {% highlight sass %} 51 | @import "bulma/sass/utilities/_all" 52 | @import "bulma/sass/elements/button.sass" 53 | {% endhighlight %} 54 |

    55 | 您现在可以使用 .button 类, 及其所有修饰符: 56 |

    57 |
      58 |
    • 59 | .is-active 60 |
      • 61 |
    • 62 | .is-primary, 63 | .is-info, 64 | .is-success... 65 |
      • 66 |
    • 67 | .is-small, 68 | .is-medium, 69 | .is-large 70 |
      • 71 |
    • 72 | .is-outlined, 73 | .is-inverted, 74 | .is-link 75 |
      • 76 |
    • 77 | .is-loading, 78 | [disabled] 79 |
      • 80 |
    81 | {% highlight html %} 82 | 83 | Button 84 | 85 | 86 | 87 | Primary button 88 | 89 | 90 | 91 | Large button 92 | 93 | 94 | 95 | Loading button 96 | 97 | {% endhighlight %} 98 |
    99 |
    100 |
    101 | -------------------------------------------------------------------------------- /documentation/overview/colors.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 颜色 3 | layout: documentation 4 | doc-tab: overview 5 | doc-subtab: colors 6 | colors: 7 | - white 8 | - black 9 | - light 10 | - dark 11 | - primary 12 | - link 13 | - info 14 | - success 15 | - warning 16 | - danger 17 | --- 18 | 19 | {% include subnav-overview.html %} 20 | 21 |
    22 |
    23 |

    Colors

    24 |

    大多数 Bulma 元素和组件的 颜色 和 风格

    25 | 26 |
    27 | 28 |
    29 |

    30 | 大多数元素和组件都可以使用 .is-$color 修饰符来改变颜色，例如 is-primary 或者 is-dark。 31 |

    32 |

    33 | 可以通过 $colors Sass map 来获得所有的颜色和他们的反色。 34 |

    35 |
    36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | {% for color in page.colors %} 50 | {% assign derivedColor = site.data.colors.derived | where: "id", color | first %} 51 | {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %} 52 | 53 | 56 | 59 | 62 | 65 | {% if derivedColor.invertValue %} 66 | 69 | 72 | {% elsif derivedColor.invertId %} 73 | {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %} 74 | 77 | 80 | {% endif %} 81 | 82 | {% endfor %} 83 | 84 |
    ColorVariableValueComputed valueInvert valueComputed invert value
    54 | {{ derivedColor.id | capitalize }} 55 | 57 | ${{ derivedColor.id }} 58 | 60 | ${{ initialColor.id }} 61 | 63 | {% include elements/color-square.html value=initialColor.value %} 64 | 67 | {{ derivedColor.invertValue }} 68 | 70 | {% include elements/color-square.html value=derivedColor.invertValue %} 71 | 75 | ${{ derivedColor.invertId }} 76 | 78 | {% include elements/color-square.html value=invertColor.value %} 79 |
    85 |
    86 |
    87 | -------------------------------------------------------------------------------- /_posts/2017-10-09-roses-are-red-links-are-blue.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Roses are red – Links are blue" 4 | introduction: "What's better than one tag? Multiple tags!" 5 | color: "link" 6 | name: "Roses are red
    Links are blue" 7 | icon: "tag" 8 | --- 9 | 10 | By default, a browser will display links in blue. Bulma has up until now used the `$primary` color as the `$link` color: 11 | 12 | ```sass 13 | // Old styles 14 | $link: $primary !default 15 | ``` 16 | 17 | But the _primary_ color is mostly used as the **brand** color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices: 18 | 19 | * the `$link` color defaults to `$blue` 20 | * `$info` is using the new `$cyan` color 21 | * `$link` has been added to the `$colors` map as well 22 | 23 | ```sass 24 | // New styles 25 | $link: $blue !default 26 | $info: $cyan !default 27 | ``` 28 | 29 |
    30 |
    31 | Deprecation warning 32 |
    33 |
    34 |

    35 | Because the modifier is-link for buttons already existed, it has been renamed to is-text. 36 |

    37 |
    38 |
    39 | 40 | As such, the following components are now **blue**: 41 | 42 | * [breadcrumb](/documentation/components/breadcrumb/) 43 | * [dropdown](/documentation/components/dropdown/) 44 | * [navbar](/documentation/components/navbar/) 45 | * [pagination](/documentation/components/pagination/) 46 | * [tabs](/documentation/components/tabs/) 47 | * [menu](/documentation/components/menu/) 48 | * [panel](/documentation/components/panel/) 49 | 50 | All Bulma elements and components that support **color** modifiers now support the `.is-link` color: 51 | 52 | ```html 53 |
    54 | Link notification. 55 |
    56 | 57 |
    58 | Info notification. 59 |
    60 | 61 | 64 | 65 | 68 | ``` 69 | 70 |
    71 | Link notification. 72 |
    73 | 74 |
    75 | Info notification. 76 |
    77 | 78 | 81 | 82 | 85 | 86 | If you want to use the `$primary` color for your links, just **customize** your Bulma setup by including these rules: 87 | 88 | ```sass 89 | $link: $primary !default 90 | $link-invert: $primary-invert !default 91 | $link-focus-border: $primary !default 92 | ``` -------------------------------------------------------------------------------- /_layouts/documentation.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | route: documentation 4 | --- 5 | 6 | {% include navbar.html id="Documentation" has_container=true %} 7 | 8 |
    9 |
    10 |
    11 |
    12 |
    13 |

    14 | 文档 15 |

    16 |

    17 | 当你使用 Bulma 创建一个网站 所需要的一切 18 |

    19 |
    20 |
    21 | {% include carbon.html %} 22 |
    23 |
    24 |
    25 |
    26 | 27 |
    28 |
    29 |
    54 |
    55 | 56 |
    57 | 58 | {{ content }} 59 | 60 |
    61 |
    62 |

    63 | 64 | Made with Bulma 65 | 66 |
    67 | 这是一个 开源项目. 68 | 错别字? Or 有疑问? 69 | 70 | 在GitHub上改进这个页面。 71 | 72 |

    73 |
    74 |
    75 | -------------------------------------------------------------------------------- /documentation/elements/delete.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Delete 3 | layout: documentation 4 | doc-tab: elements 5 | doc-subtab: delete 6 | --- 7 | 8 | {% capture cross_example %} 9 | 10 | {% endcapture %} 11 | 12 | {% capture cross_sizes_example %} 13 | 14 | 15 | 16 | 17 | {% endcapture %} 18 | 19 | {% capture cross_elements_example %} 20 |
    21 | 22 | Hello World 23 | 24 | 25 |
    26 | 27 |
    28 | 29 | Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit 30 |
    31 | 32 |
    33 |
    34 | Info 35 | 36 |
    37 |
    38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. 39 |
    40 |
    41 | {% endcapture %} 42 | 43 | {% include subnav-elements.html %} 44 | 45 |
    46 |
    47 |

    Delete

    48 |

    49 | 一个多功能的 删除 叉叉 50 |

    51 | {% 52 | include meta.html 53 | colors=false 54 | sizes=true 55 | variables=false 56 | %} 57 | 58 |
    59 | 60 |
    61 |

    62 | .delete 是一个独立元素，可以在不通的上下文中使用。 63 |

    64 |

    65 | 就其本身而言，它是一个带有叉叉的圆圈: 66 |

    67 |
    68 | 69 | {% include snippet.html content=cross_example %} 70 | 71 | {% include anchor.html name="Sizes | 尺寸" %} 72 | 73 |
    74 |

    75 | 它有 4 种尺寸: 76 |

    77 |
    78 | 79 | {% include snippet.html content=cross_sizes_example %} 80 | 81 | {% include anchor.html name="Combinations | 组合" %} 82 | 83 |
    84 |

    85 | Bulma 将他用于 tags、 notifications 和 messages: 86 |

    87 |
    88 | 89 | {% include snippet.html content=cross_elements_example %} 90 | 91 |
    92 |
    93 | -------------------------------------------------------------------------------- /_javascript/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | 3 | // Intro 4 | 5 | const introVideo = document.getElementById('introVideo'); 6 | const introIframe = document.getElementById('introIframe'); 7 | const introPlayer = new Vimeo.Player(introIframe); 8 | const npmClipboard = new Clipboard('#npmCopy'); 9 | 10 | introPlayer.ready().then(function() { 11 | introVideo.classList.add('has-loaded'); 12 | }); 13 | 14 | npmClipboard.on('success', function(e) { 15 | e.trigger.innerText = 'copied!'; 16 | e.trigger.classList.add('is-success'); 17 | setTimeout(() => { 18 | e.trigger.innerText = 'copy'; 19 | e.trigger.classList.remove('is-success'); 20 | }, 500); 21 | e.clearSelection(); 22 | }); 23 | 24 | npmClipboard.on('error', function(e) { 25 | e.trigger.innerText = 'error!'; 26 | e.trigger.classList.add('is-error'); 27 | setTimeout(() => { 28 | e.trigger.innerText = 'copy'; 29 | e.trigger.classList.remove('is-error'); 30 | }, 500); 31 | }); 32 | 33 | // Grid 34 | 35 | const $grid = document.getElementById('grid'); 36 | const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0); 37 | const $markup = document.querySelector('#markup code'); 38 | const $message = document.getElementById('message'); 39 | const $add = document.getElementById('add'); 40 | const $remove = document.getElementById('remove'); 41 | let showing = 5; 42 | 43 | function showColumns() { 44 | if (showing === 13) { 45 | $message.style.display = 'block'; 46 | } else { 47 | $message.style.display = 'none'; 48 | } 49 | 50 | showing = Math.min(Math.max(parseInt(showing), 2), 12); 51 | 52 | $columns.forEach($el => { 53 | $el.style.display = 'none'; 54 | }); 55 | $columns.slice(0, showing).forEach($el => { 56 | $el.style.display = 'block'; 57 | }); 58 | 59 | $markup.innerHTML = '<div class="columns">'; 60 | $markup.insertAdjacentHTML('beforeend', '\n'); 61 | 62 | for(let i = 0; i < showing; i++) { 63 | $markup.insertAdjacentHTML('beforeend', ' <div class="column">'); 64 | $markup.insertAdjacentHTML('beforeend', i + 1); 65 | $markup.insertAdjacentHTML('beforeend', '</div>'); 66 | $markup.insertAdjacentHTML('beforeend', '\n'); 67 | } 68 | 69 | $markup.insertAdjacentHTML('beforeend', '</div>'); 70 | } 71 | 72 | $add.addEventListener('click', () => { 73 | showing++; 74 | showColumns(); 75 | }); 76 | 77 | $remove.addEventListener('click', () => { 78 | showing--; 79 | showColumns(); 80 | }); 81 | 82 | }); 83 | -------------------------------------------------------------------------------- /_sass/love.sass: -------------------------------------------------------------------------------- 1 | .bd-love 2 | background-color: $background 3 | 4 | .bd-testimonials 5 | background-color: $background 6 | 7 | .bd-testimonial 8 | align-items: flex-start 9 | display: flex 10 | justify-content: center 11 | 12 | .bd-testimonial-tweet 13 | background-color: $white 14 | 15 | .bd-more-loves 16 | align-items: center 17 | display: flex 18 | justify-content: center 19 | margin-top: 1.5rem 20 | text-align: center 21 | .button 22 | height: auto 23 | padding: 0.75em 1.5em 24 | span 25 | transform-origin: center center 26 | transition: transform $speed $easing 27 | &:hover 28 | span 29 | transform: scale(1.04) 30 | 31 | +mobile 32 | .bd-testimonials 33 | padding: 1.5rem 34 | .bd-testimonial 35 | margin-bottom: 1.5rem 36 | 37 | +tablet 38 | .bd-testimonials 39 | padding: 3rem 40 | .bd-testimonial + .bd-testimonial 41 | margin-top: 1.5rem 42 | 43 | +desktop 44 | .bd-testimonials 45 | min-height: 595px 46 | 47 | +widescreen 48 | .bd-testimonials 49 | min-height: 653px 50 | 51 | +fullhd 52 | .bd-testimonials 53 | min-height: 632px 54 | 55 | .bd-rainbow 56 | animation: rainbow 8s ease infinite 57 | background-image: linear-gradient(124deg, $orange, $red, $purple, $blue) 58 | background-size: 800% 800% 59 | 60 | .hero.bd-is-love 61 | .title, 62 | .subtitle 63 | color: $white 64 | 65 | @keyframes rainbow 66 | 0% 67 | background-position: 1% 80% 68 | 50% 69 | background-position: 99% 20% 70 | 100% 71 | background-position: 1% 80% 72 | 73 | .bd-hug 74 | align-items: flex-start 75 | display: flex 76 | justify-content: center 77 | 78 | // .bd-embrace 79 | // background-color: $background 80 | // border-radius: $radius 81 | // padding: 1.5rem 82 | 83 | +mobile 84 | .bd-love 85 | padding: 1.5rem 86 | .bd-hug 87 | margin: 1.5rem 88 | .bd-embrace 89 | text-align: center 90 | &:not(:first-child) 91 | margin-top: 1.5rem 92 | &:not(:last-child) 93 | margin-bottom: 1.5rem 94 | .bd-embrace-button 95 | margin-top: 0.75rem 96 | 97 | +tablet 98 | .bd-love 99 | padding: 3rem 1.5rem 100 | .bd-embrace 101 | align-items: center 102 | display: flex 103 | justify-content: center 104 | &:not(:first-child) 105 | margin-top: 3rem 106 | &:not(:last-child) 107 | margin-bottom: 3rem 108 | .bd-embrace-button 109 | margin-left: 1.5rem 110 | .bd-hugs 111 | display: flex 112 | flex-wrap: wrap 113 | padding-bottom: 3rem 114 | .bd-hug 115 | margin-top: 1.5rem 116 | width: calc(33.3333% - 1rem) 117 | &:nth-child(1), 118 | &:nth-child(2), 119 | &:nth-child(3) 120 | margin-top: 0 121 | &:nth-child(3n-1), 122 | &:nth-child(3n) 123 | margin-left: 1.5rem 124 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | document.addEventListener('DOMContentLoaded', function () { 4 | 5 | // Intro 6 | 7 | var introVideo = document.getElementById('introVideo'); 8 | var introIframe = document.getElementById('introIframe'); 9 | var introPlayer = new Vimeo.Player(introIframe); 10 | var npmClipboard = new Clipboard('#npmCopy'); 11 | 12 | introPlayer.ready().then(function () { 13 | introVideo.classList.add('has-loaded'); 14 | }); 15 | 16 | npmClipboard.on('success', function (e) { 17 | e.trigger.innerText = 'copied!'; 18 | e.trigger.classList.add('is-success'); 19 | setTimeout(function () { 20 | e.trigger.innerText = 'copy'; 21 | e.trigger.classList.remove('is-success'); 22 | }, 500); 23 | e.clearSelection(); 24 | }); 25 | 26 | npmClipboard.on('error', function (e) { 27 | e.trigger.innerText = 'error!'; 28 | e.trigger.classList.add('is-error'); 29 | setTimeout(function () { 30 | e.trigger.innerText = 'copy'; 31 | e.trigger.classList.remove('is-error'); 32 | }, 500); 33 | }); 34 | 35 | // Grid 36 | 37 | var $grid = document.getElementById('grid'); 38 | var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0); 39 | var $markup = document.querySelector('#markup code'); 40 | var $message = document.getElementById('message'); 41 | var $add = document.getElementById('add'); 42 | var $remove = document.getElementById('remove'); 43 | var showing = 5; 44 | 45 | function showColumns() { 46 | if (showing === 13) { 47 | $message.style.display = 'block'; 48 | } else { 49 | $message.style.display = 'none'; 50 | } 51 | 52 | showing = Math.min(Math.max(parseInt(showing), 2), 12); 53 | 54 | $columns.forEach(function ($el) { 55 | $el.style.display = 'none'; 56 | }); 57 | $columns.slice(0, showing).forEach(function ($el) { 58 | $el.style.display = 'block'; 59 | }); 60 | 61 | $markup.innerHTML = '<div class="columns">'; 62 | $markup.insertAdjacentHTML('beforeend', '\n'); 63 | 64 | for (var i = 0; i < showing; i++) { 65 | $markup.insertAdjacentHTML('beforeend', ' <div class="column">'); 66 | $markup.insertAdjacentHTML('beforeend', i + 1); 67 | $markup.insertAdjacentHTML('beforeend', '</div>'); 68 | $markup.insertAdjacentHTML('beforeend', '\n'); 69 | } 70 | 71 | $markup.insertAdjacentHTML('beforeend', '</div>'); 72 | } 73 | 74 | $add.addEventListener('click', function () { 75 | showing++; 76 | showColumns(); 77 | }); 78 | 79 | $remove.addEventListener('click', function () { 80 | showing--; 81 | showColumns(); 82 | }); 83 | }); -------------------------------------------------------------------------------- /_data/variables/elements/table.json: -------------------------------------------------------------------------------- 1 | { 2 | "dir_name": "elements", 3 | "file_name": "table", 4 | "file_relative_path": "elements/table.sass", 5 | "file_line_from": 1, 6 | "file_line_to": 20, 7 | "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/table.sass#L1,L20", 8 | "vars": { 9 | "table-color": { 10 | "id": "table-color", 11 | "name": "$table-color", 12 | "value": "$grey-darker" 13 | }, 14 | "table-background-color": { 15 | "id": "table-background-color", 16 | "name": "$table-background-color", 17 | "value": "$white" 18 | }, 19 | "table-cell-border": { 20 | "id": "table-cell-border", 21 | "name": "$table-cell-border", 22 | "value": "1px solid $grey-lighter" 23 | }, 24 | "table-cell-border-width": { 25 | "id": "table-cell-border-width", 26 | "name": "$table-cell-border-width", 27 | "value": "0 0 1px" 28 | }, 29 | "table-cell-padding": { 30 | "id": "table-cell-padding", 31 | "name": "$table-cell-padding", 32 | "value": "0.5em 0.75em" 33 | }, 34 | "table-cell-heading-color": { 35 | "id": "table-cell-heading-color", 36 | "name": "$table-cell-heading-color", 37 | "value": "$text-strong" 38 | }, 39 | "table-head-cell-border-width": { 40 | "id": "table-head-cell-border-width", 41 | "name": "$table-head-cell-border-width", 42 | "value": "0 0 2px" 43 | }, 44 | "table-head-cell-color": { 45 | "id": "table-head-cell-color", 46 | "name": "$table-head-cell-color", 47 | "value": "$text-strong" 48 | }, 49 | "table-foot-cell-border-width": { 50 | "id": "table-foot-cell-border-width", 51 | "name": "$table-foot-cell-border-width", 52 | "value": "2px 0 0" 53 | }, 54 | "table-foot-cell-color": { 55 | "id": "table-foot-cell-color", 56 | "name": "$table-foot-cell-color", 57 | "value": "$text-strong" 58 | }, 59 | "table-row-hover-background-color": { 60 | "id": "table-row-hover-background-color", 61 | "name": "$table-row-hover-background-color", 62 | "value": "$white-bis" 63 | }, 64 | "table-row-active-background-color": { 65 | "id": "table-row-active-background-color", 66 | "name": "$table-row-active-background-color", 67 | "value": "$primary" 68 | }, 69 | "table-row-active-color": { 70 | "id": "table-row-active-color", 71 | "name": "$table-row-active-color", 72 | "value": "$primary-invert" 73 | }, 74 | "table-striped-row-even-background-color": { 75 | "id": "table-striped-row-even-background-color", 76 | "name": "$table-striped-row-even-background-color", 77 | "value": "$white-bis" 78 | }, 79 | "table-striped-row-even-hover-background-color": { 80 | "id": "table-striped-row-even-hover-background-color", 81 | "name": "$table-striped-row-even-hover-background-color", 82 | "value": "$white-ter" 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /_includes/examples/navbar-bottom.html: -------------------------------------------------------------------------------- 1 | 75 | --------------------------------------------------------------------------------