Customizing theme

[Zeni]

0
down vote
favorite
I am trying to use Onsen UI for developing a mobile website in VS2017. The steps I took are as below.

1. Created a blank ASP.NET web application Solution in VS2017

2. Downloaded source code zip file of OnsenUI-dist 2.4.0 from https://github.com/OnsenUI/OnsenUI-dist/releases and unzipped in a folder.

3. Copied folders css, css-componenets-src, js, and file package.json in VS project root. 4. Created index.html in root of VS project and referenced three files in head

   <script src=“js/onsenui.js”></script>
   <link href=“css/onsenui.css” rel=“stylesheet” />
   <link href=“css/onsen-css-components.css” rel=“stylesheet” />

Everything is working fine. The only problem is that if I make any changes in file “theme.css” It is not reflected in browser.

Ideally I want to save a copy of theme.css with some other name say theme2.css, make changes in it and then change imported URL name in onsen-css-components.css. I think I am missing some step (some build process) after making changes in theme.css. Onsen UI team is developing at very fast pace and previous tutorials about theme customization has become outdated.

[Fran Diox]

@Zeni Yes, some docs are getting outdated. We are releasing a complete new guide in a few days. For now, please have a look at this: https://github.com/OnsenUI/OnsenUI/tree/master/css-components

You can find there the information about how to build the CSS components.

[Zeni]

Thank you @Fran-Diox for your reply.
Now that I referenced onsen-css-components.css from folder /css-components-src/src/ instead of /css/ in html file head, I am able to customize themes. This is because path to theme.css in onsen-css-components.css is @import url(’./theme.css’).
I have read the document you mentioned, but I was wondering how in do it in visual studio IDE.
When I change any component css file in folder /css-components-src/src/components/ such as button.css, I see changes in button appearance, but the changes are not exactly as I expect.
Also I want to ask that the sample markup for button in button.css is <button class=“button”>Button</button> and not <ons-button class=“button”>Button</ons-button>. Why is this?

[Fran Diox]

@Zeni Do not use /css-components-src/src/ unless you run your CSS through Webpack or similar tools to transpile it. It is pure CSS but it includes “future CSS” features implemented by cssnext that are not available in some browsers. Therefore, even if it works in Chrome or Firefox, it might look bugged in Mobile Safari and other browsers.

You need to create your custom theme following the instructions in the mentioned repo. Install gulp and run gulp serve. You’ll see a preview with all the CSS components. After that, you can start modifying theme.css or anything else and you will see your changes in the preview. Once it’s finished, you can grab the new onsen-css-components.css generated file and use it in your project. We’d like to provide an online tool to do this easier but for now this is the only way.

About your last question, Onsen UI is composed of 3 layers:

• The very first one is just a set of CSS rules that makes CSS components. You can use this layer independently by just including onsen-css-components.css file. You can, for example, have a button with a simple <div class="button">Hello</div>.

• The second layer is made of Custom Elements (Web Components). These are custom tags like ons-button that automatically apply its corresponding CSS component (class="button" or anything else) and also adds JavaScript behavior. For the button, the JS is not too much (only ripple effect) but other components like navigator or splitter are based on this JS behavior.

• The third layer is not related to your question, but for the sake of completeness: it’s called framework bindings and basically translate Custom Elements API to specific framework APIs.

Hope it helps!

[Zeni]

@Fran-Diox I will give it a try and post feedback very soon. I am shifting from jQuery mobile for sake of elegant looking and fast mobile website. I hope this effort is worth it.