frontend template boilerplate css html atomic-design postcss accessibility build-tool dev-server javascript typescript

Plasttic Web Workflow

A methodology based Front-End development environment.

About

Plasttic Web Workflow is a methodology based professional Front-End development environment for Websites and Web Apps: HTML and CSS/PostCSS boilerplate, Atomic Design System, Javascript/Typescript, Dev/Build Scripts, File structure, Conventions & Best Practices.

This workflow is not intended to be a framework, but rather a starting point, allowing the developer to implement a methodology that produces accessible, scalable and robust interfaces.

Related projects:

Methodology

Core Fundamentals
Best Practices/Conventions
Performance/Core Web Vitals
Documentation
Accessibility/Semantic HTML
Design System/Atomic Design
BEM Methodology
CSS Reset
SEO/Social Media Boilerplate
Code Conventions/Linting
Debug/Test

Start

Quick Start:

(cd into your projects folder)
npx create-plasttic
cd project-name
npm install

Creates a folder with the project name you defined
Downloads and installs the latest version of Plasttic Web Workflow
Installs all the project dependencies

Workflow

Custom Dev/Build Scripts, File/Folder Structure, HTML Boilerplate, CSS Reset, Templates, Atomic Design CSS, Print CSS, ES Modules, Typescript, PostCSS, CSS/JS Minification, Conventions, Linting, Image Optimization (Soon!), Testing (Soon!)

Development

Run npm run dev to start the dev server on http://localhost:8000 *
Run npm run build when you are ready to publish *
*Source folder: src/, Dev folder: dev/, Build folder: dist/

Customize:

Search for "TODO:" in comments, relative to info that needs to be changed or checked. After, change it to "DONE:". If using VS Code, use the Todo Tree extension or TODO Highlight
If .##gitignore## exists, rename it to .gitignore and customize to your project info.

Development with https:

Step 1: Run mkdir certs
Step 2: Run cd certs
Step 3: Install certificate with mkcert
Step 4: Check certificate filenames and/or path in the file browser-sync.cjs
Step 5: Run npm run dev:ssl to start the dev server on https://localhost:8000

Manual Install (Clone):

Step 1: Copy the repository git clone https://github.com/tojeiro-me/Plasttic.git (The project files are inside the packagefolder)
Step 2: Move the the contents of the package folder into your project-folder
Step 3: Run cd project-folder-name
Step 4: Rename .##gitignore## to .gitignore
Step 5: Run npm install to install the needed dependencies
Step 6: Run npm run dev to start the dev server on http://localhost:8000 *
Step 7: Run npm run build when you are ready to publish *
*Source folder: src/, Dev folder: dev/, Build folder: dist/