Joomla! dal CSS a BootStrap. Luca Racchetti

Transcript

1 Joomla! dal CSS a BootStrap Luca Racchetti

2 Luca Racchetti Docente 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-Bicocca Consultant presso Target Reply (Business Intelligence) Uso Joomla! da diversi anni, fin dalla versione 1.5

3 Programma CSS, 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!

4 Un po di storia...

5 I primi 5 anni di Joomla : Bootstrap 1.0 Bootstrap 2.0 Joomla Joomla 1.5 CSS 2 Joomla 2.5 Joomla 3.0 Primo libro su Joomla! 16 Settembre 2005 Marzo Gennaio Giugno Agosto Gennaio Gennaio Settembre 2012

6 Dal 2012 a oggi Bootstrap 3.0 Bootstrap 4.0 Joomla 3.0 CSS 3 Joomla 3.5 Joomla 3.7 Joomla 4.0 Alpha Joomla 4.0 Stable 27 Settembre Agosto Novembre Marzo Aprile Novembre gennaio 2018 Fine 2018

7 CSS: un breve ripasso

8 Selettori : Classi & ID <p id="identificativo" class="classe" >testo</p> p {...}.classe {...} #identificativo {...} Priorità: Elemento < Classe < Identificativo

9 Case history: Purity II - JoomlArt Classi proprietarie legate al template o al framework della casa produttrice >>

10 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!

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

12 Codice CSS Classe Bootstrap <button type="button" class="btn">default</button> display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: ; 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;

13 Flessibilità e rapidità : tutto con le classi! <button type="button" class="btn <button type="button" class="btn <button type="button" class="btn <button type="button" class="btn btn-primary">primary</button> btn-success">success</button> btn-danger">danger</button> 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;

14 La griglia base

15 La griglia - Da Bootstrap a Bootsrap 4 Bootstrap <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>

16 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

17 Bootswatch - template Bootstrap based per tutti!

18 The power of Less Customizzabile in ogni elemento! Grazie alle variabili LESS potete personalizzare ogni singolo elemento e creare il vostro Template basato sulle classi di Bootstrap

19 Bootstrap e Joomla: insieme da Joomla 3.x

20 Bootsrap & Joomla 3.X 4.X Bootstrap integrato nel core Bootstrap integrato in molti template Bootstrap integrato nel core Versione Responsive Design - Gradient Versione 3.3 Mobile first - Flat Versione 4.0 Flexbox - Outline

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