This is a migrated thread and some comments may be shown as answers.

Sharing CSS code

3 Answers 10 Views
NativeScript Insiders
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
TJ
Top achievements
Rank 1
TJ asked on 09 Jan 2015, 03:45 PM
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

3 Answers, 1 is accepted

Sort by
0
Alex
Telerik team
answered on 09 Jan 2015, 04:35 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
TJ
Top achievements
Rank 1
answered on 09 Jan 2015, 07:52 PM
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
0
Alex
Telerik team
answered on 13 Jan 2015, 08:17 AM
Hi TJ,
Thanks for the suggestions - we will consider them when implementing the feature.

Regards,
Alex
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
NativeScript Insiders
Asked by
TJ
Top achievements
Rank 1
Answers by
Alex
Telerik team
TJ
Top achievements
Rank 1
Share this question
or