Wednesday, 13 February, 2019 UTC
Summary
1. Create a create-react-app first:
create-react-app myapp 2. Enter it and install node-sass and bulmaswatch
cd myapp yarn add bulma bulmaswatch node-sass 3. Edit the src/index.js to import index.scss instead:
-import "./index.css"; +import "./index.scss";
4. "Rename" the index.css file:
git rm src/index.css touch src/index.scss git add src/index.scss 5. Now edit the src/index.scss to look like this:
@import "node_modules/bulmaswatch/darkly/bulmaswatch";
This assumes your favorite theme was the
darkly one. You can obviously change that later.6. Run the app:
BROWSER=none yarn start 7. Open the browser at http://localhost:3000
That's it! However, the
create-react-app default look doesn't expose any of the cool stuff that Bulma can style. So let's rewrite our src/App.js by copying the minimal starter HTML from the Bulma documentation. So make the src/App.js component look something like this:class App extends Component { render() { return ( <section className="section"> <div className="container"> <h1 className="title">Hello World</h1> <p className="subtitle"> My first website with <strong>Bulma</strong>! </p> </div> </section> ); } } Now it'll look like this:
Yes, it's not much but it's a great start. Over to you to take this to infinity and beyond!
Not So Secret Sauce
In the rushed instructions above the choice of theme was
darkly. But what you need to do next is go to https://jenil.github.io/bulmaswatch/, click around and eventually pick the one you like. Suppose you like spacelab, then you just change that @import ... line to be:@import "node_modules/bulmaswatch/spacelab/bulmaswatch";