yugal.StyleSheet

yugal.StyleSheet.create

You can create whole CSS with JS using yugal.StyleSheet.create by writing code like below.

const someDesign = yugal.StyleSheet.create({
    abc: {
        fontSize: 30,
        color: "red"
    },
    def: {
        backgroundColor: "#fff",
        display: "inline-block"
    }
});

You must be wondering if abc and def are id or class or tag ? The question is correct, its up to you, you can select how to deal with it, in second parameter of yugal.StyleSheet.create method you can define if these are classes or id's or tag names.

. for class , # for id and if second parameter is not defined or is a blank string then it will be for tag names.

yugal.StyleSheet.inject

yugal.StyleSheet.inject injects the Stylesheet create with yugal.StyleSheet.create method at the end of body tag.

Example

yugal.StyleSheet.inject(someDesign);

yugal.StyleSheet.import

yugal.StyleSheet.import imports .css files into head tag.

yugal.StyleSheet.import([.css_file_path], [id_for_generated_tag (optional)]);

CSS file path must be relative to root file of project, by default it is index.html or index.php
Giving id for generated tag is optional.
This method returns the generated tag, so that customised later.

Example

new_css = yugal.StyleSheet.import('./assets/some.css');

Added tag is now stored in new_css variable and defined in <head> tag.

For example, you can remove it when not in need, below is code

new_css.remove();

PreviousSingle CSS Block - Brief NextSample Yugal App

Last updated 3 years ago

Was this helpful?