Core css file with minimum classes

[Redani]

Hi @johnleider and congrats for this amazing work, I'm really impressed how clean and beautiful it is, thanks :)

I'm using it by including the css file through https://unpkg.com/vuetify/dist/vuetify.min.css, but I've noticed that this files is pretty large and have the following questions plz:

1- is there a non-minified css so I can better read it?
2- is there a core css file for example without body & html tag, .elevation-* classes, all the colors .red-, .purple-, ... ? I'd like to define the html and body (with my own font-family) tags in my css files without having to override them
3- why is the html tag defined twice in your css?
4- I noticed that somtimes you use "--" in the class name, what is the purpose of it?
5- I'm using the css reset (https://meyerweb.com/eric/tools/css/reset/), is it still a good idea to use it with vuetify?

Thanks a lot for your support

[smares]

For 1. You can read the stylus files that are used to generate the CSS files. Maybe that's an option.
For 4. http://getbem.com/naming/

[mfferreira]

@Redani

1. All css is generated from the Stylus (.styl) files, as @smares mentioned
2. No
3. Not sure what you mean
4. We use '--' to separate the the "root" css class from it's several options.
5. I don't think that would be a problem, as long as you reset before importing Vuetify's css

[Redani]

Thanks @smares & @mfferreira for your celerity :)
1- Where can I see the stylus files? and how to generate them? didn't see anything that mention it!
3- In the .css file I mentioned in my initial post, the tag html is defined twice:

`html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}

html{font-size:14px;color:#424242;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}`

is there a reason for that?

4 & 5- OK thanks, the link @smares sent me is very interesting ;)

6- plz, is there a reason why you chose stylus over SASS? is stylus better?

[johnleider]

Whether stylus is better or not is subjective, but I like working in it better. For most devs, you can barely tell the difference.

[Redani]

Well, I was first going for SASS, but since I like so much vuetify and saw you use stylus, that dived me into big confusion and spent few hours reading about it :D

Any idea about question 1 & 3 plz ?

[johnleider]

Stylus files are located here.
If you want to build them within your project, just include the main.styl file in your build process. If you need help setting up stylus loaders for webpack, you can check here for an example of how I do it in the documentation.

As far as html being declared twice, I don't see where this is being done.

[Redani]

Thanks for your lighting speed answer ;)
OK, i'll check the .styl files

As per the html tag, it's in this .css file: https://github.com/vuetifyjs/vuetify/blob/master/dist/vuetify.min.css
if you search "html{" you'll find it twice :)

[johnleider]

One is from the css reset, the other is from here

[Redani]

Ah OK, I see! thanks for your clarification ;)

[johnleider]

If you have any additional questions, feel free to come to the official gitter and ask.

[Redani]

Ok, thanks a lot

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord