https://github.com/hayanisaid/front-end-challenge
https://github.com/hayanisaid/front-end-challenge
bootstrap4 sass vuejs2
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hayanisaid/front-end-challenge
- Owner: hayanisaid
- Created: 2018-02-21T15:55:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-02T00:42:52.000Z (over 7 years ago)
- Last Synced: 2025-01-05T20:41:48.745Z (10 months ago)
- Topics: bootstrap4, sass, vuejs2
- Language: JavaScript
- Size: 33.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Front-end Challanege [Hidden Founder]
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run e2e tests
npm run e2e
# run all tests
npm test
```
## [Documentation]()
This template is build with vue.js and bootstrap 4,I used [vue.js](https://vuejs.org/), I can use Angular but I found Vue appropriate for this project because it's a great Framwork for UI and User Experience,so I used vue.js to handle and make nice animation,and has small size too.
in product section I created an Array of object that contain product detail,the way that helped me to handle product displaying ,and make dynamic page with vue-router,So when use click product title ,it go you to detail component with nice transition and blur effect while diplaying product details.
#Like feature : when you click heart icon the like will be add and the icon will take a red color,with like counter that incresse while clicking heart icon.
### - Vue.js 2
## - Vue-cli
### [bootstrap 4](http://getbootstrap.com/)
bootstrap 4 is latest version off twitter bootstrap ,which is is an open source toolkit for developing with HTML, CSS, and JS.
I just used the necessary elments for the project to avoid loading the entire Framwork and unsed code
**bootstrap.scss
```
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "images";
@import "grid";
@import "forms";
@import "buttons";
@import "dropdown";
@import "input-group";
@import "nav";
@import "navbar";
//@import "code";
//@import "tables";
//@import "transitions";
//@import "button-group";
//@import "custom-forms";
//@import "type";
//@import "card";
//@import "breadcrumb";
//@import "pagination";
//@import "badge";
//@import "jumbotron";
//@import "alert";
//@import "progress";
//@import "list-group";
//@import "close";
//@import "modal";
//@import "tooltip";
//@import "carousel";
//@import "utilities";
//@import "print";
```
### -Sass
I used sass as CSS processor.which make a development mush easier and some dynamizm,with a little code
## [Vue-router](https://router.vuejs.org/en/)
I used Vue-router ,So the user can navigate to detail page without page refresh with a nice animation effect
## The template is responsive
### Mobile Menu
I made a special Menu to mobile,it appear only on mobile
## -Material icons
I used Material-icons for icons which is free icons, I prefere material-icons good for User Interface instead of fontawesome
## -Files are minified
With ``` npm run buil ``` all files are minified
## -Image Carousel
Simple Image carousel to Browse other images .
[By Said Hayani](https://twitter.com/hayanisaid1995)