Documentazione Gantry 5 per Joomla!

Concetti fondamentali per iniziare con un template framework di nuova generazione.

Le Media Query consentono di applicare il CSS solo a un tipo di schermo specifico. Ad esempio, se si dispone di un elemento della pagina che si desidera visualizzare in modo diverso sui telefoni rispetto a un desktop.

Gantry 5 rende facile da fare, e questa guida vi porterà attraverso il processo di definizione dei breakpoint, così come l'aggiunta di Media Query al vostro file personalizzato custom.scss

Definizione dei breakpoint

Poiché Gantry 5 consente di definire facilmente i breakpoint tra i tipi di viewport, è possibile creare con facilità un'esperienza utente ottimizzata per una vasta gamma di tipi di dispositivi.

media query

I template Gantry 5 includono quattro chiavi breakpoint definiti da unità rem. È possibile impostare i punti di interruzione nel pannello amministrativo Stili all' interno dell' Gantry Admin. Per accedere a questo pannello, spostarsi su Administrator → Components → Gantry 5 Themes → Theme e selezionare la scheda Styles. Poiché questa scheda è specifica per Outline, è possibile modificare queste impostazioni su base ad ogni Outline.

Se non si ha familiarità con le unità rem, c'è un ottima spiegazione qui scritta da Russ Weakley di SitePoint. Inoltre, è possibile leggere una guida dettagliata da W3.

Uso delle Media Query sul sito Web

L' utilizzo di query multimediali personalizzate può essere fatto molto facilmente all' interno del file custom.scss. Potete saperne di più sulla creazione di questo file e su come funziona in questa guida dettagliata.

Di seguito è riportato un esempio del codice che si aggiungerebbe al file custom.scss per consentire l' aggancio rapido e semplice ai breakpoint di Gantry 5.

Una riga importante da notare è @import "nucleus/mixins/breakpoint", che carica il file _breakpoints.scss, rendendo il punto di breakpoint del mixin disponibile per l' uso.
{code lang:css showtitle:false}// Gantry 5 custom CSS file

// import breakpoints
@import "dependencies";

// Typical values are the default breakpoints set in Gantry 5
// but these values are user definable in style settings
// so that is why the code below uses mixins to get the actual
// values from Gantry 5 template.

// commonly used media queries

// typically min 75rem
@include breakpoint(large-desktop-range) {

}
// typically range 60rem to 74.938rem
@include breakpoint(desktop-range) {

}

// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {

}
// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {

}
// typically max 30rem
@include breakpoint(small-mobile-range) {

}

// Less commonly used media queries

// typically min 60rem
@include breakpoint(desktop-only) {

}
// typically min 48rem
@include breakpoint(no-mobile) {

}
// typically max 47.938 rem
@include breakpoint(mobile-only) {

}
// typically max 59.938rem
@include breakpoint(no-desktop) {

}

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { ... your css in here ... }

@import "nucleus/mixins/breakpoints";{/code}
Qualsiasi CSS che si desidera applicare a uno specifico punto di interruzione può essere aggiunto all' interno della Media Query appropriata di cui sopra.

Cosa c' è dietro le quinte?

Di seguito, potete vedere un esempio di una versione non-mixin dello stile breakpoint che abbiamo elencato sopra. Questo dovrebbe dimostrare ciò che accade dietro le quinte, in quanto i mixins sono fondamentalmente delle scorciatoie che aiutano a evitare il noioso scripting, più estenuante.

NOTA: Si raccomanda vivamente di utilizzare i mixin per la loro semplicità, tuttavia l'esempio che segue funzionerà nel caso in cui non si desideri utilizzarli. L' esempio riportato di seguito non è esaustivo e potrebbe influire sulle le funzionalità esistenti se un template utilizza le Media Query che abbiamo affrontato di seguito e che non sono incluse in questo esempio.
{code lang:css showtitle:false}@import "dependencies";
// For small phones
@media all and (max-width: $breakpoints-large-mobile-container) {
}
// For big phones
@media all and (max-width: $breakpoints-tablet-container) and (min-width: $breakpoints-large-mobile-container) {
}
// For tablets
@media all and (max-width: $breakpoints-desktop-container) and (min-width: $breakpoints-tablet-container) {
}
// For medium size computer screens
@media all and (max-width: $breakpoints-large-desktop-container) and (min-width: $breakpoints-desktop-container) {
}
// For large computer screens
@media all and (min-width: $breakpoints-large-desktop-container) {
}{/code}