Remove Bootstrap CSS

[koistya]

What do you think about removing Bootstrap CSS from this template? In favor of some custom minimum basic styles.

[patrick-fls]

@koistya Maybe replace it with Skeleton2?

[dmnd]

fwiw I'd much rather just stick with bootstrap

[hpaul]

Well, I think you should make it more customizable, so people could change Bootstrap with Foundation or Material UI or anything else.

[buxel]

i toyed with http://purecss.io/ for some time. @koistya, are you planning to turn this in a yo generator? Otherwise, beside from being a lot of additional work for you anyways, supporting multiple frameworks might get quite messy.

[yemi]

The less opinionated the better. I would go for custom minimum basic styles since people most likely will use their css lib/framework/style of choice anyways.

[oliverturner]

The more dependencies on 3rd party libraries you include the harder it is to understand the structure and intent of the code. +1 on getting rid of Bootstrap in favour of a minimal custom stylesheet.

[koistya]

Spoiler: The CSS class names will follow this naming convention (BEM):

.ComponentName { }
.ComponentName--modifier { }
.ComponentName-elementName { }
.ComponentName-elementName--modifier { }

Which is well suited for modular architecture. No shared styles or images whatsoever. Only styles per component. BTW, the same CSS naming convention is currently used at Twitter.

[oliverturner]

@koistya going BEM strikes me as a good move and completely appropriate to React's strength in creating modular components.

We use a variant of the convention at Ticketmaster and have seen a massive reduction in side effects as a consequence.

[sdiaz]

It would be great, and what about BEM CSSO tool?

[koistya]

@sdiaz, it seems like CSSO project is abandoned. As of now, the starter kit is using autoprefixer, csscomb and clean-css. See gulpfile.js#L154-L156. I will make sure that these three are used after converting to stylesheet-per-component approach.

[radum]

I agree with @yemi just remove it and people will use whatever they want.

[seemsindie]

I agree that it's should be less opinionated, let the people use whatever they want.

[goatslacker]

Bootstrap is good enough to provide as a base. FWIW this should all be easily pluggable.

[ivanoats]

:+1: on making it easy to include other CSS frameworks like node-bourbon https://www.npmjs.com/package/node-bourbon

[joybro]

-1 for the following reasons.

1. It is very useful for "starters" like me to have bootstrap as default.
2. It would be not that hard for "experienced people" to remove or replace bootstrap.

[koistya]

A quote, from Web Starter Kit documentation, just replaced "Web Starter Kit" with "React Starter Kit":

React Starter Kit doesn't aim to compete with CSS libraries like Bootstrap, Foundation and Pure. These libraries provide an excellent solution for prototyping your initial project. The biggest challenge they present is it’s almost too easy to get stuck using their look and feel for the lifetime of your site. We think this leads to a poorer experience on the multi-screen web.

React Starter Kit provides boilerplate styles & a visual style guide for projects, but encourages customising these to fit your own site. This may need a little more work, but the reality is that any serious project is going to have its own look and feel. We want you to feel comfortable changing the kit to suit your own needs.

If you wish to use Bootstrap or other CSS libraries in your React Starter Kit project, you have the flexibility to do so.

Bootstrap is removed in c92ea26d9ff9f377335aad5c9acad320dda32a51

[kpnigalye]

Can anybody help me with integrating Zurb foundation with react starter kit?

I have installed foundation using 'npm install foundation'. I am not sure if this is correct.

[koistya]

@kpnigalye there easiest integration approach is to reference Zurb Foundation from a public CDN:

https://cdnjs.com/libraries/foundation

Just edit components/Html to include appropriate <link ../> tags. Do you think this approach will work for you?

[ddewaele]

Started looking into the react-starter kit since a couple of days and really impressed.

Also having some difficulties adding the bootstrap stylesheet. I tried the following.

• App.scss

Added @import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css' but got a failure during npm start.

• Html component render function

Adding a link tag in the Html component.

<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css"/>

But it doesn't pickup the css file as it is not present in the build folder

• Created public/css folder

Manually copied a bootstrap.css to the public/css folder and modified the copy.js script to also copy the css folder to the build folder.

The public/css folder thing works but feels like a hack. What would be the best way to add the bootstrap stylesheet ?

[kpnigalye]

@koistya Yes I am following the same approach but how can I override foundation classes if I want to using sass?

[pickingausername]

@ddewaele Can you please give the whole config and details about implementing the bootstrap and .scss class names ?

Thanks