Comments (21)
@koistya Maybe replace it with Skeleton2?
from react-starter-kit.
fwiw I'd much rather just stick with bootstrap
from react-starter-kit.
Well, I think you should make it more customizable, so people could change Bootstrap with Foundation or Material UI or anything else.
from react-starter-kit.
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.
from react-starter-kit.
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.
from react-starter-kit.
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.
from react-starter-kit.
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.
from react-starter-kit.
@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.
from react-starter-kit.
It would be great, and what about BEM CSSO tool?
from react-starter-kit.
@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.
from react-starter-kit.
I agree with @yemi just remove it and people will use whatever they want.
from react-starter-kit.
I agree that it's should be less opinionated, let the people use whatever they want.
from react-starter-kit.
Bootstrap is good enough to provide as a base. FWIW this should all be easily pluggable.
from react-starter-kit.
π on making it easy to include other CSS frameworks like node-bourbon https://www.npmjs.com/package/node-bourbon
from react-starter-kit.
-1 for the following reasons.
- It is very useful for "starters" like me to have bootstrap as default.
- It would be not that hard for "experienced people" to remove or replace bootstrap.
from react-starter-kit.
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 c92ea26
from react-starter-kit.
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.
from react-starter-kit.
@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?
from react-starter-kit.
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 ?
from react-starter-kit.
@koistya Yes I am following the same approach but how can I override foundation classes if I want to using sass?
from react-starter-kit.
@ddewaele Can you please give the whole config and details about implementing the bootstrap and .scss class names ?
Thanks
from react-starter-kit.
Related Issues (20)
- Need help building an old website from 2016 HOT 5
- Error 500: Unexpected token < in JSON at position 0 HOT 3
- SPAM
- 'Cannot find module' Error for cached modules in VSCode HOT 1
- Minor issue running 'Relay' with Yarn HOT 1
- Cannot find module ... TypeScript error in VSCode HOT 1
- Hot Reload not working properly HOT 1
- Hot Reload CSS and JS files changes HOT 1
- Cannot open started application due to Firebase error HOT 2
- site.manifest error - comma missing
- What kind of API token templates should I use? HOT 1
- Where's node_modules?
- Where's node_modules? HOT 1
- Error on first start. TT HOT 2
- Network: use --host to expose HOT 1
- Codespaces not working with "Use Template" (workaround: clone/fork/duplicate repo) HOT 5
- The engine "node" is incompatible with this module. Expected version "10". Got "18.14.0" HOT 5
- Shipping with Google_Cloud_Credentials Issue HOT 2
- Login Dialog is not showing up
- Unable to add packages using Yarn HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-starter-kit.