Port from stylus to SASS

[microcipcip]

This seems to be the most complete UI Library for VueJS, but I need to be able to style it, at the moment this doesn't seem to be possible without editing the vanilla CSS file or overriding the styling.

What would it be the easiest way of porting this to SASS (without overriding all .vue files :p)? For example, if I import a component using ES6, would I be able to add my SCSS/CSS file externally or it would possibly conflict with inline CSS added by WebPack?

import Vue from 'vue';
import { UiAlert, UiButton } from 'keen-ui';

new Vue({
    components: {
        UiAlert,
        UiButton
    }
});

Also, sometimes I have components in different sections of the website that have different design. Is it possible to add a custom class without targeting an external component wrapper? If not, it would be nice to have some kind of :custom-class props, to target at least the main container.

[EmilMoe]

Doesn't seem to be possible to add custom classes. You can create wrapper components that adds your behaviour, but yeah.. Styling is much welcome.

For global styling you just need to overwrite the exact same CSS path and otherwise use ! important!.

[microcipcip]

I could send a pull request if the author would like to add this. I really like this library, the only drawback is the styling which is pretty much hardcoded. BTW why not use SASS that has a wider adoption? Basically all CSS frameworks and material design use SASS.

[EmilMoe]

I'm not sure if you are right on that. Stylus is very common too and is more flexible (I use SASS). It shouldn't matter that much anyway, should it? I think Stylus can read both LESS and SASS variables so the best solution would of course be a veriables file so we can load that during build process in order to customize the theme.

That being said, it's a one mans project and has probably overgrown popularity more than he could believe, so also focusing on making other developers take responsible for some extension parts might be a good strategy. (I'm gonna make a masked input fx when I have the time, etc.)

[microcipcip]

Yeah, I wouldn't mind if Stylus is used, as long as I can edit the styling.

[JosephusPaye]

If you are referring to adding a custom class to the rendered component, you can just use class normally.

Example:

<ui-icon icon="add" class="my-custom-class"></ui-icon>

Renders to:

<i class="ui-icon material-icons add my-custom-class" aria-hidden="true">add</i>

Keen UI CSS is not inlined, unless you use the standalone files from lib/.

Currently, the way to customize the styling is to override the same CSS selector path (as @EmilMoe said) and you can do this using SASS or vanilla CSS.

[microcipcip]

Cool, I didn't know I can add the class in that way, thanks :).

BTW, what would happen if I use this syntax without adding the provided CSS in the dist folder?

import Vue from 'vue';
import { UiAlert, UiButton } from 'keen-ui';

new Vue({
    components: {
        UiAlert,
        UiButton
    }
});

Can I import my custom SASS stylesheet or is the component CSS inlined in the HTML by webpack?

[EmilMoe]

Then the CSS is inlined like here: https://github.com/JosephusPaye/Keen-UI/blob/master/src/UiAlert.vue

But you should still be able to overwrite it using the exact path name

.ui-alert .ui-alert-close-button {
  // Your CSS here
}

This will not work, except if you use !important

.ui-alert-close-button {
  // You CSS here
}

[microcipcip]

So my mistake was that I was using the /lib/ folder right? If I use the following snippet, the css will not be inlined?

import Vue from 'vue';
import { UiAlert, UiButton } from 'keen-ui';

new Vue({
    components: {
        UiAlert,
        UiButton
    }
});

Edit: but in this way it seems I have to import all components.

[EmilMoe]

No I think you have to do it this way: https://github.com/JosephusPaye/Keen-UI#globals-script-tag but I'm not 100% sure

[microcipcip]

I see, thanks I got it. I need to include the whole package.

Edit: I'll fork this project and port it to external SASS files. I'll report back in this thread when I finish so everyone can use my SASS port.

[theshem]

I am not sure why Keen-UI does not make use of stylus' conditional assignment. In that scenario we would be able to override the styles by assigning the desired value to a stylus variable.

Ex:

Customized variable.styl file which could be imported before:

$md-dark-text = darkgray;
$md-dark-secondary = gray;
// ...

Later on within the original variable.styl file:

$md-dark-text ?= alpha(black, 0.87);
$md-dark-secondary ?= alpha(black, 0.54);

That case we would get darkgray out of $md-dark-text so that we could override the styles properly.

[JosephusPaye]

New v1.0 is here. It uses BEM and Sass, and the variables can be overridden in Sass, as they use !default.

[microcipcip]

This is amazing, I didn't see the notification, thanks a lot, I'll surely have a look at it :)