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
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

7. Twitter Bootstrap per DiscoveryNG
   Comperio srl, 18/10/13
   
   
   <% require javascript(requirejs:) %>
   <% require css(liquens/css/liquens.css) %>
   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 %>
   <br/>$CustomCSS.RAW<br/>
   <% end_if %>
   <% end_control %>
   dng/liquens/templates/Inludes/Head.ss
   

   View Slide

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
   

   View Slide

9. Twitter Bootstrap per DiscoveryNG
   Comperio srl, 18/10/13
   E ora 'ndemo casa...
   

   View Slide