>
> Adding new-ui libraries again after merge conflict.
>
> ---
> ui/libs/bootstrap.js | 2345
++++
> ui/libs/jquery-ui.js | 16617
+++++++++++++++++++++++++++++
> ui/libs/modernizr.js | 1406
+++
Is this file imported from somewhere? From which project?
TL;DR;
- jQuery-UI was already in Kimchi, Bootstrap is necessary
for the new-ui widgets and modernizr is used to detect
browser features. They are all in this structure because
that's the way Gulp and
Bower manages them.
Some
background: These files are ready for “production”, I
create and edit the CSS & JS files in a separate
project managed by these automation tools running in
NodeJS (https://nodejs.org/en/):
Yeoman
- http://yeoman.io/
- Html5 webapp generator that scaffolds everything that is
necessary to build the new-ui.
This
webapp generator includes the following tools:
c)
Gulp JS - http://gulpjs.com/
- A workflow automation tool that is responsible for
running a development static webserver and run tasks like
compiling sources
from imported libraries, testing, minifying and exporting
assets.
This
generated webapp that I used as "canvas" to write the
widgets and mockups calls Bower commands to manage common
libraries such as:
*jQuery
(was already manually included in Kimchi)
*jQuery
UI (same as above)
*jQuery
UI i18n plugin (same as above)
*Modernizr
- https://modernizr.com/
- (MIT License) A JS library that detects all the
supported features in a browser and wraps a css class in
the <html> tag.
This is much better than do a simple browser version check
that can lead to false or incorrect user agent strings.
*Json2
- JSON encoders/decoders for old browsers (Chrome and
Firefox don't need this, Safari does)
*FontAwesome
- http://fontawesome.io
- (Imported just the Sass files since we are handling font
files in a different way)
As a
best practice in front-end development, we use Bower do
manage the external/vendor libraries like the ones listed
above. In the main mockup folder there's a json file that
handles all the dependencies
and their correct versions:
{
"name": "wok",
"private": true,
"dependencies": {
"modernizr": "~2.8.1",
"bootstrap-sass-official":
"~3.3.5",
"bootstrap-select-sass": "~1.6.3",
"compass-mixins": "~1.0.2",
"es5-shim": "~4.1.10",
"json2": "*",
"base64": "~0.3.0",
"jquery": "~1.11.3",
"jquery-ui": "~1.11.4",
"jquery-i18n": "~1.1.1",
"font-awesome": "~4.4.0"
},
"overrides": {
"bootstrap-sass-official": {
"main": [
"assets/stylesheets/_bootstrap.scss",
"assets/javascripts/bootstrap.js"
]
}
},
"devDependencies": {
"chai": "~3.2.0",
"mocha": "~2.2.5"
}
}
Note
that chai and mocha are dev-dependencies that are required
by Gulp so they were not included in the compiled/exported
assets. Bower creates a non-versioned folder called
bower_components and store
all the libraries original sources and assets in there (it
basically does a git clone).
Then I
use Gulp.JS to act as a development webserver that runs
all the front-end tasks that I have programmed or that
have been included by Yeoman generator such as JavaScript
validation, Sass compilation,
CSS and JS minification. When this server is running, it
points directly to the original sources in
bower_components so I can make changes on the fly instead
of having to stop server / recompile sources / start
server again. Once I'm done developing these assets,
I run a task to "build" and optimize these files and
export them to Kimchi/Wok project.
The
sass files references the original Bootstrap source inside
bower_components folder. Once I compile our sass files,
Gulp automatically merges the referenced files with them.
The same goes for jQuery-UI
theme and font-awesome (which I programmatically removed
the *.ttf and *.svg files).
> ui/libs/themes/base/bootstrap.custom.css | 8502
+++++++++++++++
> ui/libs/themes/base/jquery-ui.custom.css | 203 +
> ui/libs/vendor.js | 5523
++++++++++
> ui/pages/browserconfig.xml | 12 +
> ui/pages/manifest.json | 41 +
The same I asked before.
It is better to group the files according to its project
due license issues.
Example:
ui/libs/bootstrap/ => to hold all the bootstrap files
ui/libs/jquery-ui/ => to hold all the jquery-ui files
TL;
DR; bowersconfig.xml and manifest.json are necessary for
Android drawer and Windows 8/10 tiles; vendor.js is
es5-shim, json2 and base64 minified in one single file by
Gulp. Bootstrap.custom.css is
where I'm putting the CSS files that I'm removing form
css/themes-default and converting/adapting to Bootstrap
markup/widgets – this is the new-ui main CSS. I kept
separated from css folder because this file has to be
loaded after the other css files (due
to how css cascading works).
As I
was explaining, Gulp merges the referenced libraries
assets, so the original Bootstrap files are combined with
whichever file that has referenced them. This is something
that we can change but I don't
think it is a good idea to keep the original Bootstrap CSS
in one folder and then load our custom CSS over it because
it already includes classes with the same rules and some
of them with the same properties and values from
Bootstrap, i.e. including Bootstrap
original css is code duplication.
For
now I've included bootstrap.custom.css in
ui/libs/theme/base/ folder while I still need some old
files from ui/css/ for reference and compatibility with
screens that I haven’t worked yet. Once I remove
the unused CSS files in theme-default I'm planning to put
bootstrap.custom.css there.
For
the JS files: Bootstrap source has a single JS file for
each component / widget. Using bower and gulp we can
reference only the components that we have used and
compile a minified version. For now
I'm importing the full package but I think we won't need
all of them.
vendors.js
is basically es5-shim, json2 and base64 minified in one
file. I'll send another patch removing typeahead.js and
bag.js that were also included but we don't need them
anymore.
The
whole idea of using Bower and Gulp is to optimize, minify
and put all the files ready to production in one single
place.