CSS Reference examples vs. Javascript Reference examples

[theprotocol]

Hello,

Apologies if this is a stupid question, but I searched and couldn’t find an answer.

In the Onsen 2 beta documentation, I’m having trouble understanding why the examples are radically different between the CSS Reference and the Javascript reference.

For example, the <ons-list> page in the javascript reference shows the following usage:

<ons-list>
  <ons-list-header>Header Text</ons-list-header>
  <ons-list-item>Item</ons-list-item>
  <ons-list-item>Item</ons-list-item>
</ons-list>

Whereas in the CSS Reference and Theme Roller, the examples don’t use ons-* tags, e.g.:

<ul class="list">
  <li class="list__item">
    <div class="list__item__center">Item</div>
  </li>
  <li class="list__item">
    <div class="list__item__center">Item</div>
  </li>
</ul>

The latter seems to be pure HTML/CSS, but offers more options (e.g. inset list style), and the Theme Roller uses the same approach. Could anyone clarify this? What’s the recommended approach - working with <ons-*> tags like in the JS reference, or using plain HTML elements with Onsen classes/styles like in the CSS reference (and wiring up the functionality for things like lists/tabs manually with JavaScript)?

Or am I missing something?

Thanks in advance.

[Fran Diox]

@theprotocol Just as you said, we provide two versions for the UI: one in pure CSS and another one including CSS+JS. Normally people would go for the JS one using the components, but perhaps in your app you only need CSS because you want to manage everything else.

The JS version is of course more complete because it does things that pure CSS cannot. For example, draggable switchs or autostyling your app.

We will probably change the webpage for 2.0 release to make it clear :)

[theprotocol]

Brilliant, thanks for the clarification.