Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brionmario/wfwf-jquery-mobile-fe
🐲 A conceptual design for the official Westminster Fashion Week Festival 2019 website
https://github.com/brionmario/wfwf-jquery-mobile-fe
bower conceptual-design gulp jquery-mobile php sass
Last synced: about 1 month ago
JSON representation
🐲 A conceptual design for the official Westminster Fashion Week Festival 2019 website
- Host: GitHub
- URL: https://github.com/brionmario/wfwf-jquery-mobile-fe
- Owner: brionmario
- License: mit
- Created: 2018-10-16T16:51:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-23T21:33:51.000Z (over 5 years ago)
- Last Synced: 2024-12-06T05:27:47.290Z (2 months ago)
- Topics: bower, conceptual-design, gulp, jquery-mobile, php, sass
- Language: PHP
- Homepage: http://wfwf.apareciumlabs.com
- Size: 19.1 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Westminster Fashion Week Festival 2019
A conceptual design for the official Westminster Fashion Week Festival 2019 website
This project has been built on top of the [jQuery Mobile Seed](https://github.com/brionmario/jquery-mobile-seed). If any issues or feature requests regarding the project build process arrises, please log theme [here](https://github.com/brionmario/jquery-mobile-seed/issues).
# Quick Links
| [Seed](https://github.com/brionmario/jquery-mobile-seed) | [Demo](http://wfwf.apareciumlabs.com) | [Contributing](CONTRIBUTING.md) |
| -------------------------------------------------------- | ------------------------------------- | ------------------------------- |
# Quick start
> The generated project has dependencies that require `node` together with `npm` & `bower`.
**Make sure you have [Node](https://nodejs.org/en/download/) version >= 8.0, [npm](https://www.npmjs.com/) >= 5 or [Yarn](https://yarnpkg.com) and [Bower](https://bower.io/) >= 1.8**
```bash
# clone our repository
git clone https://github.com/brionmario/wfwf-jquery-mobile-fe.git
# change the directory
cd wfwf-jquery-mobile-fe
# install the dependencies with npm
npm install
# start the development server
npm start
```
Once the dev server is fired up, it'll automatically open up a new tab. If not, manually navigate to the Local url listed on the console.
# Table of Contents
- [File Structure](#file-structure)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Setting Up](#setting-up)
- [Running the app](#running-the-app)
- [Configuration](#configuration)
- [Add third-party dependencies](#add-third-party-dependencies)
- [Styling](#styling)
- [Deployment](#deployment)
- [Built With](#built-with)
- [Contributing](#contributing)
- [Contributors](#contributors)
- [License](#license)
# File Structure
```
wfwf-jquery-mobile-fe/
├── coverage/ * unit test coverage reports
├── dev/ * stores development build artifacts
├── dist * stores production build artifacts
├── docs/ * contains documents and document resources
├── node_modules/ * contains dependencies pulled from npm
├── src/ * source folder
│ ├── assets/ * static assets such as images, icons, fonts goes here
│ ├── components/ * place all the reusable components here (eg. header, footer, sidebar etc.)
│ ├── libs/ * place additional libraries here if it's not found on bower (eg.phpmailer)
│ ├── sass/ * styles folder
│ │ ├── partials/ * place all the sass partial stylesheets in this folder
│ │ └── styles.scss * the main stylesheet for the project which gets compiled to CSS
│ ├── scripts/ * custom javascript script files
│ ├── bower_components/ * third party bower libraries will be copied here
│ ├── about.php * about page of the website
│ ├── booking.php * event booking page
│ ├── contact.php * contact information page
│ ├── event-description.php * event description page
│ ├── events.php * events list page
│ ├── favourites.php * favourites list page
│ ├── game.php * game description page
│ ├── get-directions.php * directions page
│ ├── index.php * entry php file
│ ├── login.php * login page
│ ├── member-description.php * team member description page
│ ├── members.php * team members list page
│ ├── news-description.php * news description page
│ ├── news.php * news list page
│ ├── poi-description.php * points of interests description page
│ ├── poi.php * points of interests list page
│ ├── product-description.php * product description page
│ ├── products.php * products list page
│ ├── profile.php * profile page
│ ├── sign-up.php * sign up page
│ ├── sposor-video.php * sponsor video page
│ └── tasks.php * task list page
├── vendor/ * packages pulled from composer will be stored here
├── .all-contributorsrc * contains info ablout repo contributors
├── .babelrc * babel config file
├── .bowerrc * bower config file
├── .buildpacks * contains heroku buildpacks
├── .dockerignore * contains files that are ignored from docker
├── .editorconfig * helps define and maintain consistent coding styles between different editors and IDEs
├── .eslintrc * ecmascript linting configuration file
├── .gitignore * contains files that are ignored from git
├── .npmrc * npm config file to house project wide custom configs
├── .nvmrc * node version manager config file
├── .pullapprove.yml * pullapprove config file
├── .sass-lint.yml * sass linting configuration file
├── .travis.yml * travis ci configuration file
├── bower.json * contains bower dependencies
├── CHANGELOG.md * changelog file
├── CONTRIBUTING.md * project contributing guidelines
├── docker-compose.yml * docker compose file
├── Dockerfile * docker config file
├── gulpfile.babel.js * main buld configuration file. contains all the gulp tasks.
├── LICENSE.md * licensing information
├── package.json * contains all the npm scripts for building, running, deploying etc. and contains all the dependencies
├── Procfile * contains commands to be executed by heroku at app startup
└── README.md * Readme file for the repository
```
# Getting Started
## Prerequisites
What you need to run this app:
- The generated project have dependencies that require `node` together with `npm` & `bower`.
- Ensure you're running the latest stable versions Node, NPM and Bower.
> Make sure you have `Node` and `NPM` installed by running simple commands on the command line to see what version of each is installed.
- Node - Type `node -v` on the terminal.
- NPM - Type `npm -v` on the terminal.
- Bower - Type `bower -v` on the terminal.
If you do not have them installed, click [here](https://nodejs.org/en/download/) and grab the latest stable version of `node` and `npm` will be automatically installed along with it. Or if you have `brew` already installed in your local machine, execute `brew install node` command to get `node`.
If you have npm installed, It's really easy to grab the latest version of Bower by executing `npm install -g bower` which will install it globally.
Though the project is built on top of gulp, gulp is listed as a dev dependency and running npm install will install gulp as a local dependency. We've created npm scripts to run gulp tasks, so you don't have to install gulp or gulp CLI globally on your working machine.
## Setting Up
- `clone` the repository
- `cd wfwf-jquery-mobile-fe` to change the directory
- `npm install` to install the dependencies with npm (installs bower dependencies as well using a post install script)
## Running the app
After you have installed all dependencies you can now run the app. Run `npm start` to start a local server using `gulp-connect-php` which will watch your stylesheets and javascript files for changes, compile, minify, build and reload the browser automatically using `browser-sync` library.
The dev server will be opened in a new tab and usually on http://localhost:8010 and the Access URLs will be displayed on the terminal.
NOTE: `gulp-connect-php` does not work on some machines and incase of such scenario you might have to use a php server such as `XAMPP` or `LAMPP`. Copy the code base to htdocs folder or similar and start the server as usual using the `npm start` command and manually naviage to the `.temp` folder on the browser.
### server
```bash
# development
npm start
# production
npm run server:prod
```
# Configuration
The `gulp` tasks are defined inside the `gulpfile.babel.js` file found on the root of the application and you need to extend this file if you want to customize the application.
## Add third-party dependencies
To use any third party libraries other than the included `jquery`, `font-awesome`, `jquery-mobile` and `slick-carousel`, find the package you want in the [bower package repository](https://bower.io/search/) and use the following command to add it to your project.
```bash
bower install $package --save
```
Take a look at the bellow example:
Lets say that you want to add `moment.js` to your project. Just run the command bellow.
```bash
bower install moment --save
```
NOTE: Some packages won't work as expected and you might have to do overrides in the `bower.json` file.
# Styling
The `styles.scss` file inside the `sass` directory is the main stylesheet for the project and will be compiled and minified into an external `.css` and is embedded in the `index.html` file.
If you want to add your own stylesheet, we recommend that you place it under the `scss/partials` folder and import it in the `styles.scss` file.
For example if you want to include the styles for a slider:
1. Create a `_slider.scss` partial file in the `scss/partials` directory.
2. In `styles.scss` add `@import 'partials/slider.scss';`
# Testing
Execute the following command to run your unit tests. We use [codecov](https://codecov.io/) package to generate test coverage reports and the generated reports can be found in the `coverage` folder.
```bash
npm run test
```
# Linting
Execute the following commands to generate linting for styles and scripts.
```bash
# all
npm run lint
# javascript
npm run lint:scripts
# sass
npm run lint:styles
```
# Deployment
## Building the app
### For Development
Execute the following command to build your files in the development mode. A new folder called `.temp` will be created and the artifacts will be saved there.
```bash
npm run build:dev
```
### For Production
Execute the following command to build your files in the production mode. A new folder called `dist` will be created and the artifacts will be saved there.
```bash
npm run build
```
# Built With
# Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for contributing guidelines and to learn about our code of conduct.
# Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Brion Mario](https://www.linkedin.com/in/brion-mario/)
[💻](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=brionmario "Code") [📖](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=brionmario "Documentation") [🐛](https://github.com/brionmario/wfwf-jquery-mobile-fe/issues?q=author%3Abrionmario "Bug reports") [⚠️](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=brionmario "Tests") | [
Hasitha Walpola](https://github.com/hasithaWalpola)
[💻](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=hasithaWalpola "Code") [📖](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=hasithaWalpola "Documentation") [🐛](https://github.com/brionmario/wfwf-jquery-mobile-fe/issues?q=author%3AhasithaWalpola "Bug reports") [⚠️](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=hasithaWalpola "Tests") | [
Thisura Sagara](http://thisurasagara.blogspot.com)
[💻](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=ThisuraSagara "Code") [📖](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=ThisuraSagara "Documentation") [🐛](https://github.com/brionmario/wfwf-jquery-mobile-fe/issues?q=author%3AThisuraSagara "Bug reports") [⚠️](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=ThisuraSagara "Tests") | [
Ravin Hettiarachchi](https://github.com/Ravintheja)
[💻](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=Ravintheja "Code") [📖](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=Ravintheja "Documentation") [🐛](https://github.com/brionmario/wfwf-jquery-mobile-fe/issues?q=author%3ARavintheja "Bug reports") [⚠️](https://github.com/brionmario/wfwf-jquery-mobile-fe/commits?author=Ravintheja "Tests") |
| :---: | :---: | :---: | :---: |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
# License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
