Sass Subtheme

Links útiles:

• https://sevaa.com/blog/build-drupal-8-bootstrap-subtheme-sass/
• https://drupal-bootstrap.org/api/bootstrap/starterkits%21sass%21README.md/group/sub_theming_sass/8
• https://www.youtube.com/watch?v=pB7EwxwSfVk

Creación Subtheme

• Tener ya instalado bootstrap para drupal. Copiar carpeta starterkit/sass a /themes/mitema
• Renombrar ficheros:

rename 's/^THEMENAME/mitema/' THEMENAME.*

desde:

mitema/ 
mitema/config/install
mitema/config/schema

Además:

mv mitema.starterkit.yml mitema.info.yml
vi mitema.info.yml 

Meterle el Bootstrap

[~] git clone https://github.com/twbs/bootstrap-sass
cd webapps/miproyecto/themes/mitema
cp -r ~/bootstap-sass/assets .
mv assets bootstrap

Crear carpeta assets

assets  - Will hold all your new editables
assets/images   - Will hold the files to be turned into sprites using Compass
assets/sass   - Will hold all of your custom SCSS files
bootstrap   - Will carry all of the Bootstrap SASS source
img   - Will hold your compiled images/sprites
js   - Carries your compiled JavaScript

mover estos ficheros

cd themes/mitema/boostrap/stylesheets
[stylesheets] mv _bootstrap.scss ../../../../themes/mitema/assets/sass/
[stylesheets] mv bootstrap/_variables.scss ../../../../themes/mitema/assets/sass/

Renombrar _bootstrap.scss a style.scss

Modificar en el fichero style.scss las instancias siguientes

• bootstrap/ a ../../bootstrap/stylesheets/bootstrap/
• @import "../../bootstrap/stylesheets/bootstrap/variables"; a @import "variables"

Customizar apariencia :)

themes/mitema/sass 


_default-variables.scss
_overrides.scss

ó

themes/mitema/assets/sass

dependiendo de cómo lo tengas configurado

Compilar

Crear fichero config.rb en el root del subtheme

http_path = "/themes/mitema"
css_dir = "css"
sass_dir = "assets/sass"
images_dir = "assets/images"
javascripts_dir = "js"
fonts_dir = "bootstrap/fonts/bootstrap"
generated_images_dir = "img"
http_images_path = http_path + "/" + generated_images_dir
http_generated_images_path = http_images_path
output_style = (environment == :production) ? :compressed : :expanded

gem update --system
gem install compass

[mitema] compass compile
    write css/style.css

Activar CDN

Desde la UI

Limpiar cachés

Desde la UI

Activar Theme

Desde la UI

Ya deberías tener tu theme activado

Fonts

Para añadir fonts meter lo siguiente en el fichero info del theme

libraries:
  - 'redopenergy/fonts'

A continuación podemos definir fonts (ejemplo de fonts de google), lo hacemos desde el fichero libraries del theme

fonts:
  # Roboto Condensed
  remote: https://github.com/google/roboto
  version: 2.136
  license:
    name: Apache License, Version 2.0
    url: http://www.apache.org/licenses/LICENSE-2.0
    gpl-compatible: true
  # Raleway
  remote: https://github.com/impallari/Raleway
  version: 3.001
  license:
    name: SIL Open Font License, Version 1.1
    url: http://scripts.sil.org/OFL
    gpl-compatible: false
  css:
    theme:
      //fonts.googleapis.com/css?family=Roboto+Condensed: { type: external, minified: false }
      //fonts.googleapis.com/css?family=Raleway: { type: external, minified: false }
      css/style.css: {}

JS

Tutorial: https://www.youtube.com/watch?v=OvNYg5fOvdA

Meter/añadir en el info:

libraries:
  - 'redopenergy/custom-js'

Meter en el libraries:

custom-js:
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Crear js/custom.js

(function ($) {
  Drupal.behaviors.redopenergy = {
    attach: function (context, settings) {

      $("body").html("This is Hello World by JQuery");

    }
  };
})(jQuery);

---

Carousel

http://jimbir.ch/blog/making-bootstrap-carousel-drupal-paragraphs-single-twig-template

---

CDN Subtheme

https://drupal-bootstrap.org/api/bootstrap/starterkits%21cdn%21README.md/group/sub_theming_cdn/8