Usare Bootstrap in DiscoveryNG

Breve presentazione tenuta a Comperio srl per introdurre l'utilizzo di Bootstrap come framework alla base del front-end di DiscoveryNG: http://www.comperio.it/soluzioni/discoveryng/panoramica/

Si tratta di una brevissima presentazione ad uso interno.

Transcript

1. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13
2. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 STILE Invece di includere direttamente il CSS, in DNG preferiamo usare il potere di LESS. SCRIPTING Invece di includere direttamente il JS, in DNG preferiamo usare il potere di RequireJS.
3. Per questo motivo in DNG abbiamo integrato Bootstrap usando Bower. Bower è un gestore di pacchetti per il web, basato su Node.js Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 $ bower install bootstrap
4. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 { "name": "DNG", "dependencies": { "select2": "3.2.0", "font-awesome": "3.2.1", "jquery": "~1.10", "datatables": "1.9.4", "bootstrap": "~2.3.0", "jquery-ui": "1.10.3", "jquery-expander": "git://github.com/kswedberg/jquery-expander.git#1.4.5", "jquery-placeholder": "~2.0.7", "jquery-ui-carousel": "git://github.com/richardscarrott/jquery-ui-carousel.git#v0.11.2", "jquery-colorbox": "~1.4", "html5shiv": "~3.6", "raty": "~2.5", "requirejs": "~2.1", "jquery.validation": "1.11.1", "uri.js": "~1.10.2" }, "resolutions": { "jquery": "~1.10" } } bower.json
5. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 // Bootstrap framework @import "../../bower_components/bootstrap/less/bootstrap.less"; // Liquens and Bootstrap variables @import "lq-variables.less"; // Liquens core styles @import "lq-general.less"; // Utiliy classes for content @import "lq-editor.less"; // Liquens library pages styledescripts @import "lq-libraries.less"; // Widgets styles @import "lq-widgets.less"; // Datatables css @import (less) "../../bower_components/datatables/media/css/jquery.dataTables.css"; // Datatables styles @import "lq-datatables.less"; dng/liquens/css/liquens.less
6. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 lesscdir: uno script per aiutarci a compilare e mantenere tutti i temi di dng Es. un tema “blu” per DNG @import "../../../liquens/css/liquens.less"; @base-url: "../../../liquens/"; @theme-color: #174994; Una parte fondamentale del lavoro con Bootstrap consiste nel modificare le variabili. In DNG, invece di usare le variabili predefinite, utilizziamo un elenco di variabili personalizzato.
7. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <% require javascript(requirejs:) %> <% require css(liquens/css/liquens.css) %> <link rel="search" type="application/opensearchdescription+xml" title="Opensearch" href="{$LocaleAntisegment}liquens/opensearchdng.xml" /> <% require css(liquens/css/liquens-responsive.css) %> <% require css(bower_components/font-awesome/css/font-awesome.min.css) %> <% control SiteConfig %> <% if CustomCSS %> <style type="text/css"> $CustomCSS.RAW </style> <% end_if %> <% end_control %> dng/liquens/templates/Inludes/Head.ss
8. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 sviluppatore Foglio di stile in LESS Foglio di stile in CSS compilazione (con lessc o lesscdir) Template .SS javascript compilazione (con r.js) DNG developer workflow $ git commit -am “speremo ben” repository
9. Twitter Bootstrap per DiscoveryNG Comperio srl, 18/10/13 E ora 'ndemo casa...