Plasttic Web Workflow
A methodology based Front-End development environment.
Index
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
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
- Creates a folder with the
project name
you defined - Downloads and installs the latest version of Plasttic Web Workflow
- Installs all the project dependencies
- 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 onhttp://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 thesrc
folder, except thetemplates
folder. Do not delete or move the following files inassets
folder:js/scripts.ts
(you can rename toscripts.js
),js/modules/module.ts
(at least one filename.ts/.js
must exist),css/styles.css
andcss/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 onhttps://localhost:8000
Libraries
Manual Install (Clone)
-
Step 1: Copy the repository
git clone https://github.com/tojeiro-me/Plasttic.git
(The project files are inside thepackage
folder) -
Step 2: Move the the contents of the
package
folder into yourproject-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 husky
to install the Git hooks (Linting pre-commit) -
Step 6: Run
npm run dev
to start the dev server onhttp://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!)