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-uirepo - in the
tampa-uidirectory 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-sassfor compiling sass (SCSS) -
gulp-babelfor compiling ES6 code -
Browser-syncfor hot-reloading -
gulp-uglifyfor compressing JS -
gulp-clean-cssfor compressing CSS -
gulp-sourcemapsfor mapping into css file -
gulp-revfor filename hashing -
gulp-imageminfor 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 installto install required files and dependencies. -
Launch the
development environmentwith :gulpthen, 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
srcdirectory.- For the new
HTML/PHPfile(s), link thestyles.css(in head tag) andbundle.js(in body tag) file in theHTML/PHPfiles 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/sassfolder.- Make sure you import the scss file in
main.scss@import "filename";
- Make sure you import the scss file in
-
Add
imagestosrc/assetsfolder.