Tampa-ui NPM | npm.io

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 run npm 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 code
Browser-sync for hot-reloading
gulp-uglify for compressing JS
gulp-clean-css for compressing CSS
gulp-sourcemaps for mapping into css file
gulp-rev for filename hashing
gulp-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.

Node.js
Gulp Command Line Utility
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 the styles.css (in head tag) and bundle.js (in body tag) file in the HTML/PHP files as they are created.
```
<head>
    :
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    :
    <script src="js/bundle.js"></script>
</body>
```
Add sass(SCSS) files to src/sass folder.
- Make sure you import the scss file in main.scss
```
@import "filename";
```
Add images to src/assets folder.