Skip to content
This repository has been archived by the owner on Jul 27, 2021. It is now read-only.

Latest commit

 

History

History
59 lines (40 loc) · 1.97 KB

README.md

File metadata and controls

59 lines (40 loc) · 1.97 KB

THIS TEMPLATE IS DEPRECATED

preact-material-boilerplate

Documentation

Usage

$ npm install -g preact-cli
$ preact create material my-project
$ cd my-project
$ npm install
$ npm run dev

Development server runs on port 8080. If the default port is already in use on your machine it will start the development server on a random port.

Styling material components

In order to style the material components you can give class names to the components and target them with the css selector in any css files.

To style them globally use the index [style.css](https://github.com/preactjs-templates/material/blob/master/template/src/style/index.css), so that it affects it everywhere. e.g.

.mdc-dialog .mdc-dialog__surface{
  max-width: 300px;
  min-width: 0;
  color: tomato;
}

Theming

In order to alter the theme of the app you can again use the index [style.css](https://github.com/preactjs-templates/material/blob/master/template/src/style/index.css) and alter the theme variables in it defined here: https://material.io/develop/web/components/theme/#css-custom-properties

But you can also give class names to the components and use these variables to just change the theme of that component.

Commands

  • npm run start: Runs serve or dev, depending on NODE_ENV value. Defaults to dev server

  • npm run dev: Run a development, HMR server

  • npm run serve: Run a production-like server

  • npm run build: Production-ready build

  • npm run lint: Pass JavaScript files using ESLint

Fork It And Make Your Own

You can fork this repo to create your own boilerplate, and use it with preact-cli:

preact create username/repo my-project