Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Usare Bootstrap in DiscoveryNG

Giulio
October 18, 2013

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.

Giulio

October 18, 2013
Tweet

More Decks by Giulio

Other Decks in How-to & DIY

Transcript

  1. 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.
  2. 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
  3. 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
  4. 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
  5. 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.
  6. 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
  7. 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