imagine-front

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

UI/UX Design

Figma link to the design, Imagine Cinema Design

Non exhaustive design library for the projet, localhost:3000/design-library

Fonts and icon

Roboto

Roboto Condensed

Ionicons icons Iconicons Website

Tailwind

For TailwindCss core concept and explanation TailwindCss docs.

For the module @nuxt/TailwindCss documentation TailwindCss docs.

CSS Refs & Hints

Fonts class helpers

.text-xs: .75rem => 12px
.text-sm: .875rem => 14px
.text-base: 1rem => 16px
.text-lg: 1.125rem => 18px
.text-xl: 1.25rem => 20px
.text-2xl: 1.5rem => 24px
.text-3xl: 1.75rem => 28px
.text-4xl: 2.25rem => 36px
.text-5xl: 2.375rem => 38px
.text-6xl: 3rem => 48px
.text-7xl: 3.625rem => 58px
.text-8-1xl: 4 => 64px
.text-8xl: 4.25rem => 68px
.text-9xl: 4.5rem => 72px
.text-10xl: 4.875rem => 78px
.text-11xl: 6rem => 96px
.text-12xl: 8.125rem => 130px "Main Menu Title"