Code Monkey home page Code Monkey logo

bulma's Introduction

Bulma is a modern CSS framework based on Flexbox.

Github npm npm Awesome Join the chat at https://gitter.im/jgthms/bulma Build Status

Bulma: a Flexbox CSS framework

Quick install

Bulma is constantly in development! Try it out now:

NPM

npm install bulma

or

Yarn

yarn add bulma

Bower

bower install bulma

Import

After installation, you can import the CSS file into your project using this snippet:

@import 'bulma/css/bulma.css'

CDN

https://www.jsdelivr.com/package/npm/bulma

Feel free to raise an issue or submit a pull request.

CSS only

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

Browser Support

Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Internet Explorer (10+) is only partially supported.

Documentation

The documentation resides in the docs directory, and is built with the Ruby-based Jekyll tool.

Browse the online documentation here.

Related projects

Project Description
Bulma with Attribute Modules Adds support for attribute-based selectors
Bulma with Rails Integrates Bulma with the rails asset pipeline
BulmaRazor A lightweight component library based on Bulma and Blazor.
Vue Admin (dead) Vue Admin framework powered by Bulma
Bulmaswatch Free themes for Bulma
Goldfish (read-only) Vault UI with Bulma, Golang, and Vue Admin
ember-bulma Ember addon providing a collection of UI components for Bulma
Bloomer A set of React components for Bulma
React-bulma React.js components for Bulma
Buefy Lightweight UI components for Vue.js based on Bulma
vue-bulma-components Bulma components for Vue.js with straightforward syntax
BulmaJS Javascript integration for Bulma. Written in ES6 with a data-* API
Bulma-modal-fx A set of modal window effects with CSS transitions and animations for Bulma
Bulma Stylus Up-to-date 1:1 translation to Stylus
Bulma.styl (read-only) 1:1 Stylus translation of Bulma 0.6.11
elm-bulma Bulma + Elm
elm-bulma-classes Bulma classes prepared for usage with Elm
Bulma Customizer Bulma Customizer – Create your own bespoke Bulma build
Fulma Wrapper around Bulma for fable-react
Laravel Enso SPA Admin Panel built with Bulma, VueJS and Laravel
Django Bulma Integrates Bulma with Django
Bulma Templates Free Templates for Bulma
React Bulma Components Another React wrap on React for Bulma.io
purescript-bulma PureScript bindings for Bulma
Vue Datatable Bulma themed datatable based on Vue, Laravel & JSON templates
bulma-fluent Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System
csskrt-csskrt Automatically add Bulma classes to HTML files
bulma-pagination-react Bulma pagination as a react component
bulma-helpers Functional / Atomic CSS classes for Bulma
bulma-swatch-hook Bulma swatches as a react hook and a component
BulmaWP (read-only) Starter WordPress theme for Bulma
Ralma Stateless Ractive.js Components for Bulma
Django Simple Bulma Lightweight integration of Bulma and Bulma-Extensions for your Django app
rbx Comprehensive React UI Framework written in TypeScript
Awesome Bulma Templates Free real-world Templates built with Bulma
Trunx Super Saiyan React components, son of awesome Bulma
@aybolit/bulma Web Components library inspired by Bulma and Bulma-extensions
Drulma Drupal theme for Bulma.
Bulrush A Bulma-based Python Pelican blog theme
Bulma Variable Export Access Bulma Variables in Javascript/Typescript in project using Webpack
Bulmil An agnostic UI components library based on Web Components, made with Bulma & Stencil.
Svelte Bulma Components Library of UI components to be used in Svelte.js or standalone.
Bulma Nunjucks Starterkit Starterkit for Nunjucks with Bulma.
Bulma-Social Social Buttons and Colors for Bulma
Divjoy React codebase generator with Bulma templates
Blazorise Blazor component library with the support for Bulma CSS framework
Oruga-Bulma Bulma theme for Oruga UI
@bulvar/bulma Bulma with CSS Variables support
@angular-bulma Angular directives and components to use in your Bulma projects
Bulma CSS Class Completion CSS class name completion for the HTML class attribute based on Bulma CSS classes.
Crispy-Bulma Bulma template pack for django-crispy-forms
CASE CASE is Lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK
Reactive Bulma A component library based on React, Bulma, Typescript and Rollup

Copyright and license Github

Code copyright 2023 Jeremy Thomas. Code released under the MIT license.

bulma's People

Contributors

aldi avatar benolot avatar bstashio avatar come2daddy avatar connectkushal avatar damanwiththeplan avatar dangowans avatar danielbayerlein avatar diomed avatar dylankjy avatar feute avatar jaberwiki avatar jgthms avatar kaangokdemir avatar kennedybaird avatar log1x avatar lucperkins avatar mna avatar muhnad avatar nguyenyou avatar oleksiipotiekhin avatar patrickblackjr avatar saboteur777 avatar service-paradis avatar termosa avatar tiagoefmoraes avatar timacdonald avatar tomhrtly avatar werthen avatar wikiki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bulma's Issues

dropdown shows dots when clicked

In additon to #54 (on not/incorrectly styled checkbox and radio input), the dropdown appears beautifully, but shows dots around the word "Dropdown" when clicked.
screenshot from 2016-02-08 13 58 28

My browser is:

  • Application Name: Netscape
  • Code Name: Mozilla
  • Version: 5.0 (X11)
  • User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:44.0) Gecko/20100101 Firefox/

checkbox and radio button not styled

The <input type="checkbox"> and <input type="radio"> are not properly styled.
Screenshot:
screenshot from 2016-02-08 13 51 18

They appear to be default style.

My browser:

  • Application Name: Netscape
  • Code Name: Mozilla
  • Version: 5.0 (X11)
  • User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:44.0) Gecko/20100101 Firefox/

Columns modifiers not documented

The site currently has column modifiers (is-2, is-3, etc) documented but none of the columns modifiers (is-gapless, is-grid). Initially, I was trying to layout a row of elements using 3 columns of is-5, is-5, and is-2 modifiers. The columns ended up having a total width larger than 100% because of the margin gap between each column. It wasn't until I dove into the sass files that I found some of the modifiers like is-gapless and is-grid. These still aren't super intuitive but need to be added to documentation nonetheless.

Browser support?

Loving the framework. What is the browser support please? I take it it is IE10+ ?

Thanks

Accessibility Issues

Hello,

(Just to note, really loving the Flexbox concept, and the polish of the site)

There are some major accessibility issues in this project, some could be implemented quite easily:

  • Roles missing, eg: Notifications require role="alert"
  • Aria actions missing, eg: labels on close buttons
  • Colors too washed out, default fail contrast accessibility (Including is-dark tags)
  • HTML syntax is invalid, eg: <a class="button">Button</a> - Links are not buttons

Some would probably fall onto the user (eg the html syntax, as this is a CSS framework?), these are some key points I look into when it comes to boilerplate resources. I'd be expecting some users/clients going at the use "as-is" approach and then we have a world that forgets accessibility.

Any there plans to address some of these, at least the colours, providing an extra tag for high contrast, or would it be down to the user to modify the variables.sass file?

Fix inconsistency in Titles documentation

In the Titles section of the documentation, the code preview for titles show each title in a heading tag (h1, h2, h3, etc), but the titles themselves are in paragraph tags. This seems misleading as it doesn't properly illustrate the margins, etc. that result from using actual heading tags.

Body shifted like 10 pixels to the left

I have this issue on Codepen that makes the body shift to the left by approximately 10 pixels leaving a gray vertical bar on the right side. I'm using the codepen.io editor.

Header's header-toggle

I am trying to figure out what this is supposed to do. In the documentation it just contains three empty <span>s. Adding content to the .header-toggle element just messes things up.

gitter

please make a gitter support chat

Project Roadmap

This is a great project a that still not have a v1. And I was wondering when you guys are planing on releasing v1? In order for other projects like WordPress and Drupal to use this as theme they will need a major/stable release.

Maybe in the future I build Drupal base theme but without a major/stable version does not make sense to build base on IMO.

I propose to create a issues in Github base on the new features/improvements/bugs to the framework and add milestone to it. Base on the next version that feature might be include it.

Webpack

Has anyone had issues loading with Webpack?

Seems the only way to get the sass to load is to modify the bulma.sass main entry point

@charset "UTF-8";

@import "bulma/utilities/utilities";
@import "bulma/config/variables";
@import "bulma/config/generated-variables";
@import "bulma/base/base";
@import "bulma/elements/elements";
@import "bulma/components/components";
@import "bulma/layout/layout";

NPM

Will you be releasing this as an npm module anytime soon? I would love to try the full framework out, but trying to stay away from Bower.

Modifiers for form elements

Would be nice to have .is-primary, .is-info, .is-success, .is-warning and .is-danger as .control modifiers.

Offsets

Hello, your framework it's fine, but I need offsets columns in my grid... this is possible?
I would like use in a grid in first row two columns width photos and in the next row only one column (is-8) in center without others columns by example..

Example bootstrap:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Thanks!

flex-wrap support on grids?

Great library btw.

It would be nice to set specific column items of a certain width, and have them wrap around when you add an infinite amount of them, is this possible?

Modal window component

Hey, this project looks great.

Just a suggestion for a new component: modal windows. This is the components I use the most in twitter bootstrap and like me many people so it would be great to have one in bulma. It should have a header with a title and an optional close icon, a body and a footer with buttons.

PS: awesome project

Request: Add Browser Compatibility Info

Would be great to know how well this is supported. Obviously the use of flexbox already pushes up to IE10+ and alike. Also I think is something to boast about.

Just desktop and mobile breakpoints on the grid?

Hey,

I just looked over the docs and saw there is only a desktop view and a mobile view (all columns under each other).

Any reasons why you provide no breakpoints for mobile, tablet and desktop like bootstrap?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.