Joomla!dal CSS

a BootStrapLuca Racchetti

Luca RacchettiDocente per associazioni di volontariato dal 2014

PHP, CSS, MySQL, Bootstrap, ChronoForms

● razzo.org● facebook.com/luca.racchetti● plus.google.com/+LucaRacchetti

Laureato Magistrale in Informatica all’Università degli Studi di Milano-BicoccaConsultant presso Target Reply (Business Intelligence)Uso Joomla! da diversi anni, fin dalla versione 1.5

ProgrammaCSS, Bootstrap e Joomla: come si sono evoluti in questi ultimi 10 anni! Una breve storia del loro sviluppo parallelo e delle sinergie tra essi.

Analizzeremo le comodità di avere un framework versatile come Bootstrap all’interno di un software complesso come Joomla!

Daremo uno sguardo sulle potenzialità di Bootstrap 4 per poter comprendere cosa ci aspetta dalla prossima release di Joomla!

Un po’ di storia...

I primi 5 anni di Joomla : 2005 -2012

31 Gennaio2012

ReleaseBootstrap 2.0

19 Agosto2011

ReleaseBootstrap 1.0

ReleaseCSS 2

7 Giugno2011

ReleaseJoomla 1.0.0

16 Settembre2005

Marzo2006

Primo librosu Joomla!

ReleaseJoomla 1.5

22 Gennaio 2008

ReleaseJoomla 2.5

24 Gennaio 2012

ReleaseJoomla 3.0

27 Settembre2012

Dal 2012 a oggi

19 Agosto2013

ReleaseBootstrap 3.0

18 gennaio2018

ReleaseBootstrap 4.0

ReleaseCSS 3

7 Novembre2014

ReleaseJoomla 4.0Stable

Fine2018

ReleaseJoomla 3.7

25 Aprile2017

ReleaseJoomla 3.0

27 Settembre2012

ReleaseJoomla 3.5

21 Marzo2016

ReleaseJoomla 4.0Alpha

18 Novembre2017

CSS: un breve ripasso

Selettori : Classi & ID

<p id="identificativo" class="classe" >testo</p>

p {...}.classe {...}#identificativo {...}

Priorità:Elemento < Classe < Identificativo

Case history:Purity II - JoomlArt

Classi proprietarie legate al template o al framework della casa produttrice >>

CSS: molto potente ma...

Quando utilizzi CSS (inline o external) ti trovi a ripetere molte righe di codice

non riutilizzabile e difficilmente manutenibile

DON’T REPEAT YOURSELF!

I punti forti di Bootstrap: le classi e la griglia!

Codice CSS

<button type="button" class="btn">Default</button>

Classe Bootstrap

display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;

Flessibilità e rapidità : tutto con le classi!

<button type="button" class="btn

btn-primary">Primary</button>

<button type="button" class="btn

btn-success">Success</button>

<button type="button" class="btn

btn-danger">Danger</button>

<button type="button" class="btn

btn-link">Link</button>

color: #fff; background-color:

#337ab7; border-color:

#2e6da4;

color: #fff; background-color:

#5cb85c; border-color:

#4cae4c;

color: #fff; background-color:

#d9534f; border-color:

#d43f3a;

font-weight: 400; border-radius: 0;

La griglia base

La griglia - Da Bootstrap 2.3.2 a Bootsrap 4

Bootstrap 2.3.2<div class="row"> <div class="span4">...</div> <div class="span8">...</div></div>

Bootstrap 4<div class="row"> <div class="col-4">1 of 2</div> <div class="col-8">2 of 2</div></div><div class="row"> <div class="col">1 of 3</div> <div class="col">2 of 3</div> <div class="col">3 of 3</div></div>

La griglia flexbox

Bootstrap 4 per gestire la griglia utilizza flexbox!

Le possibilità aumentano oltre le 12 colonne della vecchia griglia!

Ciò amplia le possibilità:

● auto-layout columns● responsive classes● allineamento ● riordinamento

Bootswatch - template Bootstrap based per tutti!

Customizzabile in ogni elemento!

Grazie alle variabili LESS potete personalizzare ogni singolo elemento e creare il vostro Template basato sulle

classi di Bootstrap

The power of Less

Bootstrap e Joomla: insieme da Joomla 3.x

Bootsrap & Joomla 3.X 4.X

Bootstrap integrato nel core Bootstrap integrato in molti template Bootstrap integrato nel core

Versione 2.3.2Responsive Design - Gradient

Versione 3.3Mobile first - Flat

Versione 4.0Flexbox - Outline

Grazie!Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 3.0 Italia.

jugmilanocentro.itformazionecontinua.org