How does it work?

Drive is a CSS framework served from a CDN hosted on AWS.
Framework allows the use of any project and makes easy maintenance.

Drive CDN

Drive uses Amazon CloudFront. A web service for content delivery. An easy way to distribute content to end users with low latency and high data transfer speeds.

To use framework insert:

<!-- Últim compilat i minificat -->
<link href="" rel="stylesheet">

<!-- JS necessari si volem utilitzar certs components -->
<script src=""></script>

Drive structure

Drive has the structure of a microsite. We found the following structure, where in the folder css/ locate the file compiled and minimized drive.min.css. This is the only css file to load for projects that want to use with Drive. In order to be able to use components like dropdown list, the responsive navbar or modal dialog should load the file js/drive.min.js (3kb).

  ├── index.html
  ├── css/
  │     ├── guide/
  │     ├── sass/
  │     ├── drive.css
  │     └── drive.min.css
  ├── docs/
  ├── fonts/
  │── img/
  │     └── sprite-drive.png
  └── js/
        └── drive.js


SASS architecture

SASS allows us to use features that do not exist in CSS as variables, nesting, mixins and functions. CSS files end up being very large and complex to maintain, which helps us a CSS preprocessor. Among the main advantages of the power structure SASS find our styles in separate files.

We structured files SASS three file types: basic, partial and components.

  • El directori base/ esta reservat per el codi SASS que inicialitza i reseteja els elements HTML (_init.scss). També allotja les classes genèriques que s'utilitzaran a qualsevol pàgina així com mixins i funcions (_utils.scss). I finalment la declaració de variables globals (_variables.scss).
  • El directori partials/ es on bàsicament es genera el nostre CSS. Separem el codi en petites categories com ara tipografies, buttons, forms.
  • Seguint els principis Object Oriented CSS (OOCSS) com a metodologia per crear codi reusable, escalable i fàcil de mantenir, hem creat una serie de components.
  • En layout encontraremos aquellas secciones de la web que se repiten en todas las páginas y están formadas por varios componentes.

  ├── drive.scss
  ├── base/
  │     ├── _init.css
  │     ├── _utils.css
  │     └── _variables.css
  ├── partials/
  │     ├── _buttons.scss
  │     ├── _fonts.scss
  │     ├── _forms.scss
  │     ├── _grid.scss
  │     └── _tables.scss
  ├── components/
  │     ├── _alerts.scss
  │     ├── _boxes.scss
  │     ├── _cards.scss
  │     ├── _dropdown.scss
  │     ├── _icons.scss
  │     ├── _modal.scss
  │     ├── _navs.scss
  │     ├── _pagination.scss
  │     └── _user-thumb.scss
  └── layout/
        ├── _footer.scss
        └── _topbar.scss