PHPackages                             dnafactory/theme-frontend-blank - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. dnafactory/theme-frontend-blank

ActiveMagento2-theme

dnafactory/theme-frontend-blank
===============================

Tema base dnafactory per Magento 2

2.1.9(3y ago)03.9k—0%BSD-3-ClauseLessPHP ^7.1|^8.1

Since Jan 27Pushed 3y ago3 watchersCompare

[ Source](https://github.com/dnafactory/magento2-theme-blank)[ Packagist](https://packagist.org/packages/dnafactory/theme-frontend-blank)[ RSS](/packages/dnafactory-theme-frontend-blank/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (9)Dependencies (5)Versions (27)Used By (0)

DNAFactory - Corona Radiata
===========================

[](#dnafactory---corona-radiata)

Tema base per Magento 2, pensato per l'utilizzo in DNAFactory. Questo tema utilizza [Bootstrap 4](https://getbootstrap.com/docs/4.5/).

---

Note per gli sviluppatori
=========================

[](#note-per-gli-sviluppatori)

css
---

[](#css)

Nell'estendere questo tema, comincia copiando il file `css/source/_theme.less` nel tema figlio.
Questo file contiene tutte le variabili utilizzate (quelle commentate possono essere utilizzate semplicemente decommentandole), quindi è bene considerarle sempre la prima scelta in caso di customizzazioni.

Cerca di ragionare sempre in ottica mobile first, quindi evita il più possibile le direttive @media ... (max-width: ...), in favore di un approccio del tipo `@media ... (min-width:...)`. Allo stesso modo, evita di utilizzare segmenti: @media ... (min-width: ...) and (max-width: ...).

Quando scrivi codice less assicurati che sia **SEMPRE** incluso in una [less guard (da qui in poi "guardia")](http://lesscss.org/features/#mixins-feature-mixin-guards-feature).
***È IMPORTANTE!***: in caso contrario, il codice sarà processato ed incluso in **tutti** gli asset prodotti.

Alcuni esempi:

- codice da includere in style-m.css (non soggetto a breakpoints): ```
    &when(@media-common=true){
      ...il tuo css
    }
    ```
- codice incluso in un breakpoint da tablet in su: ```
    .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
      ...il tuo css
    }
    ```

Per gli stessi motivi, cerca di **non scrivere mai** media queries direttamente in css. Utilizza il mixin `.media-width(@extremum, @break)` di Magento 2 in modo da non avere mai intersezioni tra breakpoints.
Tuttavia, se dovessi avere la necessità di utilizzare una media query specifica, ricordati di uncluderla nella **guardia** `&when(@media-common=true)`.
Tutti i breakpoint sono configurabili tramite variabili e, qualora fosse necessario (ad esempio dopo l'aggiunta di un breakpoint), potrai aggiungere delle **guardie** specifiche per la tua configurazione nel file *css/source/lib/responsive.less*.
A tal proposito, quando si lavora su un tema figlio e si presenta la necessità di apportare modifiche strutturali, è **consigliato** procedere con l'override completo del file, al fine di evitare inutili ridondanze ed una mole eccessiva di regole css.
Valuta le tue scelte tenendo sempre bene in mente che:

1. Se hai la possibilità di utilizzare variabili del tema, fallo. Altrimenti...
2. Hai la possibilità di utilizzare (nei template o nei layouts) una o più classi preesistenti? Fallo (fai sempre riferimento alla [documentazione di bootstrap](https://getbootstrap.com/docs/4.5/) e ricorda le utilities per il responsive). Altrimenti...
3. Hai la necessità di aggiungere delle regole css? Aggiungile nel relativo file `_extend.less` in una specifica **guardia**. Altrimenti...
4. Hai la necessità di rimuovere e/o modificare delle regole definite in un file ereditato? Esegui un override del file e specifica le tue modifiche. Altrimenti...
5. La modifica riguarda una funzionalità di bootstrap? Riparti dal punto 1 facendo riferimento ai sorgenti scss di Bootstrap (presenti nella dipendenza `dnafactory/module-bootstrap`).

### Fogli di stile

[](#fogli-di-stile)

Gli stili del tema (esclusi print ed email) sono divisi in 4 file css:

1. [critical.css](#1-critical)
2. [style-m.css](#2-style-mcss)
3. [styles-l.css](#3-styles-lcss)
4. [DNAFactory\_Bootstrap/css/bootstrap.css](#4-bootstrapcss) (generato dai sorgenti scss tramite il relativo modulo)

#### 1. Critical

[](#1-critical)

Contiene tutti gli stili che interessano il critical path: tutto ciò che è visibile al primo accesso alla pagina. Sono state aggiunte delle specifiche **guardie** per la compilazione di questo file e sono:

- il type *'critical'*: ```
    &when (@media-type='critical'){
    ...il tuo css
    }
    ```
- le media queries sui vari breakpoints. Funzionano con il mixin `.media-width()` esattamente come le normali media queries, ma è necessario specificare una guardia sul parametro `@extremum='c-min'`: ```
    .media-width(@extremum, @break) when (@extremum = 'c-min') and (@break = @screen__m) {
      ...il tuo css
    }
    ```

    In ottica mobile-first, non sono previsti *c-max*.

Questi stili vengono aggiunti direttamente nel documento html, quindi fai attenzione a ciò che inserisci.

#### 2. styles-m.css

[](#2-styles-mcss)

Non ci sono variazioni rispetto all'originale (contenuto in magento/theme-frontend-blank).

#### 3. styles-l.css

[](#3-styles-lcss)

Non ci sono variazioni rispetto all'originale (contenuto in magento/theme-frontend-blank).

#### 4. Bootstrap.css

[](#4-bootstrapcss)

Il tema è basato su Bootstrap 4, quindi preferisci **sempre** l'utilizzo di classi bootstrap all'aggiunta di altro codice css.
Utilizza/estendi questi sorgenti soltanto se hai la necessità di utilizzare mixin, functions o variabili definite in scss.
Come per l'utilizzo delle **guardie** in less, un buon mix di direttive `@extend` e mixins, può ridurre notevolmente le righe di codice e le ridondanze negli assets prodotti.

### Modificare/aggiungere colori al tema

[](#modificareaggiungere-colori-al-tema)

### Aggiungere un breakpoint

[](#aggiungere-un-breakpoint)

Come per qualunque altra variabile less, tutti i breakpoint sono condivisi con i sorgenti scss di Bootstrap. In più, è presente un sistema (sperimentale) che permette di condividere i bp (definiti nel progetto less) con le componenti JS. Farò riferimento a questa feature utilizzando il nome **CSS->JS**. Funziona in 2 step:

1. i bp vengono inseriti nello style del documento come [variabili css](https://www.w3.org/TR/css-variables-1/)
2. la componente `js/lib/dna-responsive`, richiamata all'occorrenza, restituisce il valore del bp richiesto, leggendolo direttamente dal document.

Le variabili presenti (da @screen\_\_xxs a @screen\_xl) dovrebbero essere sufficienti a coprire tutte le eventuali necessità. Tuttavia, quando e se necessario, è possibile aggiungerne di personalizzati seguendo queste indicazioni al fine di conservare tutte le features associate:

1. Definisci il tuo bp come variabile all'interno del file `_variables.less` del tuo tema figlio;
2. Copia il file `lib/_responsive.less` all'interno del tuo tema figlio e modifica/aggiungi le guardie di cui hai bisogno;
3. **PER LA GENERAZIONE DELLE CLASSI BOOTSTRAP:** crea (se non è presente) il file `DNAFactory_Bootstrap/web/css/source/scss/themes/_extends.scss`all'interno del tuo tema figlio ed estendi le variabile come definito nella [documentazione ufficiale](https://getbootstrap.com/docs/4.5/layout/grid/#variables));
4. **SOLO PER LA FEATURE CSS->JS:** copia il file `_responsive-vars.less` nel tuo tema figlio ed aggiungi il tuo bp (leggi la doc interna per i dettagli);

Si consiglia di evitare (o quantomeno limitare) l'utilizzo di bp custom e di utilizzare **SEMPRE** le specifiche guardie all'interno del codice less.

### Utilizzare il layout full-width

[](#utilizzare-il-layout-full-width)

### Aggiungere un'icona oppure un set di icone

[](#aggiungere-unicona-oppure-un-set-di-icone)

Templating
----------

[](#templating)

### Traduzioni / Localizazzione

[](#traduzioni--localizazzione)

Quando lavori a questo tema, utilizza **sempre** l'ingese come lingua base: la localizzazione deve poter essere effettuata facendo riferimento ad UNA SOLA lingua di partenza e Magento 2 utilizza il codice *en\_US* di default.

JS
--

[](#js)

Per permettere l'implementazione e l'esecuzione di moduli AMD in JS (vanilla) è stato realizzato un mini-framework.

E' molto utile poter fare affidamento su moduli estendibili (tramite mixin o semplice override) anche per quanto riguarda le funzionalità non legate a specifici elementi del DOM, come ad esempio fix di compatibilità tra browser, estensione di funzionalità degli input di base ecc...

E' stato quindi realizzato un plugin di base (in `js/lib/vanilla-plugin.js`) che permette di creare componenti JS (da qui in poi JSComponent) le cui dipendenze sono caricate in modo asincrono.

### Markup di esempio per un carosello:

[](#markup-di-esempio-per-un-carosello)

#### boxed

[](#boxed)

```

    Slide 1

    Slide 2

    Slide 3

    Slide 4

    Slide 5

    Slide 6

    Slide 7

    Slide 8

```

#### full width

[](#full-width)

```

    Slide 1

    Slide 2

    Slide 3

    Slide 4

    Slide 5

    Slide 6

    Slide 7

    Slide 8

```

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 78.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~40 days

Recently: every ~61 days

Total

20

Last Release

1172d ago

PHP version history (2 changes)2.0.0-alpha.2PHP ~7.1

2.1.6PHP ^7.1|^8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/ae060630c3f388ec31ba0a230764210b441db7fdca225c670e11e843cbce3ef6?d=identicon)[dnafactory](/maintainers/dnafactory)

![](https://www.gravatar.com/avatar/f2ba17e191fadc64eef7e823f27ac0c807d278683af25fe2f7b59ec8ae1d8c07?d=identicon)[ciroarcadio](/maintainers/ciroarcadio)

---

Top Contributors

[![ciroarcadio](https://avatars.githubusercontent.com/u/5919607?v=4)](https://github.com/ciroarcadio "ciroarcadio (18 commits)")[![antonio-vitale](https://avatars.githubusercontent.com/u/56556789?v=4)](https://github.com/antonio-vitale "antonio-vitale (5 commits)")

---

Tags

thememagento2

### Embed Badge

![Health badge](/badges/dnafactory-theme-frontend-blank/health.svg)

```
[![Health](https://phpackages.com/badges/dnafactory-theme-frontend-blank/health.svg)](https://phpackages.com/packages/dnafactory-theme-frontend-blank)
```

###  Alternatives

[smile/elasticsuite

Magento 2 merchandising and search engine built on ElasticSearch

8044.5M33](/packages/smile-elasticsuite)[mollie/magento2

Mollie Payment Module for Magento 2

1121.6M10](/packages/mollie-magento2)[smile/module-debug-toolbar

Smile Debug Toolbar

146247.6k2](/packages/smile-module-debug-toolbar)[lillik/magento2-price-decimal

Magento 2 Price Decimal Precision

111147.5k](/packages/lillik-magento2-price-decimal)[magepal/magento2-customeraccountlinksmanager

Customer Account Links Manager for Magento2 allows you to quickly and easily remove unwanted links from customer account dashboard

4084.9k](/packages/magepal-magento2-customeraccountlinksmanager)[scandiweb/satoshi

Satoshi Theme for Magento 2 on Hyva - High-performance, user experience-focused theme

2881.2k](/packages/scandiweb-satoshi)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)