approfondimento su bootstrap - dal workshop "sviluppare siti con bootstrap ed un sistema...
DESCRIPTION
Presentazione di approfondimento le caratteristiche di Bootstrap ai fini del front end development.TRANSCRIPT
Bootstrap“The most popular front-end framework for developing
responsive, mobile first projects on the web.”
Picture by Benjamin Eshan on Flickr https://bitly.com/
Chi SonoAndrea Dessì
• ~10 anni di esperienza in Front-end Development
• Html, css, js, ui, ux, jsp, java, maven, nodejs…
• Entando Core Team
Bootstrap: Cosa è?• Strumento per sviluppare pagine html• Estendibile e personalizzabile
UI: griglie, bottoni, form, typography, carousels, panels...
http://getbootstrap.com/
Un po' di storiaNato all'interno di Twitter e sviluppato da Mark Otto (@mdo) e da Jacob Thornton (@fat)
v.1: 2011, prima versione pubblica
v.2: 2012, introduzione responsive
v.3: 2013, approccio mobile first
Perché utilizzarlo?
• Compatibilità browser, desktop e mobile
• Facile da usare
• Personalizzabile
• Open Source (MIT)
Come si usa?
Iniziamo da qui… Semplicemente
<link href=”bootstrap.css" rel="stylesheet”>
<script src="jquery.js"></script>
<script src=”bootstrap.js"></script>
Come si usa
Griglie• Sistema basato su 12 colonne
• Fluido o Fisso
• Innestabili
• Ottimizzato per: xs (-768 px) sm (768/992 px)md (992/1200 px)lg (1200+ px)
Griglie
Form• Cross-browser UI
• Orizzontali o Verticali
• Stati (success, error, warning)
• Dimensioni (xs, sm, md, lg)
Form
Bottoni• Pensato per le applicazioni web.
• Varianti: large, small, extra small, primary, success, info, warning, danger, link
Icone• Icon Font con 200 icone (Glyphicons)• Webapp ready• Possibilità di sostituirle con un altro set
Testi• Titoli, paragrafi, liste
• Gestione delle dimensioni
• Formattazione: i, b, s, small
• Labels e Badges
Testi
Tabelle• Righe alternate (.table-striped)
• Con i bordi (.table-bordered)
• Attive (.table-hover)
• Condensed (.table-condensed)
• Responsive
Tabelle
Pannelli“While not always necessary, sometimes you
need to put your DOM in a box. For those situations, try the panel component.”
• Possono avere l'intestazione
• Contengono qualsiasi elemento
Pannelli
Altri elementi UI
• Buttons Group
• Input Groups
• Alerts
• Progress Bar
Componenti Javascript• Tooltip
• Modal
• Carousel
• Popover
E ancora: Transition, Dropdown, Scrollspy, Tab, Alert, Collapse, Affix
Personalizzazione
• Con LESS o Sass
• La documentazione è all'interno dei sorgenti
• Compilare on-the-fly con LESS
Less, Sass
• Sono estensioni di CSS
• Facilitano la scrittura del codice
• Permettono di usare variabili, funzioni, calcoli…
http://lesscss.org/
http://sass-lang.com/