search

Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.86k stars 4.74k forks source link

[Feature request] Separate grid, color, and typography CSS files #6390

Open jolson615 opened 5 years ago

jolson615 commented 5 years ago

This is my first time contributing - I read the guidelines but the rules around feature requests really only said to make sure that it's relevant to multiple people and didn't explain much else. If I've posted this in the wrong place, I'm happy to revise / move this request elsewhere. Thanks all! 🙇

Expected Behavior

Separation of layout, color, component, and typography classes (as individual css files) to provide the option of using each piece independently out of the box.

Current Behavior

Right now the dist folder only has one master CSS document.

Possible Solution

Keep the master CSS document, but also include smaller CSS chunks. My assumption is that we'd want to have materialize-colors.css, materialize-typography.css, materialize-grid.css and materialize-components.css.

This would allow for lightweight implementation of certain features, and would also allow this library to play more nicely with custom-built css rulesets.

Steps to Reproduce (for bugs)

n/a

Context

In particular, students I work with would like to implement the excellent MaterializeCSS color classes without the other default behaviors that come along with loading the entire library. I did a brief lesson with them about how to read the css files and copy paste only what they need, but working with 30 first-time-learners at once who are all trying to parse a 10k-line file means many of them mistakenly copy over too much or too little.

Your Environment

Probably not relevant, but...

SuperDJ commented 5 years ago

Having multiple seperate CSS files will make the site loading slower. I think there should be a way to modify the output of the CSS. Say you only need some components but don't need the typography you should be able to remove the typography from the output. Something similar to this: https://github.com/SuperDJ/material/blob/master/src/sass/_index.scss, by commenting you can change what's in the output