Comments (7)
My concern was so much maintenance of styles in this library, as much as being able to consume this library.
We use webpack, which means that we'd need to have a sass-loader to consume the sass, but even then your css references gif files, so we'd then need to have and image/url-loader to support that, which is much more difficult than the material-ui one.
from react-widgets.
in general i don't mind at all but right now the individual less files aren't actually split up in efficient ways. In general 80% of the stuff is stuck in core.less
, b/c the large majority of the css is common to all of the widgets. I want to fix some of that, but the main problem is that LESS doesn't provide a good way of extending styles in a way that would let me isolate them in separate files, without repeating style definitions.
I digress though, Let me see if in the meantime i can just build each less file out by itself. I'm not actually sure I can do that easily but I'll see what I can do
from react-widgets.
I'm in exactly the same camp as ojame, and would LOVE to see this happen. Thanks!
from react-widgets.
Material UI have done it nicely here - there project is now completely CSS free, which is ideal for widgets.
https://github.com/callemall/material-ui/blob/master/src/checkbox.jsx#L35
Would you be open to something like this?
from react-widgets.
Would you be open to something like this?
I don't think so, I am not a big fan of inline styles. In most cases it solves a problem that isn't there, or isn't already solved sufficiently by a preprocesser at most people's scale, at teh expense of reinventing the wheel.
Practically speaking, in a library like this "maintenance" of styles is pretty trivial. More to the point, inline styles will probably increase byte counts in this case, defeating the point of wanting individual css files in the first place.
from react-widgets.
the problem will be the same even with inline styles, the images, and fonts still need to loaded regardless how you define the styles. In terms of webpack there is no need to use the less files, you can use the built css file. which requires no additional loaders. Plus if you are already using webpack for styles you almost certainly have those loaders already set up. Of course the simplest way to do it is just to add the css file link to the head of your html.
like I said I'm looking into have individual css files built, but honestly I don't think that will be a very big win. 90% of the styles are shared by all widgets so the widget specific styles are very minimal.
I do see how the material up system is convenient and nice in terms of minimizing build steps, but the cost of that is needing to invent yet another theming system. I think that is probably fine for a big ui framework like material ui, but react-widgets is a small suite meant to integrate nicely with a larger app. to that end it seems best to try and use the tools most people are using (css, and a preprocessor) rather than have a small part of the app be very prescriptive about how to style.
from react-widgets.
You can try react-widgets-webpack.
You can select only the less files you need, instead load react-widgets.css
from react-widgets.
Related Issues (20)
- ComboBox autoFocus not working
- DateTimePicker Cutting in Container make over-flow-x
- feature: change caret to X on combobox
- Multiselect defaultValue doesn't refresh when props value changes HOT 1
- Combobox has unexpected behavior when using hideEmptyPopup
- findDOMNode is deprecated in StrictMode - error HOT 7
- Error finding scss files.
- Calendar: Add option to display week numbers
- Add tailwind 3 support
- Add !default to $max-height in popup.scss
- Deprecation warning with `sass 1.62.0` HOT 2
- Custom tagListComponent HOT 1
- Unable to set tabindex on footer of calendar widget
- How to stablish the value on open DropdownList HOT 3
- Achieved
- Tailwind: [WARNING] "zindex" is not a known CSS property [unsupported-css-property] HOT 1
- Multiselect - Sort tags and options alphabetically HOT 1
- DatePicker monthFormat in version 5
- Virtualized MultiSelect
- Can not set DatePicker input id via inputProps
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-widgets.