https://github.com/alakise/bulma-grouped

Bulma's extension to create grouped cards and boxes
https://github.com/alakise/bulma-grouped

bulma bulma-css css sass

Last synced: 2 days ago
JSON representation

Bulma's extension to create grouped cards and boxes

• Host: GitHub
• URL: https://github.com/alakise/bulma-grouped
• Owner: alakise
• License: mit
• Created: 2020-04-22T20:44:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-04-29T14:16:52.000Z (over 4 years ago)
• Last Synced: 2024-09-20T23:03:31.871Z (6 days ago)
• Topics: bulma, bulma-css, css, sass
• Language: HTML
• Homepage:
• Size: 22.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bulma-grouped

Bulma's extension to create grouped cards and boxes

[![npm](https://img.shields.io/npm/v/bulma-grouped)](https://www.npmjs.com/package/bulma-grouped)

## Quick install

### NPM

[NPM package](https://www.npmjs.com/package/bulma-grouped)

```sh

npm install bulma-grouped

```

### Import

You can import the CSS or SASS file into your project using this snippet after importing 'bulma':

```sh

import 'bulma-grouped/dist/css/bulma-grouped.min.css'

```

or

```sh

import 'bulma-grouped/dist/css/bulma-grouped.sass'

```

Usage

---

```html



    


        

            


                

                    

                

            

            


                


                    


                        John Smith @johnsmith 31m

                        


                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa

                        fringilla egestas. Nullam condimentum luctus turpis.

                    

                

            

        

    

    


        

            


                

                    

                

            

            


                


                    


                        John Smith @johnsmith 31m

                        


                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa

                        fringilla egestas. Nullam condimentum luctus turpis.

                    

                

            

        

    

    


        

            


                

                    

                

            

            


                


                    


                        John Smith @johnsmith 31m

                        


                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa

                        fringilla egestas. Nullam condimentum luctus turpis.

                    

                

            

        

    



```


Example

---

![Example usage](https://alakise.com/github/bulma-grouped.png)

Integration to Bulma

---

- Clone the [bulma repo](https://github.com/jgthms/bulma)

- Under the `sass` folder, create a new folder called `extensions`

- In this new folder, create a new file `bulma-grouped.sass`

- Copy the code form the `bulma-grouped repo`'s [dist/css/bulma-grouped.sas](https://github.com/alakise/bulma-grouped/blob/master/dist/css/bulma-grouped.sass) file into your new file

- In the same folder create a new file `_all.sass` (this is not required, but will help when you add more extensions)

- In this file add this code:

```

@charset "utf-8"

@import "bulma-grouped.sass"

```

At the end of the `bulma.sass` file, add this line: `@import "sass/extensions/_all"`

Now, you can just build the bulma project with `npm run build`, and the output will be available in the `css folder`.

OR

- Just add the 'bulma-grouped.sass' or 'bulma-grouped.min.css' in any way you want it.