The plasttic from tojeiro-me

Tojeiro: Github Monkey13 to Tojeiro (create one for monkey13?)

Plasttic: SCSS Mixins

.m13-container as mixin with general declarations and default values in parameters ???
Pseudo
// based on Kevin Powell
@mixin pseudo(
$element: after,
$content: ‘’,
$top: auto,
$bottom: auto,
$left: auto,
$right: auto) {
position: relative;

&::#{$element} {
content: $content;
position: absolute;
top: $top;
bottom: $bottom;
left: $left;
right: $right;
@content;
}
}
Container
/// Define the general styles of the container element
/// Extend using .sectionSelector + .m13-container
/// @author Kitty Giraudel
/// Use: .m13-container
@mixin container {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
REVIEW:
/**

From Kevin Powell
https://github.com/kevin-powell/demo-starter-template-with-sass
*/
// @use '../abstracts' as *;
//
// :root {
// --section-spacing: 3.5rem;
// @include mq(medium) {
// --section-spacing: 7rem;
// }
// @each $color, $shade in $colors {

// @each $prop, $value in $shade {
// --clr-#{$color}-#{$prop}: #{$value};
// }
// }

// @each $screen-size, $property in $type-scale {
// @if $screen-size == small {
// @each $prop, $value in $property {
// --fs-#{$prop}: #{$value};
// }
// } @else {
// @include mq(small) {
// @each $prop,
// $value in $property {
// --fs-#{$prop}: #{$value};
// }
// }
// }
// }
// }

Breakpoints
// For Media Queries based on Breakpoints map
// -----------------------------------------------------------------------------
@mixin media-query($brkpoint) {
$size: map-get($vars_brkp, $brkpoint);
@if ($size != null) {
@media screen and (min-width: $size) {
@content;
}
} @else {
@warn "Breakpoint #{$vars_brkp);} wasn't found in $breakpoints.";
}
}

// in Variables:

// $vars_brkp: (
// 'sm': 360px,
// 'md': 768px,
// 'xl': 1024px,
// );

// Use:

// body {
// font-size: 2rem;
// @include media-query(sm) {
// font-size: 1rem;
// }
// }

Plasttic v2.0: Implementation of the Atomic Design method on the Sass structure

Plasttic Recurring:

sitemap date update at each release/content update
canonical url uodate for each page
Performance check (Preconnect/DNS-Prefetch, Images Lazy Loading, No CDN for CSS, Local hosted fonts)
Aria-roles/aria-label

Plasttic v1.4.3: index.html (Logo for print media only)

class="pttc-printonly"

Plasttic: Web Components in vanilla JS ?

Plasttic v1.4.5: review Sass folder structure

Review Files comments
Functions and Mixins

Review VSCode Extensions

Web Boilerplate v1.4.0: Review Sass Files

Base, root, typography
Functions and Mixins
Variables: Maps
Utility classes
TOC on Sass files and README with usage info (mixins, functions, …)
More REVIEWS to improve: see new Issue “code to REVIEW”

Web Boilerplate: JS files (main, starter/onload (init), components, events

Plasttic v2.0: ofuscate email[at]example[dot]com / phone? with JS

WebSite Template: CSS

CSS: order, BEM
Print.css?

Web Boilerplate: SCSS Variables

typography.scss
/**

from Kevin Powell
https://github.com/kevin-powell/demo-starter-template-with-sass
*/

// h1, h2, h3, h4 {
// --font-weight: 700;
// --font-width: 80;
// font-weight: normal;
// font-stretch: 100%;
// line-height: 1.1;
// color: var(--clr-neutral-800);
// }

// h1 {
// --font-weight: 900;
// color: var(--clr, var(--clr-primary-400));
// }

// // This is setting the font-sizes
// // based on the ones in the abstract
// // folder, go there to make updates

// h1,
// .h1 {
// font-size: --fs-800;
// }

// h2,
// .h2 {
// --flow-spacer: 1.5em;
// font-size: --fs-700;
// }
// h3,
// .h3 {
// --flow-spacer: 1.5em;
// font-size: --fs-600;
// }

// h4,
// .h4 {
// font-size: --fs-500;
// }

// small,
// .text-small {
// font-size: var(--fs-300);
// }

// strong {
// --font-weight: 50

variables.scss (root.scss ?)
/// Fonts
// -----------------------------------------------------------------------------

// Generic font-faces with system fonts

$font_system: (
'sans': (
Verdana,
Helvetica,
Arial,
sans-serif,
),
'serif': (
Georgia,
'Times New Roman',
Times,
serif,
),
'mono': (
'Courier New',
Courier,
Monaco,
monospace,
),
);

/// REVIEW: is it useful?
// @each $type, $family in $font_default {
// .m13_font-#{$type} {
// font-family: $family;
// }
// }

/// Type sizes
// -----------------------------------------------------------------------------
$vars_type: (
'body': 1.05rem,
'h1': 2.5rem,
'h2': 2rem,
'h3': 1.5rem,
'h4': 1.05rem,
);

/// REVIEW: use HSL
$vars_color: (
'brand-blue': #40a9bf,
// hsl: 190/50/50
'brand-grey': #2d2d2d,
// hsl: 0/0/18
);

/// REVIEW:
/**

From Kevin Powell
https://github.com/kevin-powell/demo-starter-template-with-sass
*/
// Text utility class > _utilities.scss ????
// https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/
//
// @each $color,
// $shade in $colors {

// @each $prop,
// $value in $shade {
// .text-#{$color}-#{$prop} {
// color: var(--clr-#{$color}-#{$prop}) !important;
// }

// .bg-#{$color}-#{$prop} {
// background-color: var(--clr-#{$color}-#{$prop}) !important;
// }
// }
// }

// Breakpoints
// -----------------------------------------------------------------------------
$vars_brkp: (
'sm': 480px,
'md': 768px,
'xl': 1024px,
'xxl': 1280px,
);
// These are the most used breakpoints.
// Use them as a starting point
// and adjust to the right ones for your layout.

/// Layout
// -----------------------------------------------------------------------------

/// Container's maximum width
$vars_ctn-maxWidth: 1200px;

/// Utility Vars
// -----------------------------------------------------------------------------

/// Relative or absolute URL where all assets are served from
$vars_url-cdn: ''; // External CDN: 'https://cdn.monkey13.studio/';
$vars_url-assets: 'assets/';
$vars_url: (
'images': $vars_url-cdn + $vars_url-assets + 'img/',
'fonts': $vars_url-cdn + $vars_url-assets + 'fonts',
'script': $vars_url-cdn + $vars_url-assets + 'js/',
'styles': $vars_url-cdn + $vars_url-assets + 'css/',
);

/// REVIEW: mixin(Fonts)? & functions with preload, preconnect, dns-prefetch, defer
/// see Functions

// @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
// Choose self-hosted over CDN

Plasttic v2.0: Readme News section on top (latest entries on changelog and website) or NEWS.md

Website Template v1.3.1: Review SASS Boilerplate files

Review / Learn

https://sass-guidelin.es/

https://github.com/KittyGiraudel/sass-boilerplate/tree/master/stylesheets

Web Boilerplate: code to REVIEW

Code to be tested, improved or completed
(search for REVIEW:)

Plasttic 2.0: TODOs

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

Website Template: root files

browserconfig.xml
humans.txt
robots.txt

Web Boilerplate v1.4.0: Logo in index.html & Meta info

Plasttic v2.0: Force HTTPS

https://www.google.com/search%3Fq%3Dhostinger%2520force%2520https%26ie%3Dutf-8%26oe%3Dutf-8%26client%3Dfirefox-b-m&gl=PT&m=0&pc=srp&uxe=eomtse&hl=en&src=1

Plasttic: Performance

https://web.dev/preload-critical-assets/

https://developer.mozilla.org/en-US/docs/Web/Performance

https://fantinel.dev/web-images-modern-formats/

https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/

https://www.crazyegg.com/blog/speed-up-your-website/

END: Performance area on README

Plasttic: Init JS

get Year for copyright
e-mail reformat / Ofuscate ?
reset forms?
other?
see WS.js

Website Boilerplate: Javascript Commenting

https://blog.bitsrc.io/best-practices-for-using-comments-in-javascript-4c4cd8619c18

Web Boilerplate: Changelog TXT to MD

Plasttic v2.0: Documentation

Framework: Astro, VitePress, VuePress, Docus
+++++++++++++++++++++++++++++++++++++
About Utility Classes
Why BEM?
Abbreviation list (ctn container, btn button, ...)
Resources links Page
(https://vimeo.com/290098411, https://upload.wikimedia.org/wikipedia/commons/1/18/Jeremy_Keith_-_Resilient_Web_Design_%28portrait%29.pdf, …)
(Tools, References, Guides, Articles, Concepts)
HTML, CSS and JS comment conventions
(see https://blog.bitsrc.io/best-practices-for-using-comments-in-javascript-4c4cd8619c18)

Plasttic: Favicon, Social Logos

index.html, site.webmanifest, browserconfig.xml

Plasttic v2.0: New LiveSass Compiler, NPM scripts, Vite?

[x] Test Sass with Vite (Dev)
[ ] Test Sass with Vite (Build)

Website Boilerplate: Review Social Meta tags

Reference websites
index.html meta tags and site.webmanifest

Check Resources Examples + WSf

htaccess (if relevant)
Order allow,deny Deny from ALL

Basic Styling
Accessibility Hidden Link (https://youtu.be/jDDaOFr9nqQ)

Plasttic: Review Social Tags

https://superfriendly.com/

Web Boilerplate: HTML, CSS and JS comment conventions

https://blog.bitsrc.io/best-practices-for-using-comments-in-javascript-4c4cd8619c18

Plasttic: SCSS Functions

/// REVIEW:
/// less parameters? other variables?
/// external URL?
/// see $vars_url map in variables

/// Returns URL to an image based on its path
/// @param {String} $path - image path
/// @param {String} $base - base URL - $vars_url
/// @return {Url}
/// @require $base-url

// @function image($path, $base: $vars_url-assets) {
// @return asset($base, 'img/', $path);
// }

/// Returns URL to a font based on its path
/// @param {String} $path - font path
/// @param {String} $base - base URL - $vars_url
/// @return {Url}
/// @require $base-url

// @function font($path, $base: $vars_url-assets) {
// @return asset($base, 'fonts/', $path);
// }