https://github.com/vinceumo/movielisting
📽 List of films in cinemas
https://github.com/vinceumo/movielisting
Last synced: 3 months ago
JSON representation
📽 List of films in cinemas
- Host: GitHub
- URL: https://github.com/vinceumo/movielisting
- Owner: vinceumo
- Created: 2019-05-30T19:46:06.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:19:09.000Z (over 2 years ago)
- Last Synced: 2025-01-14T06:30:02.756Z (5 months ago)
- Language: CSS
- Homepage: https://vinceumo.github.io/movieListing/
- Size: 3.61 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# movie-listing
This project is build using [vue cli 3](https://cli.vuejs.org).
movie-listing displays a list of showing movies in cinemas (GB). Users can filter display movies by rating. This project use [the movie DB api](https://www.themoviedb.org/documentation/api)
## How to run this project?
### Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Deploy to gh-pages
```
npm run deploy
```
## Project structure and methodology
This project is structured using [atomic design](http://bradfrost.com/blog/post/atomic-web-design/). Atomic design is a methodology for helping to design and develop a pattern system.
Example:
> `Atoms` are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
> `Molecules` are collections of atoms that form relatively simple UI components.
> `Organisms` are relatively complex components that form discrete sections of an interface.
> `Templates` place components within a layout and demonstrate the design’s underlying content structure.
> `Pages` apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.
### SCSS
I used SCSS in this project. We have to main files:
#### `_global-style-resources.scss`
This file group all the mixins, functions and variables. These files do not output any CSS when compiled. This file allows us to use all our scss variables, function etc. into our vue components and `global.scss` file.
#### `global.scss`
This file output mostly our atoms, global styling and utilities.
#### SCSS Variables in this project
Most variables files follow this structure:
```scss
// ------------------------------
// Sass Variables
// ------------------------------
// CSS variables prefix
$variable-prefix: --variable-;
// Map declaration
$variables: (
var1: value1,
var2: value2,
var3: value3
);
// ------------------------------
// Set function
// ------------------------------
// We link the map and prefix to a function
@function functionToCallVariables($variable, $true-val: false) {
@if $use-css-var == true {
@if $true-val == true {
@return map-get($variables, $variable); // True Val
} @else {
@return var(#{$variable-prefix}#{$variable}); // CSS Var
}
} @else {
@return map-get($variables, $variable); // Disabled CSS Var
}
}
// We call our map in the project using this function
//
// Example:
// functionToCallVariables(var1) => -var(-variable-var1)
// functionToCallVariables(var1, true) => value1
// functionToCallVariables(var1) and $use-css-var: false => value1
```
The above structure allows for maintaining a pattern system.
We are using CSS custom properties as well (the SCSS var functions output CSS custom properties)
### Vue
Components are organized following the atomic design methodology we can find molecules and organisms.