https://github.com/sokhuong-uon/ntt-template
A Template for Nuxt.js + Tailwind CSS + Three.js Projects.
https://github.com/sokhuong-uon/ntt-template
cambodia cambodiancode gsap gsap3 ntt-template nuxt nuxtjs prismjs projects setup tailwindcss template threejs v-click-outside vue-prism-component vue-tippy
Last synced: 10 months ago
JSON representation
A Template for Nuxt.js + Tailwind CSS + Three.js Projects.
- Host: GitHub
- URL: https://github.com/sokhuong-uon/ntt-template
- Owner: sokhuong-uon
- Created: 2020-11-05T18:03:38.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-08T02:39:23.000Z (almost 6 years ago)
- Last Synced: 2025-04-09T20:11:52.035Z (over 1 year ago)
- Topics: cambodia, cambodiancode, gsap, gsap3, ntt-template, nuxt, nuxtjs, prismjs, projects, setup, tailwindcss, template, threejs, v-click-outside, vue-prism-component, vue-tippy
- Language: Vue
- Homepage: https://ntt-template.netlify.app/
- Size: 584 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NTT-Template
- The Template for
[Nuxt.js][Nuxt.js] +
[Tailwind CSS][Tailwind CSS] +
[Three.js][Three.js]
Projects.
- Installed and set up plugins and buildModules:
[v-click-outside][v-click-outside] +
[vue-tippy][vue-tippy] +
[nuxt-gsap-module][nuxt-gsap-module]
- Animation with:
[gsap][gsap]
# Comes with Tailwind CSS customization
- ## Customized
Spacing
```js
spacing: {
'0': '0',
'px': '1px',
'2px': '2px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'9': '2.25rem',
'10': '2.5rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'18': '4.5rem',
'20': '5rem',
'22': '5.5rem',
'24': '6rem',
'26': '6.5rem',
'28': '7rem',
'30': '7.5rem',
'32': '8rem',
'34': '8.5rem',
'36': '9rem',
'38': '9.5rem',
'40': '10rem',
'42': '10.5rem',
'44': '11rem',
'46': '11.5rem',
'48': '12rem',
'50': '12.5rem',
'52': '13rem',
'58': '14.5rem',
'60': '15rem',
'64': '16rem',
'72': '18rem',
'80': '20rem',
'84': '21rem',
'88': '22rem',
'92': '23rem',
'96': '24rem',
'100': '25rem',
'104': '26rem',
'108': '27rem',
'112': '28rem',
'120': '30rem',
'128': '32rem',
'132': '33rem',
'140': '35rem',
'160': '40rem',
'168': '42rem',
'172': '43rem',
'176': '44rem',
'180': '45rem',
'184': '46rem',
'188': '47rem',
}
```
Scale
```js
scale: {
'0': '0',
'15': '.15',
'25': '.25',
'50': '.5',
'75': '.75',
'80': '.8',
'90': '.9',
'100': '1',
'125': '1.25',
'150': '1.5',
'200': '2',
'300': '3',
'400': '4',
}
```
Opacity
```js
opacity:{
'0':'0',
'10':'0.1',
'20':'0.2',
'25':'0.25',
'30':'0.3',
'40':'0.4',
'50':'0.5',
'60':'0.6',
'70':'0.7',
'75':'0.75',
'80':'0.8',
'90':'0.9',
'100':'1'
}
```
minHeight
```js
minHeight: {
'0': '0',
'10': '2.5rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'18': '4.5rem',
'20': '5rem',
'22': '5.5rem',
'24': '6rem',
'26': '6.5rem',
'28': '7rem',
'30': '7.5rem',
'32': '8rem',
'34': '8.5rem',
'36': '9rem',
'38': '9.5rem',
'40': '10rem',
'42': '10.5rem',
'44': '11rem',
'46': '11.5rem',
'48': '12rem',
'50': '12.5rem',
'52': '13rem',
'58': '14.5rem',
'60': '15rem',
'64': '16rem',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'full': '100%',
}
```
maxHeight
```js
maxHeight: {
'0': '0',
'10': '2.5rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'18': '4.5rem',
'20': '5rem',
'22': '5.5rem',
'24': '6rem',
'26': '6.5rem',
'28': '7rem',
'30': '7.5rem',
'32': '8rem',
'34': '8.5rem',
'36': '9rem',
'38': '9.5rem',
'40': '10rem',
'42': '10.5rem',
'44': '11rem',
'46': '11.5rem',
'48': '12rem',
'50': '12.5rem',
'52': '13rem',
'58': '14.5rem',
'60': '15rem',
'64': '16rem',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'full': '100%',
}
```
minWidth
```js
minWidth: {
'0': '0',
'10': '2.5rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'18': '4.5rem',
'20': '5rem',
'22': '5.5rem',
'24': '6rem',
'26': '6.5rem',
'28': '7rem',
'30': '7.5rem',
'32': '8rem',
'34': '8.5rem',
'36': '9rem',
'38': '9.5rem',
'40': '10rem',
'42': '10.5rem',
'44': '11rem',
'46': '11.5rem',
'48': '12rem',
'50': '12.5rem',
'52': '13rem',
'58': '14.5rem',
'60': '15rem',
'64': '16rem',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'full': '100%'
}
```
maxWidth
```js
maxWidth: {
'0': '0',
'10': '2.5rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'18': '4.5rem',
'20': '5rem',
'22': '5.5rem',
'24': '6rem',
'26': '6.5rem',
'28': '7rem',
'30': '7.5rem',
'32': '8rem',
'34': '8.5rem',
'36': '9rem',
'38': '9.5rem',
'40': '10rem',
'42': '10.5rem',
'44': '11rem',
'46': '11.5rem',
'48': '12rem',
'50': '12.5rem',
'52': '13rem',
'58': '14.5rem',
'60': '15rem',
'64': '16rem',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'full': '100%'
}
```
inset
```js
inset: {
'0':'0',
auto: 'auto',
'4':'1rem',
'8':'2rem',
'16':'4rem',
'-4':'-1rem',
'-8':'-2rem',
'-16':'-4rem',
}
```
# Build Setup
- ## install dependencies
```bash
$ npm install
```
- ## serve with hot reload at localhost:3000
```bash
$ npm run dev
```
- ## build for production and launch server
```bash
$ npm run build
$ npm run start
```
- ## generate static project
```bash
$ npm run generate
```
[Nuxt.js]: https://nuxtjs.org
[Three.js]: https://threejs.org
[Tailwind CSS]: https://tailwindcss.com/
[prismjs]: https://prismjs.com/
[vue-prism-component]: https://github.com/egoist/vue-prism-component
[v-click-outside]: https://github.com/ndelvalle/v-click-outside
[vue-tippy]: https://github.com/KABBOUCHI/vue-tippy
[gsap]: https://greensock.com/gsap/
[nuxt-gsap-module]: https://github.com/ivodolenc/nuxt-gsap-module