VITAM

VITAM is a starter template with Vite for front-end projects. This template focuses on building a static website and suits small to medium projects like a landing page and a corporate website.

Status

Features

Fast HMR with Vite
PWA support
Quick local server
Compressing image assets
Breaking HTML smaller files with Handlebars
Referring to Enduring CSS
Out of the box useful JavaScript libraries
Out of the box useful SCSS functions and Mixins
Checking TypeScript with ESLint
HTML Validation with HTML-validate
Transforming styles with PostCSS
Built-in test runner with Jest

Requirements

Node v16+ (16.13.0)

Main Dependencies

How to Use

Clone this repository and install dependencies

yarn install

Available Commands

Start your project in development mode

yarn start

Build your project for production

yarn build

Locally preview production build

yarn serve

Validate HTML files

yarn htmlValidate

Lint your TypeScript files

yarn lint

Fix your TypeScript files

yarn lint:fix

Format your TypeScript files

yarn format

Lint and Fix SCSS files

yarn stylelint

Install missing TypeScript typings

yarn postInstall

Check the package's license

yarn checkLicense

Test project's code

yarn test

yarn test:watch

HTML

You can handle bundling multiple HTML files with vite-plugin-handlebars. Make sure Handlebars Context as you need.

If you want to use multiple partial files, Add your partial files into the _partials folder.

src/_partials

You can call partial files directly by other templates like this example.

{{> _header }}
  <main>
    <h1>Welcome to VITAM Docs!</h1>
    <p>VITAM is a front-end template with Vite for static websites.</p>
  </main>
{{> _footer }}

site.config.ts manages the site's basic information. You have to edit site.config.ts when you create a new page.

const pagesData = {
  '/sample/index.html': {
    locale: siteData.locale,
    title: `Smaple Page | ${siteData.siteName}`,
    description: `This is a sample page. ${siteData.description}`,
    url: `${siteData.url}/sampple/`,
    ogpImage: siteData.ogpImage,
    ogType: 'article',
    fbAppId: siteData.fbAppId,
    fbAdmins: siteData.fbAdmins,
    twitterCard: siteData.twitterCard,
    twitterSite: siteData.twitterSite,
  },
};

📖 Learn Handlebars

Sass (Dart Sass)

You can manage style sheets logically with Sass. I've already defined some functions and Mixins. Check out these files before you get started with your project.

src/scss/foundation/functions/*.scss
src/scss/foundation/mixins/*.scss

📖 Learn Sass

CSS Architecture

This starter template gives you CSS architecture which is Enduring CSS standardly, but it's not necessary architecture in all projects. I recommend you introduce the best architecture in each project.

📖 Learn CSS Architecture

What's Enduring CSS?

Enduring CSS is an architecture to write style sheets for large-scale, rapidly changing, long-lived web projects. You can get these benefits from Enduring CSS.

Isolated, self-quarantining styles
Scale to any size
Avoiding abstraction and specificity
One key selector to rule them all
Handling state

📖 Learn Enduring CSS

How to write Enduring CSS selectors

Here is the example selector.

.namespace-Component_ChildNode

TypeScript

This template supports TypeScript. It's easy to import ts files. You can customize TypeScript's options with tsconfig.json at any time.

I've already defined some utility functions. Check out these files before you get started with your project.

src/ts/utils/*.ts

postInstall command will help you to install typings in this project.

Jest is built-in in this project. You can run Jest from the command line.

📖 Learn TypeScript 📖 Learn Jest

Icons

vite-plugin-svg-icons make it easy to manage SVG icons.

Add SVG files into the icons folder.

src/icons/

Usage of SVG sprite

Call the icon with ID.

<svg aria-hidden="true">
  <use href="#icon-file" />
</svg>

PWA

Vite Plugin PWA supports making your website faster. Edit vite.config.ts if you would like to customize settings for PWA. You can generate icons for PWA with Favicon Generator.

Note: Please replace some asset files for PWA with your project's files.

📖 Learn PWA

GitHub Actions

If you use GitHub in your project, you can take advantage of GitHub Actions to automate your development workflows. Check out this file before you get started with your project.

.github/workflows/project-ci.yml

Libraries

Slider: Swiper
Modal: Micromodal.js
Smooth Scroll: Smooth Scroll
Animation: Tween24.js

Configurations

Recommended IDE

Visual Studio Code

Notes

This starter template doesn't support Internet Explorer. Feel free to use this template.

Contributes

Pull requests are always welcome.

License

MIT

Matrixbirds/prosemirror-ts-demo