Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add carbon components react, sass, themes and update gatsby dependancies #20

Closed
wants to merge 2 commits into from

Conversation

vpicone
Copy link
Collaborator

@vpicone vpicone commented Jan 15, 2019

resolves #3
resolves #9

What is this

This update includes the unopinionated default plugins provided by the default gatsby starter as well as the following features.

  1. Carbon Components React
  2. The new @carbon/themes package from Carbon Design@next
  3. Sass integrations to allow for theming

Motivation

  • The design choices of the Fed@IBM site more closely align with the gatsby-site starter as opposed to the blogging starter.
  • The best starters make no assumptions about the styling or purpose of the app.

This kit uses the core gatsby plugins with the minimum tooling required to use themed Carbon. That way, it requires minimal modifications to fit the user's design goals or styling preferences.

Future

Documentation

  • How to for more objective tooling (styled-components, MDX)
  • Elaborate on how Carbon Design can be incorporated and featured using this tooling
  • Integrating @carbon/themes and other @carbon/elements to fill in the blanks around carbon-components-react

Features

  • Make the default Layout component more in-line with the Carbon recommendations
  • Add Plex and typographic scale
  • Add sizing units and scale

https://gatsby-carbon-starter.now.sh/

@vpicone vpicone changed the title Add carbon react and theming Add carbon components react, sass, themes and update gatsby dependancies Jan 15, 2019
@vpicone
Copy link
Collaborator Author

vpicone commented Jan 15, 2019

I hardly ever use sass so someone might want to check if I made any faux-pas in the _themes.scss

I assigned the green pallet to css-variables so we could use them in the APP without using sass outside of the layout component

Copy link
Collaborator

@alisonjoseph alisonjoseph left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this seems fine, however, it is a very bare bones install, which may be the goal? I’m not sure how opinionated you want this starter to be.

Are you looking for current Carbon styles or the new v10 “duo/IDL2” styles? I see you’re pulling in v9 Carbon while also trying to use @carbon/themes

All of the @carbon/elements packages are designed to be used with the updated styles, currently you are pulling in the themes and v9 Carbon.

V10 Carbon is currently an alpha release 10.0.0-alpha.0 or you can use v9 Carbon and set the feature flag to turn on the v10 styles.

You can see how I'm pulling in the Carbon styles w/ feature flags and elements packages here https://github.com/IBM-Design/design-website/blob/master/src/styles/index.scss

@vpicone
Copy link
Collaborator Author

vpicone commented Jan 16, 2019

@alisonjoseph Thanks for taking a look! I think keeping default tools to a core, essential, set makes the onboarding experience and maintenance of the project much more simple. Users could add the mdx plugin in a few lines if they wanted to use the starter as a blog. I definitely think docs that show how to incorporate more opinionated dependancies with carbon components would be a great addition.

Also, thanks for the theming info! I was just trying to use a new color swatch with the carbon-components-react library. I'm definitely open to other solutions than the naive one I ended up with.

@kellychurchill
Copy link
Contributor

We definitely want to incorporate v10

Bare bones install could be fine but we should establish the criteria for what we would want to include in a Gatsby Carbon starter that we want to submit to Gatsby starter projects.

@vpicone
Copy link
Collaborator Author

vpicone commented Jan 16, 2019

From my experience, gatsby starters either fall into a standard app/site build or a blog build. The site build seemed most in line with the fed@ibm design goals.

But I agree, I think guides demonstrating addition of more opinionated dependencies combined with carbon would be the way to go.

@kellychurchill
Copy link
Contributor

Alison and I chatted a little bit after FEDucation.

Since the goal of the Gatsby Carbon starter is to get a starter ready to submit to Gatsby, let’s keep as much of the mdx packages and and features in. Alison and I had selected that starter because we felt it was a good starter and the work to be done would be to make it into a Carbon starter. What you did here would be a good start for the FED website however so I don’t want to lose that.

I think what would be a good idea is to create a new repo with the version in your PR.

@vpicone
Copy link
Collaborator Author

vpicone commented Feb 6, 2019

Gonna close this since I think we're looking for a more opinionated starter.

@vpicone vpicone closed this Feb 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create Carbon theme Import Carbon components
3 participants