Opened 8 years ago

Closed 8 years ago

#12635 closed task (fixed)

dojox.mobile: Change the CSS structure to prepare for LESS support

Reported by: ykami Owned by: ykami
Priority: high Milestone: 1.7
Component: DojoX Mobile Version: 1.6.0
Keywords: 1.7-mobile Cc:
Blocked By: Blocking:

Description

To support LESS, the current dojox.mobile CSS structure has to be changed as follows.

  • Applications should include stylesheets under "<target device name>" folder, which import required stylesheets under "common" folder and override with device specific styles
dojox/mobile/theme/
    common/
        base.css : common stylesheets for widgets/features in _base.js
        base-compat.css : common stylesheets for compatible mode
        <widget class name>.css : common stylesheets for widgets
        <other feature name>.css : common stylesheets for transitions, DOM buttons, etc.
        <other feature name>-compat.css: common stylesheets for compatible mode
        images/ : common images for compatible mode
    <target device name>/ : device specific folders (iphone|android|blackberry|custom)
        <target device name>.css : all-in-one stylesheet, importing all required common and widget stylesheets
        <target device name>-compat.css : all-in-one stylesheet for compatible mode
        base.css : device specific stylesheets for widgets/features in _base.js
        base-compat.css : device specific stylesheets for compatible mode
        <widget class name>.css : device specific stylesheets for widgets, importing corresponding common stylesheets
        images/ : device specific images if any

For LESS support, it should be changed as follows:

  • "base.css" and "<widget class name>.css" are replaced with "base.less" and "<widget class name>.less" in "common" folder.
  • "<target device name>.less", "<target device name>-compat.less" and "variables.less" are added to each "<target device name>" folder.
  • "base.less" and "<widget class name>.less" are added to each "<target device name>" folder, importing corresponding common LESS source and "variables.css" of the device.
  • Above LESS sources are compiled by "lessc" to generate stylesheets under each "<target device name>" folder.
dojox/mobile/theme/
    common/
        base.less : common LESS source for widgets/features in _base.js
        base-compat.less : common LESS source for compatible mode
        <widget class name>.less : common LESS sources for widgets
        <other feature name>.css : common stylesheets for transitions, DOM buttons, etc.
        <other feature name>-compat.css: common stylesheets for compatible mode
        images/ : common images for compatible mode
    <target device name>/ : device specific folders (iphone|android|blackberry|custom)
        <target device name>.css : all-in-one stylesheet, importing all required common and widget stylesheets
        <target device name>-compat.css : all-in-one stylesheet for compatible mode
        variables.less : device specific variables for LESS compilation
        base.less : device specific LESS source for widgets/features in _base.js
        base-compat.less : device specific LESS source for compatible mode
        <widget class name>.less : device specific LESS source for widgets, importing corresponding common LESS source
        base.css : device specific stylesheet for _base.js, generated by LESS
        base-compat.css : device specific stylesheet for compatible mode, generated by LESS
        <widget class name>.css : device specific stylesheets for widgets, generated by LESS
        images/ : device specific images if any

Change History (4)

comment:1 Changed 8 years ago by ykami

(In [24260]) Refs #12635 !strict. CSS structure change for LESS support.

comment:2 Changed 8 years ago by ykami

(In [24261]) Refs #12635 !strict. CSS structure change for LESS support.

comment:3 Changed 8 years ago by ykami

(In [24262]) Refs #12635 !strict. CSS structure change for LESS support.

comment:4 Changed 8 years ago by ykami

Resolution: fixed
Status: newclosed
Note: See TracTickets for help on using tickets.