EzDev.org

bulma

bulma - Modern CSS framework based on Flexbox Bulma: a modern CSS framework based on Flexbox bulma is an open source css framework based on flexbox and built with sass. it's 100% responsive, fully modular, and available for free.


Flex container width fit content width

Having issues fitting parent flex container width to a child's flex container content width.

Using Bulma, I have the following HTML structure

    .signup-form {
      display:inline-flex;
      align-items: center;
    }
    <div class="body">
    <div class="is-active modal">
    
        <div class="modal-background">
        </div>
    
        <div class="modal-card signup-form">

          <header class="modal-card-head has-text-centered">
            <button class="delete"></button>
            <p class="modal-card-title">Title</p>
          </header>
    
          <section class="modal-card-body">
            <input class="input" placeholder="Name"/ >
            <input class="input" placeholder="Phone Number"/ >
            <input class="input" placeholder="Email"/ >
            <input class="input" placeholder="Address"/ >
          </section>
    
          <footer class="modal-card-foot">
            <nav class="page-control level has-text-centered is-mobile">
              <a class="button is-small is-info">
                Next
              </a>
            </nav>
          </footer>
    
        </div>
      </div>
    </div>

But it ends up applying to all children flex containers, as you can see here:

http://codepen.io/anon/pen/mWqRxW

How do I fix this, and make the parent flex container fit to the width of the child flex container (in this case the width of the inputs)?


Source: (StackOverflow)

How to customize bulma variables in rails

I'm using the bulma rails gem and I Want to customize some of the variables it uses, specifically the font color.

According to the bulma docs http://bulma.io/documentation/overview/customize/ I should do something like this:

// 1. Import the initial variables
@import "../sass/utilities/initial-variables"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink and its invert
$pink: #ffb3b3
$pink-invert: #fff
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

However I'm not sure how to make that work with the rails gem I'm using.

Currently my application.css file looks like this:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bulma";

which works fine. However if I change it to be like the example in the bulma docs it no longer works even when changing @import "../bulma" to @import "bulma" and @import "../sass/utilities/initial-variables" to @import "sass/utilities/initial-variables"

I guess the problem here is with that first import of the variables but I can't figure out how to import it. Here's the file in the gem: https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass

Thanks!


Source: (StackOverflow)

Bulma's navbar-buger doesnt connect to menu items in Vue.js 2

I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.

<template>
<div class="container is-fluid">
    <div>
      <nav class="navbar is-dark">
        <div class="navbar-brand">
          <a class="navbar-item" rel='nofollow' href="#">
              <img  alt="K R O N O S" height="100px">
          </a>
          <div class="button navbar-burger" data-target="navMenu">
              <span></span>
              <span></span>
              <span></span>
        </div>
        </div>
        <div class="navbar-menu" id="navMenu">
          <div class="navbar-end">
            <div class="navbar-item">
              <a class="" rel='nofollow' href="#"> Docs </a>
            </div>
            <div class="navbar-item ">
              <a class="" rel='nofollow' href="#"> Report </a>
            </div>
            <div class="navbar-item">
              <a class="">More</a>
            </div>
            <div class="navbar-item">
              <a class="">Logout</a>
            </div>
        </div>
      </div>
    </nav>
  </div>
</div>
</template>

<script>

document.addEventListener('DOMContentLoaded', function () {
  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {
    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {
        // Get the target from the "data-target" attribute
        var target = $el.dataset.target
        var $target = document.getElementById(target)

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active')
        $target.classList.toggle('is-active')
      })
    })
  }
})
export default {
  name: 'Navbar',
  data () {
    return {
      msg: ''
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  border: 0px solid black;
}
</style>

As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.


Source: (StackOverflow)

b-input name attribute not working buefy

I want to put a name="name" attribute in a buefy input control. I have so far, not managed to make it work.

<b-field label="Fullname">
   <b-input
      value=""
      icon="face"
      name="name">
   </b-input>
</b-field>

It sends empty values and I get an error in laravel:

"Column 'name' cannot be null"

It worked when I tried using a native html input control.

I have also tried using developer tools to inspect the DOM, it appears, the b-input control does not have a name.

How do I solve this?

Edit: I had vue@2.1.10 and for buefy you need 2.4, that's why I got this bug. Sorry, my bad.


Source: (StackOverflow)

customizing bulma with react

Hey guys been at it for awhile trying to customize the bulma default colors ive installed node-sass and it appears to be working and in my root scss file ive written the script

@import '../node_modules/bulma/sass/utilities/initial-variables.sass';

$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;

@import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;

@import '../node_modules/bulma/css/bulma.css'

However this does not appear to be changing the primary color in my project or the primary font choice. Ive imported this file into my index.js file on react and bulma is definitely working just not accepting my customizations. any help very appreciated Thanks

Update heres the link to the bulma docs describing how to do this http://bulma.io/documentation/overview/customize/ I tried it that way with no success as well


Source: (StackOverflow)

Buefy not working

I want to put a simple buefy checkbox in a login page but it's not showing (it's shows just the text "Remember me").I want to use buefy with Laravel, and bulma of course. I already try to change the versions but it's not working. Login page:

@extends('layouts.app')

@section('content')

<div id="app">

<div class="columns m-t-75">
    <div class="column is-one-third is-offset-one-third">
        <div class="card">
            <div class="card-header-title">
                <h1 class="title" style="font-weight: 100">Log in</h1>
            </div>

            <div class="card-content">
                <div class="field">
                    <label for="email" class="label">Email Adress</label>
                    <div class="control">
                        <input type="email" class="input" name="email" id="email">
                    </div>
                </div>
                <div class="field">
                    <label for="email" class="label">Password</label>
                    <div class="control">
                        <input type="password" class="input" name="password" id="password">
                    </div>
                </div>

                <b-checkbox name="remember">Remember me</b-checkbox>

                <button class="button is-success is-outlined is-fullwidth">Log in</button>
            </div>
        </div>
    </div>
</div>

</div>

@endsection

Footer

    <!-- Scripts -->
    <script src="{{ asset('/js/app.js') }}"></script>
    </body>
    </html>

app.js

require('./bootstrap');

window.Vue = require('vue');
import Buefy from 'buefy'

Vue.use(Buefy);

package.json

"devDependencies": {
    "axios": "^0.16.2",
    "buefy": "^0.5.3",
    "bulma": "^0.5.3",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
},
"dependencies": {
    "font-awesome": "^4.7.0"
}

Source: (StackOverflow)

How do I center my Navbar?

I looked on here before, but nothing really worked. I am using Bulma Framework which I believe is relatively unheard of, yet I was hoping you could help me center the brand link on the navbar. This is what I have it at right now:

.navbar {
  background-color: #0a0a0a;
  color: white;
  height: 9%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  color: white;
  font-family: 'Wavehaus';
}

I have a link on Codepen so that it can be visualized:

https://codepen.io/anon/pen/BwrWwg

Note that the font will not show up.


Source: (StackOverflow)

Organise parent and child navigation into global layout

Let me just give you a brief introduction to the question, I'm going to be having about 20 pages on my website once a user logs in, I need to organise these pages to use the same header, so I've come to the decision to use a layout as I'm using Laravel framework, it seemed stupid to have the same header spread across the 20 pages, if I wanted to make a change it would be hell.

In Bootstrap, I didn't add any kind of active class to any of the selected pages, it was just a navigation bar, I've recently upgraded to the Bulma framework where it requires an active class on the parent tab to show the child tabs, sort of a parent and sub categorys system going on.

I'm not sure how to handle this in the Layout, I need to add an active class and I also need to choose which sub navigation to show.

I've added my code below, I was wondering if anyone could tell me how I can approach this?

The below code is my whole page, including the header (the <section class="hero is-danger inside-header">)

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>{{ config('app.name') }} - Login</title>
    <link rel="stylesheet" rel='nofollow' href="assets/public/1.0/frontend/css/bulma.css?id={{ time() }}" type="text/css">
    <link rel="stylesheet" rel='nofollow' href="assets/public/1.0/frontend/css/override.css?id={{ time() }}" type="text/css">
    <link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="inside">
    <section class="hero is-danger inside-header">
        <div class="hero-body">
            <div class="container">
                <div class="columns is-vcentered">
                    <div class="column is-5">
                        <p class="title header-title">Introducing {{ config('app.name') }}</p>
                        <p class="subtitle">Interacting with others...</p>
                    </div>
                    <div class="column is-3"></div>
                    <div class="column is-4">
                        <a class="button is-danger is-large is-disabled join-game-button">
                            <i class="fa fa-sign-in"></i> &nbsp;&nbsp;Join Game
                        </a> 
                        <a class="button is-success is-large is-disabled users-online-button">
                            <i class="fa fa-users"></i> &nbsp;&nbsp;10
                        </a>
                        <br><br>
                        <a class="button is-success is-large is-disabled platform-button">Platform: Closed Beta</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-foot">
            <div class="container">
                <nav class="tabs is-boxed">
                    <ul>
                        <li class="is-active">
                            <a rel='nofollow' href="/documentation/overview/start/">
                                <i class="fa fa-user"></i> &nbsp;&nbsp;{{ Auth::user()->username }}
                            </a>
                        </li>
                        <li>
                            <a rel='nofollow' href="http://bulma.io/documentation/modifiers/syntax">
                                <i class="fa fa-university"></i> &nbsp;&nbsp;Business
                            </a>
                        </li>
                        <li>
                            <a rel='nofollow' href="http://bulma.io/documentation/columns/basics">
                                <i class="fa fa-user-secret"></i> &nbsp;&nbsp;Gangs
                            </a>
                        </li>
                        <li>
                            <a rel='nofollow' href="http://bulma.io/documentation/elements/box/">
                                <i class="fa fa-users"></i> &nbsp;&nbsp;Community
                            </a>
                        </li>
                        <li>
                            <a rel='nofollow' href="http://bulma.io/documentation/components/breadcrumb/">
                                <i class="fa fa-shopping-cart"></i> &nbsp;&nbsp;Store
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </section>
    <nav class="navbar has-shadow">
        <div class="container">
            <div class="navbar-tabs">
                <a class="navbar-item is-tab is-active" rel='nofollow' href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" rel='nofollow' href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" rel='nofollow' href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" rel='nofollow' href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" rel='nofollow' href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" rel='nofollow' href="http://bulma.io/documentation/overview/modular/">Security</a>
            </div>
        </div>
    </nav>
    <div class="container holorp-container-fixed">
        <br>
        <div class="columns is-desktop">
            <div class="column is-8">
                <div class="message is-danger">
                    <div class="message-body">
                        <p>not sure what can even go here...</p>
                    </div>
                </div>
            </div>
            <div class="column is-4">
                <div class="message is-success">
                    <p class="message-header">Change Log <span class="is-pulled-right"><i class="fa fa-user"></i></span></p>
                    <div class="message-body">
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Updates the platform with a fresh design</code><br>
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Upgraded from Laravel 5.4 to 5.5</code><br>
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Added core features to the admin panel</code><br>
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Did something, can't even remember</code><br>
                        <br>
                        <p><a class="modal-button" data-target="#modal-forgotPassword" id="forgot-pw-modal">View all recent changes</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Source: (StackOverflow)

Bulma overlapping items

I'm using bulma.css for a layout, but when I give a border to something I've found its overlapping.

Here is the overlap:

enter image description here

The .shop div seems 'as expected'

enter image description here

But the .basket div seems to be creeping up a bit.

enter image description here

Here is a link to a demo

And Html:

<div id="app">
  <div class="container">
    <div class="shop">
      <div class="columns">
        <div class="column is-one-quarter product">
          <h3 class="title is-4">Cat</h3>
          <p>
            £<span>2.99</span></p>
          <div><button class="button">Add to basket</button></div>
        </div>
        <div class="column is-one-quarter product">
          <h3 class="title is-4">Dog</h3>
          <p>
            £<span>4.00</span></p>
          <div><button class="button">Add to basket</button></div>
        </div>
      </div>
    </div>
    <div class="basket">
      <h1>Basket</h1>
      <table class="table">
        <thead>
          <tr>
            <td>Item</td>
            <td>Quantity</td>
            <td>Price</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="3">No items in the basket</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS:

// All of bulma.css
html,body{
  height:100%;
  padding:20px;
}

.product{
  box-sizing:border-box;
  border:2px solid #eaeaea;
  padding:20px;
}

I think its something to do with ... flexbox? I'm not sure!


Source: (StackOverflow)

Using bulma together with webpack

I have this really simple webpack projects in with I now want to also use bulma a css framework.

I installed the package via npm i bulma and tried to include it inside my app.js-file using the following snipped unsuccessfully:

import bulma from '~bulma/bulma.sass';

I also tried using a specific sass part, which also did not work:

import bulma from '~bulma/sass/base/_all';

Can you help me get this working or maybe point me in the right direction?


Source: (StackOverflow)

Angular 4 *ngFor adding a row div every third column

I am using Angular 4 with the bulma css framework and I am wondering how I can add a new row (or columns class) every third column.

The index variable which prints out 0,1,2 0,1,2 etc. was when I looking at a snippet when using bootstrap.

Noticed some comments on maybe I can use the template syntax but didn't get that to work either.

<div class="columns">
    <div class="column is-one-third" *ngFor="let item of items | async; let index = index">
      <app-item-details [item]='item '></app-item-details>
      {{ index % 3 }}
    <div class="is-clearfix" *ngIf="index % 3 == 0"></div>
  </div>
</div>

Source: (StackOverflow)

Bulma Inconsistent Input Width

enter image description hereI have a simple form that is using the Bulma framework. I am getting inconsistent input widths and can't find a remedy. https://jsfiddle.net/onzpum90/ It seems to happen when the labels are long. If I kept short labels the problem is gone. Why is the label affecting the input width? May be a flexbox issue that I am not familiar with. Anyone know of a solution?

<form action="">
<div class="field">
<div class="field-body">
  <div class="field">
    <p class="control is-expanded">
      <label class="label">A very long label for a form</label> 
      <input type="text" name="" value="" class="input ">
     </p>
  </div> 
  <div class="field is-grouped">
    <p class="control is-expanded">
      <label class="label">Email</label>
      <input type="email" name="email" value="" class="input ">
    </p>
  </div>
  </div>
 </div>
 <div class="field is-horizontal">
<div class="field-body">
  <div class="field">
    <p class="control is-expanded">
      <label class="label">Short Label</label> 
      <input type="text" name="" value="" class="input ">
     </p>
  </div> 
  <div class="field is-grouped">
    <p class="control is-expanded">
      <label class="label">Email</label>
      <input type="email" name="email" value="" class="input ">
    </p>
   </div>
  </div>
 </div>
</form>

Source: (StackOverflow)

Centering vertically text in different divs

I'm currently using the Bulma CSS framework to style part of my dashboard page, one feature is a 'Widgets' feature that has three big containers that show key facts (e.g. the number of sales, new customers etc...).

The problem I'm having is that each 'title' is a different length, forcing the figure to be at a different height, ideally the 'figure' would be at the same level across all three DIVS.

Screenshot of tiles

If there's a way to align the figures in CSS that'd be great! Thank you in advance for your help.

Example mockup, achieved by shortening the title:

Example tiles mockup

/* Big Figure DIV for Associate Page */
.tile-title{
  margin-bottom:0 !important;
}

.bigFigure{
  margin: 7.5px auto;
}

.bigFigure p{
  text-align: center;
  font-size: 3rem;
}
<link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css" rel="stylesheet">

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child notification is-success">
      <p class="tile-title title is-5">New Customers</p>
      <div class="bigFigure">
        <p>4</p>
      </div>
      <small>You've captured 4 new customers in the last 7 days!</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-warning">
      <p class="tile-title title is-5">New Orders</p>
      <div class="bigFigure">
        <p>0</p>
      </div>
      <small>There haven't been any orders in the last 7 days.</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-danger">
      <p class="tile-title title is-5">Orders that delayed for shipping</p>
      <div class="bigFigure">
        <p>5</p>
      </div>
      <small>There are 5 order(s) that require shipping.</small>
    </article>
  </div>
</div>


Source: (StackOverflow)

Bulma: Change stack order of columns

How can I change the stack order of columns on mobile or tablet?

For example, it's horizontal on wide screens, but when it shrinks I want 2 to be on top. I don't want to change a html structure to do it.

Working Example is below:

<link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>


Source: (StackOverflow)

Bulma: How do you center a button in a box?

<div class="box">
 <button class="button">Center me</button>
</div>

<button class="is-center"> is not working.


Source: (StackOverflow)