plasttic

Plasttic Web Workflow

A methodology based Front-End development environment.

    

---

Index

• Plasttic Web Workflow
  • Index
  • About
    • Related projects
  • Methodology
  • Start
    • Quick Start
      • Typescript
      • Workflow
      • Development
      • Customizing
      • Linting
      • Development with https
      • Libraries
    • Manual Install (Clone)
  • Templates
  • Documentation
  • Links
  • Follow
  • License

---

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, Typescript/Javascript, 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 adopt or customize the methodology with the objective of producing accessible, scalable and robust interfaces.

Note: The files installed are not empty. The reason is that, by creating a template, it's easier to demonstrate the methodology, concepts and conventions, and even building upon the existing code.

Related projects

---

• Plasttic CSS Reset

• Plasttic HTML Boilerplate

---

Methodology

---

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

Start

---

Quick Start

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

1. Creates a folder with the project name you defined
2. Downloads and installs the latest version of Plasttic Web Workflow
3. Installs all the project dependencies
4. Installs Git hooks (Linting pre-commit)

Typescript

• Install Typescript globally npm install -g typescript *although it is installed as a devDependency, the Dev Scripts may not work as expected if you do not install it globally also.
• TS-Reset is installed by default. If you wish to disable it, delete the reset.d.ts file.
• ⚠️ The ESLint VSCode extension isn't working with typescript files (Parsing error:). Typescript is still linted in the Dev scripts and Husky hooks and VSCode has builtin support for typescript validation. Suggestion: Use Prettier ESLint (requires some configuration: see the plugin page and the Plasttic VSCode settings)

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/

Customizing

(Note: The files installed are not empty. The reason is that, by creating a template, it's easier to demonstrate the methodology, concepts and conventions, and even building upon the existing code.)

• 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.
• ⚠️ Do not delete, rename or move files in the root folder. Do not delete, move or rename folders in the src folder, except the templates folder. Do not delete or move the following files in assets folder: js/scripts.ts (you can rename to scripts.js), js/modules/module.ts (at least one file name.ts/.js must exist), css/styles.css and css/print.css (do not rename this CSS files) - this files must exist, even if empty. If not used, delete the corresponding tag in the HTML page. ⚠️

Linting

(Extends the editor CSS rules and .editorconfig)

• Prettier
  • Plugin: Prettier
  • Files: html, css, js, ts, md, json
  • Usage: Plugin and Scripts
  • Result: Errors, Warnings and Fix
  • Config: .prettierrc, .prettierignore
• ESLint
  • Plugin: ESLint + Prettier ESLint (see Typescript warning)
  • Files: html, js, ts
  • Usage: Plugin and Scripts
  • Result: Errors, Warnings and Fix
  • Config: .eslintrc.cjs, .eslintignore
• Stylelint
  • Plugin: Stylelint
  • Files: css, html
  • Usage: Plugin and Scripts
  • Result: Warnings, Limited fixes and Styles order
  • Config: .stylelintrc.json

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

Libraries

• TS-Reset (If you wish to disable it, delete the reset.d.ts file.)
• Zod

---

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: Runnpm run husky to install the Git hooks (Linting pre-commit)

• 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/

Templates

---

• Under Construction
• 404 Error Page
• Single Page (Soon!)

Documentation

---

• File Comments
• Check docs folder 🚧
• Documentation website (Soon!)

Please check the CHANGELOG for major or breaking changes

Links

---

• Website 🚧
• Documentation (Soon!)

Follow

---

  

---

License

---

• MIT

---