jgthms/bulma

Modern CSS framework based on Flexbox

Neil Duffy

@skiv71

will i have to ditch the navbar has use a banner of sorts, instead?

nUKEmAN4

@nUKEmAN4

a data attribute

Users can change that information in inspect element like when reply to comment

Cryoten

@cryoten

When using a menu list, how would I go about adding an anchor to the right hand side of each li? So far, I have this which is near what I want... but I want the first anchor to be expanded.

<li>
    <div class="field has-addons">
        <a class="is-active">foo</a>
        <a class="is-small is-primary">
            <span class="icon is-small">
                <i class="fas fa-minus"></i>
            </span>
        </a>
    </div>
</li>

Adding flex-grow: 1 to the first anchor does the trick, but perhaps that's not the most appropriate way. For now, I'll do that with a temporary bit of inline css while I wait to see if anyone can come up with a better solution.

Neil Duffy

@skiv71

just heads up, my new app is fully responsive now - feedback welcome https://smartpoll.io/vote?poll=NO5Z8FRbjxWitd2jBWLO

Patryk Szylin

@Patryk-Szylin

Has anyone realized that buefy is missing the "is-fluid" modifier on the container class? Or am I doing something wrong ?

Jannik Malken

@MannikJ

Hi! Maybe this is a stupiud question, but how can I disable any action (hover, file choose dialog) of a file input with name most easily? I am using it wrapped inside a vue base component.

<div class="file has-name is-fullwidth">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

Marco Aceti

@MarcoBuster

hi guys! I am using .sass
I have imported the "tiles" component:

@import "bulma/sass/grid/tiles"

and I have copied the first example from https://bulma.io/documentation/layout/tiles/ but it's not working

I see this: https://i.imgur.com/QUIOFcQ.png

as the tiles component is not imported.

the examlpe code:

<div class="container">
        <div class="tile is-ancestor">
            <div class="tile is-vertical is-8">
                <div class="tile">
                    <div class="tile is-parent is-vertical">
                        <article class="tile is-child notification is-primary">
                            <p class="title">Vertical...</p>
                            <p class="subtitle">Top tile</p>
                        </article>
                        <article class="tile is-child notification is-warning">
                            <p class="title">...tiles</p>
                            <p class="subtitle">Bottom tile</p>
                        </article>
                    </div>
                    <div class="tile is-parent">
                        <article class="tile is-child notification is-info">
                            <p class="title">Middle tile</p>
                            <p class="subtitle">With an image</p>
                            <figure class="image is-4by3">
                                <img src="https://bulma.io/images/placeholders/640x480.png">
                            </figure>
                        </article>
                    </div>
                </div>
                <div class="tile is-parent">
                    <article class="tile is-child notification is-danger">
                        <p class="title">Wide tile</p>
                        <p class="subtitle">Aligned with the right tile</p>
                        <div class="content">
                            <!-- Content -->
                        </div>
                    </article>
                </div>
            </div>
            <div class="tile is-parent">
                <article class="tile is-child notification is-success">
                    <div class="content">
                        <p class="title">Tall tile</p>
                        <p class="subtitle">With even more content</p>
                        <div class="content">
                            <!-- Content -->
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>

maybe I need to add some other component from the sass?

if I import the complete bulma.css file it works. what I've missed?

vxfil

@vxfil

hi guys, please help center this block vertically, it centers perfectly horizontally, but I can't seem to center it vertically

<div className="columns is-desktop is-centered is-vcentered">
      <div className="column is-one-quarter">
        <div className="box">
          // code...
        </div>
      </div>
</div>

Abner Soares Alves Junior

@abnersajr

I'm having issues to properly build Bulma locally for developer purposes. I'm following what is in the readme but isn't working properly.

The changes made in the Bulma root folder isn't reflecting in the docs.
With npm run start in root folder this happens when I save my file:

  "status": 1,
  "file": "/Users/abner/Projects/bulma/sass/form/checkbox-radio.sass",
  "line": 9,
  "column": 12,
  "message": "Undefined variable: \"$input-hover-color\".",
  "formatted": "Error: Undefined variable: \"$input-hover-color\"

Matt

@duartemvix

Omg I love bulma I finally found our hub

Dmitry

@xotonic

Would that be a good idea to have an issue to replace img tags in documentation from being void elements to their closed variation? eg

<img src="..." > => <img src="..." />

Why? Because JSX doesn't recognize void elements and fails to compile sample snippets

index.js: Expected corresponding JSX closing tag for <img> (152:20)

  150 |                     <p className="image is-32x32">
  151 |                       <img src="https://bulma.io/images/placeholders/128x128.png">
> 152 |                     </p>
      |                     ^

xlcrr

@xlcrr

Anyone looking to help an open source project ? For the last few years, I have been empowering people to map litter. https://github.com/OpenLitterMap/openlittermap-web is now open source

Armaan A

@Armster15

How can I change the default color of the placeholder of a the input element?

Marek Alexa

@coding_hedgehog_gitlab

Funny, I joined this group to ask question and from what I can see nobody's question got answer for a while. No need to waste time then.

Kaitlyn Kenwell

@Redrield

Is there a way to exclude an item from being placed in the navbar hamburger menu on mobile without putting it in navbar-brand? I have an element that I'd like to place at the end of the navbar, and have it visible on mobile without having to click

That's how it looks on desktop, the element in question being on the far right. I'd like to replicate that as much as possible on mobile

xlcrr

@xlcrr

Hi guys, I recently open sourced my app with 12+ years research behind it.

https://github.com/OpenLitterMap is built with Laravel, Vue, Bulma, and react-native

Inspired by OpenStreetMap, we apply the same principles of crowdsourcing and open data to litter and plastic pollution

See openlittermap.com

For more info, here is a presentation I gave at the UN last week https://www.youtube.com/watch?v=QhLsA0WIfTA

We would love if anyone here could take an interest in our laravel project <3

Marek Alexa

@coding_hedgehog_gitlab

Hi guys, I recently open sourced my app with 12+ years research behind it.
https://github.com/OpenLitterMap is built with Laravel, Vue, Bulma, and react-native
Inspired by OpenStreetMap, we apply the same principles of crowdsourcing and open data to litter and plastic pollution
See openlittermap.com
For more info, here is a presentation I gave at the UN last week https://www.youtube.com/watch?v=QhLsA0WIfTA
We would love if anyone here could take an interest in our laravel project <3

And people say Laravel is "dead". People build kickass projects with it.

Guys I'm having problem with changing default Bulma variables. Can you please take a look at this https://stackoverflow.com/questions/65961913/how-do-i-change-bulmas-default-styling thread ?

Arpit Patidar

@iamarpitpatidar

I am having issues with modals

<div id="deleteModal" class="modal modal-fx-normal is-active">
    <div class="modal-background"></div>
    <div class="modal-content box"></div>
    <button class="modal-close is-large" aria-label="close"></button>
</div>

when I remove the "is-active" class manually or using js the background disappears instantly and the the buttons disappear after like 500ms
is there any fix for that..?

boop_xyz

@boopxyz

I am using the Bulma Menu but it wont go to the side and instead will go ontop of everything

Jeana

@tsidel

Hi all - I hope this is the place to ask questions... in general on how to do stuff in Bulma. I have no idea if what I'm about to ask is possible in Bulma, or with sass at all. I'm using bulma inside of drupal, so we're overriding some of the variable definitions with our colors, sizing etc. But, what I'm wondering is it possible to override some of the variable definitions based on another class or ID in the div. For example, we have 2 panels on a page, one has an ID of "block-vhcodetaxonomyrelatedcontent" and the other has an id of "block-editorstoppicks" and I'd like to change the $panel-heading-background-color variable to be different per each panel so, say blue on the first one, and orange on the second one. Has anyone been able to do this with sass, and then within sass inside of bulma?

Beyar

@Beyarz

Not with sass I believe

Jeana

@tsidel

Here's a gist write up I did to maybe explain it better: https://gist.github.com/tsidel/051dbe7632434fd903e2f9fb7aa9edef

How would you handle it the bulma way then if I wanted to change the variables and have panels look different in 2 different spots? Or is the framework assuming I want panels to look the same all the time?

Jeana

@tsidel

I see panels specifically does have additional colors (https://bulma.io/documentation/components/panel/) with the additional is-(variable) name. There are predefined ones in the $color sass map, so now I'm trying to figure how I can add my own, that'll get me a little closer there.

nUKEmAN4

@nUKEmAN4

hi anyone know how to fix empty white space on bottom and right side on mobile using columns?

bootsie123

@bootsie123

Hi! Does anyone know how to fix this alignment issue?

Here's a link to part of the code if needed https://pastebin.com/NnGaXjZT

bootsie123

@bootsie123

I ended up just making the width of the former larger until they aligned up. I'd still be curious to see if anyone has any suggestions on how to fix this when it's a smaller width

Johan

@leu2tm

Hi guys!

I was wondering if it is possible to make the burger-menu visible for alle devices and not only touch?

So the menu is shown all the time basically.

batkin

@batkin:matrix.org

[m]

@leu2tm: perhaps setting https://bulma.io/documentation/components/navbar/ would work

setting $navbar-breakpoint to a high number

Gavin

@noynac:matrix.org

[m]

I am trying to get transparent background to work in an iframe using bulma css

I have an empty page, just bulma in the <head>, and apply a transparent background color to <body>

then I use that page in an iframe, and I set allowtransperency to true

however, it remains white. as soon as I remove the css link to bulma, it goes transparent, but looking at body it does not appear to inherit anything from bulma that would stop transparency??

image.png

Any ideas?

Leastrio

@leastrio:matrix.org

[m]

I'm trying to override the default navbar background color with $navbar-background-color: #202731;, i'm using node sass and it seems to not be overriding the default color. Any reason this could be happening?

Leastrio

@leastrio:matrix.org

[m]

Fixed it!

Doniel

@donzee529

What file can I put $menu-item-color: white; in?

Oktay Alp Kabaç

@alpkabac

Hi everyone. How can I make navbar logo bigger ?

Where communities thrive

People

Repo info

Activity