CODEWITHSUNDEEP
csssassbulma
meskerem
meskerem

Reputation: 399

How to get grid-only css file from bulma

I am trying to use bulma framework, but I only need the grid part, sadly it's all in sass and I don't know how to get only the css part.

The repo is here https://github.com/jgthms/bulma/tree/master/sass/grid and I am assuming the grid is named columns.sass

If I downloaded bulma via npm as 

npm install bulma

I already have get/sass installed. How can I get the grid part in css only?

Upvotes: 3

Views: 3064

Answers (3)

Kostas Minaidis
Kostas Minaidis

Reputation: 5437

As of version 0.7.1, the way to compile just the Grid Column system is this:

Prerequisites: you need to have node-sass installed: npm install -g node-sass

  1. Download or git clone the repo

    git clone [email protected]:jgthms/bulma.git
cd bulma

  2. Create a file grid.sass and add the following lines:

    @import "sass/utilities/_all"
@import "sass/grid/columns"

  3. Compile

    node-sass grid.sass grid.css

Upvotes: 2

Mohamed Elzarei
Mohamed Elzarei

Reputation: 546

An updated answer for bulma > 0.4, you need to import variables.sass too

 @import "utilities/variables.sass"
 @import "utilities/mixins.sass"
 @import "grid/columns.sass"

Upvotes: 0

Jake Ceballos
Jake Ceballos

Reputation: 241

You can use node-sass to build the CSS version of the column (grid) you are referring to.

Use npm to download the bulma package. Then create a separate file that imports the mixins.sass and column.sass files. Finally, run node-sass to get you shiny new CSS file.

grid.sass

@import "utilities/mixins.sass"
@import "grid/columns.sass"

Command-line

node-sass grid.sass grid.css

Upvotes: 6

Related Questions