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";
TEMPORARY:
h1 { color: red; font-size: 5em; }
TEST CHANGE 3.
Comments
Thanks So much, so clearly !!!
works nicely