FC DiviChild

# SCSS v4.*

Secondo quanto espresso nelle linee guida, è bene sviluppare i progetti seguendo la struttura predefinita del progetto SCSS del tema child.

ATTENZIONE

💣 La versione 4 è ormai deprecata! Questa documentazione (incompleta) viene lasciata qui soltanto per i vecchi progetti.

# Grunt.js

Il progetto SCSS viene compilato attraverso un apposito task di Grunt.js.
Quando il comando grunt viene lanciato da console, i file scss vengono compilati nel file css del tema style.css e contestualmente viene lanciato un task watch che compilerà automaticamente i file ogni volta che un file .scss contenuto nella cartella sass/ viene modificato.

# Struttura base

La struttura base del progetto SCSS prevede una serie di file base, più tutta una serie di file parziali che definiscono blocchi di elementi, dai globali come body, link, ecc... a elementi come bottoni, form, titoli, ecc...

La struttura è pensata per offrire il massimo della plasticità.

Di seguito l'elenco dei file e delle cartelle con il loro rispettivo contenuto.

File o Directory Contenuto Editabile
_configuration.scss file di configurazione del progetto Sì
_custom.scss inclusione di tutti i file custom Sì
_mixins.scss mixins default No
_variables.scss variabili Sì
_wp-style.scss intestazione del tema secondo standard WordPress Sì
child-theme.scss file principale No
custom/ directory di tutti i file custom del progetto Sì
partials/ parziali di default (non editare) No
vendors/ librerie di terza parte Sì

Editabilità

I file marcati come non editabili non dovrebbero essere modificati, al fine di permettere futuri aggiornamenti senza rischio di danni al codice.

In calce a questa pagina è presente l'alberatura completa del progetto.

# Configurazione

Nel file _configuration.scss sono presenti alcune variabili per gestire l'attivazione (inclusione) di acluni file parziali che determinano alcune parti di stile.
Ad esempio, impostando la variabile $typography_headings in false, verranno eleminate tutte le definizioni di default relative ai tag headings.

# Variabili

Le variabili del progetto sono contenute nel file _variables.scss prima di procedere alla personalizzazione dello stile è bene configurare al meglio tutte le variabili disponibili.

# Mixins

All'interno del file _mixins.scss sono presenti tutti i mixin del framework di sviluppo.

Di seguito l'elenco dei mixin che saranno mantenuti anche nella prossima main release del tema.

# Images

img_100($include_tag:false)
Include lo stile per creare un immagine fluida a width: 100%; height: auto;.

  • Param: $include_tag | Type: bool | Default: false
    Determina l'inclusione del tag img all'interno dell'elemento dove viene utilizzato

image_fit_cover($object_position:center)
Include il posizionamento assoluto di un'immagine con la proprietà object-fit: cover

  • Param: $object_position | Type: css property value | Default: center
    Determina l'allineamento dell'immagine e accetta come valore tutti i valori accettati dalla proprietà css object-position

image_fit_contain($object_position:center)
Include il posizionamento assoluto di un'immagine con la proprietà object-fit: contain

  • Param: $object_position | Type: css property value | Default: center
    Determina l'allineamento dell'immagine e accetta come valore tutti i valori accettati dalla proprietà css object-position

ATTENZIONE

I mixin image_fit_cover e image_fit_contain richiedono un elemento parent con proprietà position: relative

# Typography

pxToRem($size)
Imposta la misura del font in rem partendo dalla misura in px. Questo mixin effettua il calcolo partendo dal valore impostato nella variabile $font_base_size
Il parametro $size consiste nella misura in px (es: 22px);

  • Param: $size | Type: css property value | Default: null
    Consiste nella misura in px (es: 22px);

ellipsis()
Applica i puntini di sospensione agli elementi. Richiede una width impostata nell'elemento a cui viene assegnato questo mixin.

resetlist()
Resetta i comuni parametri delle liste OL e UL

# Translations

Tutti ti mixin translate si traducono nelle varie opzioni della proprietà css transform: translate[...]

translate ( $x, $y )
transform: translate($x,$y);

  • Params: $x, $y | Type: css property value | Default: null
    Consistono nella misura (in qualsiasi unità) orizzontale e verticale di quanto verrò traslato l'elemento;

translate-50Y
transform: translateY(-50%);
Transla verticalmente l'elemento del 50% della propria altezza.

translate-50Y
transform: translateY(-50%);
Transla orizzontalmente l'elemento del 50% della propria larghezza.

translate-50
transform: translate(-50%,-50%);
Transla orizzontalmente e verticalmente l'elemento del 50% della propria larghezza e altezza.

# Positioning

place($top,$right,$bottom,$left)
Imposta i valori top,right,left,bottom

  • Params: $top, $right, $bottom, $left| Type: css property value | Default: null
    Valore (in qualsiasi unità) da assegnare alle singole posizioni;

# Icone FontAwesome Pro

icon-before($icon,$family:"solid",$margin:5px)
Crea uno pseudo elemento ::before con icona

icon-after($icon,$family:"solid",$margin:5px)
Crea uno pseudo elemento ::after con icona

  • Param: $icon| Type: string | Default: null
    Il codice del font tra apici e backslash iniziale (es: "\100");
  • Param: $family| Type: string | Default: null
    Il nome della font family tra apici (es: "light");
  • Param: $margin| Type: css property value | Default: 5px
    Il margine destro o sinistro assegnato all'icona

FONT FAMILIES

I nomi delle famiglie FontAwesome sono: "thin", "light", "solid", "regular", "sharp"

ATTENZIONE

La famiglia "duotone" non può al momento essere usata con questo mixin

# Advanced Transitions

I mixin per le transition avanzate offrono delle transition preimpostate con i nomi standard.

  • Param: $duration| Type: css property value | Default: null
    Definisce la durata della transition

  • easeInQuad($duration)

  • easeInCubic($duration)

  • easeInQuart($duration)

  • easeInQuint($duration)

  • easeInSine($duration)

  • easeInExpo($duration)

  • easeInCirc($duration)

  • easeInBack($duration)

  • easeOutQuad($duration)

  • easeOutCubic($duration)

  • easeOutQuart($duration)

  • easeOutQuint($duration)

  • easeOutSine($duration)

  • easeOutExpo($duration)

  • easeOutCirc($duration)

  • easeOutBack($duration)

  • easeInOutQuad($duration)

  • easeInOutCubic($duration)

  • easeInOutQuart($duration)

  • easeInOutQuint($duration)

  • easeInOutSine($duration)

  • easeInOutExpo($duration)

  • easeInOutCirc($duration)

  • easeInOutBack($duration)

# Struttura del progetto SCSS

├── _configuration.scss
├── _custom.scss
├── _mixins.scss
├── _variables.scss
├── _wp-style.scss
├── child-theme.scss
├── custom
│   ├── _DIVI-mixins.scss
│   ├── _DIVI-override.scss
│   ├── _custom-mixins.scss
│   ├── _custom-variables.scss
│   ├── _mod--mobile-fixed-bottom-bar.scss
│   └── _mod--next-and-prev-navigations.scss
├── partials
│   ├── _buttons.scss
│   ├── _cookie-banner.scss
│   ├── _flex-grid.scss
│   ├── _fonts.scss
│   ├── _forms.scss
│   ├── _global.scss
│   ├── _tables.scss
│   ├── _typography.scss
│   └── _utilities.scss
└── vendors
    ├── _elegant-icons.scss
    ├── _normalize.scss
    └── fontawesome-pro
        ├── _animated.scss
        ├── _bordered-pulled.scss
        ├── _core.scss
        ├── _duotone-icons.scss
        ├── _fixed-width.scss
        ├── _functions.scss
        ├── _icons.scss
        ├── _list.scss
        ├── _mixins.scss
        ├── _rotated-flipped.scss
        ├── _screen-reader.scss
        ├── _shims.scss
        ├── _sizing.scss
        ├── _stacked.scss
        ├── _variables.scss
        ├── brands.scss
        ├── duotone.scss
        ├── fontawesome.scss
        ├── light.scss
        ├── regular.scss
        ├── sharp-light.scss
        ├── sharp-regular.scss
        ├── sharp-solid.scss
        ├── solid.scss
        ├── thin.scss
        └── v4-shims.scss

← SCSS v5.* →