bulma

I am taking the Bulma flexbox css framework for a spin - so far its pretty neat! The only stumbling block I've found is that I can't seem to set the display order for mobile devices. <div class="columns"> <div class="column foo">Foo</div> <div class="column bar">Bar</div> // Would like this to be first on small deviecs </div> EDIT Here is what my css looks like: body, html { background-color: blue; } .foo { order: 2; } .bar { order: 1; } @media only screen and (min-width: 769px) { body, html { background-color: red; } .foo { order: 1; } .bar { order: 2; } } Angela For this answer, I'm assuming

I just started setting up my blog prototype with Bulma. There is a footer section with two equally divided columns. I'd like the three items (Twitter, Email, etc.) to be vertically centered in the yellow area. Is there any special class for that available in Bulma? (Please see the full example on codepen.io .) <footer class="footer" style="background-color: lightpink;"> <div class="columns"> <div class="column has-text-centered-touch" style="background-color: cyan;"> <p>Some copyright stuff...</p> <p>Templated with <a href="https://bulma.io" target="_blank">Bulma</a>. Published with <a href=

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

I have pulled in bulma in my project through : $ npm install bulma After that, how can I refer to it in my pages. I really don't know how to work with npm, so please can you guide me. Do I have to refer to it in my js by saying: import bulma from 'bulma' or require it, I don't know where my files are. That means I don't know where are they located. You can find the final css build at projectName/node_modules/bulma/css/bulma.css . Chances are you're using a file loader with webpack and similar. If, for example in a Vue project, you have that, then you can use import syntax: import 'bulma/css