https://github.com/sencha/theming-contest
Sencha Ext jS 6 Theming Contest
https://github.com/sencha/theming-contest
Last synced: about 2 months ago
JSON representation
Sencha Ext jS 6 Theming Contest
- Host: GitHub
- URL: https://github.com/sencha/theming-contest
- Owner: sencha
- License: apache-2.0
- Created: 2015-07-02T17:02:49.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-09-14T14:44:37.000Z (almost 7 years ago)
- Last Synced: 2025-03-31T08:06:52.406Z (3 months ago)
- Language: JavaScript
- Size: 1.52 MB
- Stars: 14
- Watchers: 16
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Sencha App Theming Contest
### Requirements
* [Download Ext JS 6] (https://www.sencha.com/products/extjs/evaluate/)
* [Download Sencha Cmd 6] (https://www.sencha.com/products/extjs/cmd-download/)
* [Download Sencha Inspector Beta] (http://pages.sencha.com/Inspector-Beta.html)
### Getting started with Feed Viewer App
* Create a workspace
```
sencha -sdk {path/to/Ext-JS-SDK} generate workspace theming-workspace
cd theming-workspace/
```
* Fork/Clone/Download Feed Viewer sample application on this github page and unzip it in theming-workspace
* Build the Feed Viewer sample application
```
cd theming-contest-master
delete directory .sencha/workspace (to use theming-workspace)
sencha app build development
```
* Start web server and watch changes
*For feedviewer app using classic toolkit, run*
```
sencha app watch classic
```
*For feedviewer app using modern toolkit, run*
```
sencha app watch modern
```
* View the Feedviewer sample app in browser with platform tag. It will show view with classic toolkit
```
http://localhost:1841/theming-contest-master/?platformTags=fashion:true
```
* To view the modern toolkit based view, in Chrome developer tools, toggle device mode icon and select mobile phone
### Connect Feed Viewer app to Sencha Inspector
Follow steps in the document:
http://docs.sencha.com/tools/sencha_inspector/inspecting_desktop_applications.html
One quick way to inspect your Feedviewer sample app is to use bookmarklet. To add bookmarklet in your browser,
* Open Inspector app, click on the button "Quick connect an app with Bookmarklet"
* Drag the blue "Sencha Inspector bookmarklet" button to your browser bookmarks bar
* Now open feedviewer sample app in your browser and click on the bookmarklet in bookmarks bar.
* You should see feedviewer app link in Inspector.
* Click on the link and go to Theme tab to change Sass variables
### Create your Custom Theme
* Generate custom theme called “my-contest-theme” in theming-workspace/packages/local/my-contest-theme
```
From theming-contest-master directory
sencha generate theme my-contest-theme
```
* Extend custom theme “my-contest-theme” from "theme-triton".
```
In theming-workspace/packages/local/my-contest-theme/package.json
"extend": "theme-triton",
```
* Use “my-contest-theme” in the feed viewer app
In the app.json file, change to "theme": "my-contest-theme". Optionally uncomment “save” to use Sencha Inspector changed Sass variables in save.json file. The resulting changes in app.json will look like
```
app.json
"builds": {
"classic": {
"toolkit": "classic",
"theme": "my-contest-theme",
"sass": {
"save": "classic/sass/save.json"
}
},
"modern": {
"toolkit": "modern",
"theme": "my-contest-theme",
"sass": {
"save": "modern/sass/save.json"
}
}
}
```
* Copy changes from the Inspector (or save.json file) to custom theme.
```
E.g. Add component variable $base-color: #639000; in
{path/to/theming-workspace}/packages/local/my-contest-theme/sass/var/Component.scss
```
* Create unique components with Ext JS UIs (CSS mixins).
### Submit your contest entry
Send us zipped file of your workspace containing your version of the Feed Viewer sample application as well as custom themes at [email protected]. Please do not include ext directory in the zipped file. All entries must be received by September 15, 2015.
### Resources
* [Video - Getting started with theming contest] (https://vimeo.com/133395706)
* [Doc - Ext JS 6.0 theming] (http://docs.sencha.com/extjs/6.0/core_concepts/theming.html)
* [Tutorial - Ext JS 6.0 theming - Part 1] (https://www.sencha.com/blog/how-to-create-a-dark-ext-js-theme-part-1/)
* [Tutorial - Ext JS 6.0 theming - Part 2] (https://www.sencha.com/blog/how-to-create-a-dark-ext-js-theme-part-2/)
### Any Questions?
If you have any additional questions about the contest, please send those to contest forum at [Sencha Contest Forum] (https://www.sencha.com/forum/forumdisplay.php?137-Sencha-Contests)