Application Styling refers to user adjustment of the look and feel of
components. These adjustments may include: color, color gradients,
font, margins/padding, etc. Ext JS 6 has a new way of styling the
application.
It uses SCSS for styling. SCSS is the more dynamic way of writing CSS code.
We can write the variables in our style sheet with the help of this. But a browser cannot understand SCSS it can only understand CSS, so all the SCSS file should get compiled into CSS to a production ready code.
That why SCSS file is called preprocessor files. In Extjs compilation is done through Sencha CMD tool.
Sencha CMD compiles it manually only once using command as below:
sencha app build [development]
Global_CSS is the main CSS file which has all SCSS variable associted with it in ExtJS which we can use in our application for customizing our theme by providing different value based on our need.
Below are some of the CSS variable available in the Global_CSS in Extjs:
It uses SCSS for styling. SCSS is the more dynamic way of writing CSS code.
We can write the variables in our style sheet with the help of this. But a browser cannot understand SCSS it can only understand CSS, so all the SCSS file should get compiled into CSS to a production ready code.
That why SCSS file is called preprocessor files. In Extjs compilation is done through Sencha CMD tool.
Sencha CMD compiles it manually only once using command as below:
sencha app build [development]
Global_CSS is the main CSS file which has all SCSS variable associted with it in ExtJS which we can use in our application for customizing our theme by providing different value based on our need.
Below are some of the CSS variable available in the Global_CSS in Extjs:
| S.N. | Variable & Description |
|---|---|
| 1 | $base-color $base-color : color (e.g. $base-color : #808080) This base color to be used throughout the theme. |
| 2 | $base-gradient $base-gradient : string (e.g. $base-gradient : 'matte') The base gradient to be used throughout the theme. |
| 3 | $body-background-color $body-background-color : color (e.g. $body-background-color : #808080) Background color to apply to the body element. If set to transparent or 'none' no background-color style will be set on the body element |
| 4 | $color $color : color (e.g. $color : #808080) The default text color to be used throughout the theme |
| 5 | $font-family $font-family : string (e.g. $font-family : arial) The default font-family to be used throughout the theme. |
| 6 | $font-size $font-size : number (e.g. $font-size : 9px ) The default font-size to be used throughout the theme. |
| 7 | $font-weight $font-weight : string/number (e.g. $font-weight : normal ) The default font-weight to be used throughout the theme |
| 8 | $font-weight-bold $font-weight-bold : string/number (e.g. $font-weight-bold : bold ) The default font-weight for bold font to be used throughout the theme |
| 9 | $include-chrome $include-chrome : boolean (e.g. $include-chrome : true) True to include Chrome specific rules |
| 10 | $include-ff $include-ff : boolean (e.g. $include-ff : true) True to include Firefox specific rules |
| 11 | $include-ie $include-ie : boolean (e.g. $include-ie : true) True to include Internet Explorer specific rules for IE9 and lower |
| 12 | $include-opera $include-opera : boolean (e.g. $include-opera : true) True to include Opera specific rules |
| 13 | $include-safari $include-safari : boolean (e.g. $include-safari : true) True to include Opera specific rules |
| 14 | $include-webkit $include-webkit : boolean (e.g. $include-webkit : true) True to include Webkit specific rules |
No comments:
Post a Comment