tampa-ui
v1.0.7
Published
Rare Drop Tampa UI
Downloads
12
Maintainers
Readme
Tampa UI
The Tampa UI is the front end framework for the Rare Drop Co. Tool Products.
NPM link this library, or pull the latest tampaUI
in SASS directory.
- pull down
tampa-ui
repo - in the
tampa-ui
directory runnpm link
- move to your current project folder
- run
npm link tampa-ui
- add the import
@import 'node_modules/tampa-ui/src/sass/tampaUI/tampaUI';
Gulp Loaders and Plugins
This project contains the following loaders & plugins:
node-sass
for compiling sass (SCSS)gulp-babel
for compiling ES6 codeBrowser-sync
for hot-reloadinggulp-uglify
for compressing JSgulp-clean-css
for compressing CSSgulp-sourcemaps
for mapping into css filegulp-rev
for filename hashinggulp-imagemin
for optimising images
Getting Started
Dependencies
Note: if you've previously installed Gulp globally, run npm rm --global gulp
to remove it. Details here.
Make sure these are installed first.
npm install --global gulp-cli
Quick Start
Run
npm install
to install required files and dependencies.Launch the
development environment
with :gulp
then, navigate to http://localhost:3000
Note: For Production, Use:
gulp build
This will build files and assets to dist
directory.
Documentation
Workflow structure
src
- > source directory
dist
-> build directory
.
├── src
│ ├── assets
│ │ └── 500x300.jpg
│ ├── sass
│ │ ├── _fonts.scss
│ │ ├── _variables.scss
│ │ └── main.scss
│ ├── index.js
│ └── index.html
.
.
├── dist
│ ├── assets
│ │ ├── 500x300.jpg
│ │ └── rev-manifest.json
│ ├── css
│ │ └── style.min.css
│ ├── js
│ │ └── bundle.min.js
│ └── index.html
.
Instructions
Add your HTML/PHP files by inserting or including them in the
src
directory.- For the new
HTML/PHP
file(s), link thestyles.css
(in head tag) andbundle.js
(in body tag) file in theHTML/PHP
files as they are created.<head> : <link rel="stylesheet" href="css/style.css" /> </head> <body> : <script src="js/bundle.js"></script> </body>
- For the new
Add
sass
(SCSS) files tosrc/sass
folder.- Make sure you import the scss file in
main.scss
@import "filename";
- Make sure you import the scss file in
Add
images
tosrc/assets
folder.