Get unlimited public & private packages + team-based management with npm Teams.Learn more »

@acanto/frontend

2.0.0-beta.60 • Public • Published

@acanto/frontend

Libreria di strumenti, utility, componenti e altro per lo sviluppo frontend dei siti di Acanto.

L'idea è quella di avere piccoli componenti facilmente riutilizzabili senza dover sovrascrivere comportamenti CSS o JS nei singoli progetti. Tutto ciò che include questa libreria deve quindi essere scarno e generico e buttar fuori il minor codice possibile.

Quando utilizzi questa libreria è bene quindi selezionare con cura i vari componenti e parti di componenti che si vogliono includere nel progetto in corso.

Struttura

Styles

Tutta la parte di CSS è scritta in SCSS prediligendo mixin e placeholder di modo che anche se inclusi non generino codice fino al loro utilizzo esplicito.

Scripts

Il JavaScript di questa libreria deve rimanere in codice nativo, senza framework o librerie troppo complesse. Nel momento in cui queste sono necessarie l'importante è scrivere la libreria di modo che il tree shaking elimini la possibilità di inclusione involontaria di librerie e grossi blocchi di codice inutili.

Templates

I componenti che hanno bisogno di un template da usare in October mantengono qui un file sample.htm d'esempio in quanto non possono essere integrati in maniera automatica nel progetto all'interno del CMS. Sarà quindi necessario copiare/incollare/modificare a piacimento il template nella cartella /themes/acanto/src/partials/

Note per lo sviluppo di progetti con @acanto/frontend

GSAP

Per usare GSAP premium inanzitutto scaricare lo zip GSAP with Shockingly Green bonus dalla dashboard di greensock.com

  • scompattare lo zip, trovare e copiare il file gsap-bonus.tgz così com'è nel progetto in corso. Possibilmente copiarlo nel path themes/acanto/src/vendor/gsap-bonus.tgz
  • nelle dependencies del package.json del progetto in corso aggiungere questa voce con il path giusto:
"dependencies"{
  ...
  "gsap": "file:themes/acanto/src/vendor/gsap-bonus.tgz"
}
  • lanciare npm install o npm i
  • nel file JavaScript dove si intende usarlo fare un normale import e registrare i plugin che si vuole utilizzare per evitare problemi di tree shaking nella futura build di production. Ad esempio:
import gsap from "gsap";
import CSSPlugin from "gsap/CSSPlugin";
import SplitText from "gsap/SplitText";
 
gsap.registerPlugin(CSSPlugin, SplitText);
  • a posto.

Da notare è che il file themes/acanto/src/vendor/gsap-bonus.tgz deve rimanere nel repository e su git altrimenti la CI non sa dove andarlo a prendere non essendo pubblica questa libreria.

Note riguardo allo sviluppo interno di questa libreria

  • About GreenShock premium plugin being on npm, see this thread
  • We might use SimpleStateManager to use media queries in javascript, populating its states with the exported sass variables.
  • Parallax scrolling well done with CSS variables basicScroll or Rellax

Framework

  • Che utilizzi le logiche dei framework JavaScript e che però mantenga le capacità server side di PHP.
  • Deve permettere di sviluppare siti dinamici in php
  • Se fare un versione per i robots snella solo html e poi usare htaccess

Keywords

none

Install

npm i @acanto/frontend

DownloadsWeekly Downloads

372

Version

2.0.0-beta.60

License

UNLICENSED

Unpacked Size

225 kB

Total Files

225

Last publish

Collaborators

  • avatar