@zoomui/basics v0.0.16
Using basics
We are going to learn how to compile sass files. After that we will learn how to uglify (or beautify) the css file.
Compile sass, beautify css and uglify css
If you want to compile all the sass files, you need to write this line in the console:
npm run compile-sassIf you are developing, it's too boring to compile all the times the css when you need to check some changes. You can run the next script and create a watcher:
npm run watch-sassWhen you compile sass files, the css is a little bit unreadable, you can run a script to 'beautify' it:
npm run beautify-cssAt the end, you can compile the css file to optimize it. You can minify and 'uglify' it, creating a new file, 'common.min.css'.
npm run uglify-cssWhere is my css file?
After all the previous steps, we need to link the css file when we can't use sass. We are saving the css file here:
zoom-basics/src/lib/css/common.css
zoom-basics/src/lib/css/common.min.cssIf you need to use the css out of the app, you can use a external link, but first of all you should publish the package in npm:
https://unpkg.com/@zoomui/basics/src/lib/css/common.css
https://unpkg.com/@zoomui/basics/src/lib/css/common.min.cssExample:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@zoomui/basics/src/lib/css/common.min.css">
</head>
<body>
<h1 class="zoom-title">Title example</h1>
</body>
</html>