Using a react component library instead of plain Bulma

[Kaisaurus]

This is a feature proposal. I found the current HTML of the starter template looks very messy. I think this could be cleaned up quiet a bit by using a component library for the Bulma css frame work like bloomer and separating in-line styles to const styles = StyleSheet.create({})

(I am a bit of a coding newbie but if people like this idea I'd be happy to remake the templates in this format)

For example the product-page.js now looks like: Instead it could look something like

<section className="section section--gradient">
    <div className="container">
      <div className="section">
        <div className="columns">
          <div className="column is-10 is-offset-1">
            <div className="content">
              <div
                className="full-width-image-container margin-top-0"
                style={{ backgroundImage: `url(${image})` }}
              >
                <h2
                  className="has-text-weight-bold is-size-1"
                  style={{
                    boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
                    backgroundColor: '#f40',
                    color: 'white',
                    padding: '1rem',
                  }}
                >
                  {title}
                </h2>
              </div>
/* etc.. */

But could instead look like:

<Container>
      <Section>
        <Columns>
          <Column isOffset={1} isSize={10}>
            <Content>
              <Title isSize={1}>{title}</Title>
            </Content>
          </Column>
        </Columns>
      </Section>
    </Container>

[erquhart]

This looks awesome - my main hesitation is the bloomer lib being so nascent, but also being more opinionated in the template. I suppose if someone is using Gatsby they're already using React, so this could easily be a solid improvement.

Know of any libraries with broader adoption than bloomer?

[AustinGreen]

Another consideration is that this project is a template and is only meant to serve as an example. The components and styles demonstrate what is possible, but will most likely be removed when the developer forks the project.

[Kaisaurus]

@AustinGreen Fair enough, I might make one just for convenience if people do want to use it as a boiler template. I'll post a link here when I do.

@erquhart I don't think there are other very popular bulma react component libraries. Other options would be Grommet, Semantic UI React or Elemental UI. Any recommendations?

[erquhart]

Really comes down to preference then. I agree with providing a boilerplate for that approach as an alternative.

[danielmahon]

@Kaisaurus @erquhart I've been working on a NetlifyCMS branch of my GraphCMS starter here, which uses Material-UI components, check it here: (warning, still in progress) https://github.com/danielmahon/gatsby-starter-procyon/tree/netlifycms

Make sure you're on the netlifycms branch, the master branch is for GraphCMS integration. I may continue working on getting the in-place DraftJS editor to work with NetlifyCMS as well.

[erquhart]

@danielmahon very interesting! Keep us in the loop on Gitter if things move forward: https://gitter.im/netlify/netlifycms

[yhoiseth]

I don't think there are other very popular bulma react component libraries.

I don't know if it's popular enough, but https://github.com/couds/react-bulma-components looks interesting.

[dbertella]

I forked this and added support for styled-component in my fork along with ts, not sure it can coesist with bulma because sometimes css get messy since the order I guess is not guaranteed but maybe you can be inspired https://github.com/dbertella/gatsby-starter-netlify-cms if interested I can make it better and a pr

[anjanilaldham]

I have used Semantic UI React Components (https://react.semantic-ui.com) but after deploying to Netlify all semantic ui components are missing.

Is it possible to deploy Semantic UI React ???

[svengau]

I've done a port of this project on both material-ui and bootstrap if anyone is interested:

https://github.com/fullstack-rocket/gatsby-starter-netlify-cms-materialui https://github.com/fullstack-rocket/gatsby-starter-netlify-cms-bootstrap

[dbertella]

What about something like https://theme-ui.com/? That would be awesome! If you are interested I can happily work on a pr for a v2 of this, I really like this template and it's my way to go to start a new project in minutes. I would love to have ts and styled-components / emotion by default!

[AustinGreen]

It's been a while since this issue was raised. React component libraries have greatly improved in the past couple years. I'm totally in favor of someone migrating the project to a more react-friendly library.

[thebrianbug]

I second this suggestion. Took me a while to figure out where the css library was coming from. Very un-react-like as it is.

[svengau]

I've just released a port on Tailwind CSS:

https://github.com/fullstack-rocket/gatsby-starter-netlify-cms-tailwindcss

First project with tailwind, I've really loved using it.