Sharing CSS code

[TJ]

Hey all,

Sorry if this has come up before, but I didn't see anything in the docs or roadmap. Is there any way of creating a CSS file that applies to all pages, or a way of importing one CSS file within another?

After about 30 seconds of writing NativeScript CSS I wanted the ability to share CSS code, and I can't find anything that lets me do so.

Thanks,
TJ

[Alex]

Hi,
Currently, the way you can reuse CSS files is to load them with the file-system module and the set the css to the css property of the page. You can do that in the loaded event of the page for example. 

Here is an example:

var fs = require("file-system");
function pageLoaded(args){
    var page = args.object;
    fs.File.fromPath(__dirname + "/style.css").readText().then(function (css) {
        page.css = css;
    });
}
exports.pageLoaded = pageLoaded;

We are thinking of a way to be able to define application-wide CSS that will be reused on every page in the app, so any suggestions/feedback you might have in this regard will be useful.

Regards,
Alex
Telerik

 

 

[TJ]

Ok good to know. I'll throw a few idea out there:

1) A naming convention. We already have app.js and bootstrap.js files, so maybe an app.css or bootstrap.css file would apply to the entire project. The advantage of this is we could create this file for the user and have the ability to create global style defaults—`Page { background-color: white; }` for instance.

2) A a property to the application module that controls a global CSS file—something like `var application = require("application"); application.cssFile = "global.css";`

3) @import, and by that I mean allowing the @import syntax to import alternative CSS files. For instance:

/* page1.css */
@import "common.css";
Button { background-color: blue; }

/* page2.css */
@import "common.css";
Button { background-color: green; }

/* common.css */
Page { background-color: red; }

There are a cool things about this approach. For one it's a syntax web developers already know, and would make NativeScript feel more like “real” CSS. Second it would allow you to include multiple common CSS files to modularly structure your code. I could imagine an app that has dozens of modular CSS files that pages can leverage as they need.

I like #3, and I'm sure you have other ideas as well. Regardless of the individual approach I think this is an important problem to solve. I went looking for a solution to this as soon as I started writing CSS, and using the file system module seems like overkill. I realize this is one item on a mile long list though :)

Thanks,
TJ

[Alex]

Hi TJ,
Thanks for the suggestions - we will consider them when implementing the feature.

Regards,
Alex
Telerik