anfibiacreativa

// The file is called example.scss , you noticed? Yes, call your file as your block, and put only code related to it, in it.

// do!
.example {
  // your code here
}

// don't!
.my-Example-component {
  // your code here

anfibiacreativa

// ok, this file is called example-block?! How is that?! 
// No, this is just to identify gists ;)

// Sooo, name the element after, you know, an element or a generic reference to it!
// do!
.example {
  &__wrapper {
    // code
  }
  

anfibiacreativa

// Now let's talk about modifiers

// do!

.example {
  &__wrapper {
    &--wide {
      // code
    }
    

anfibiacreativa

// States should also be easily identifiable.
// Because they're connected to dynamic behavior!
// And you want to quickly spot them

// do!
.example {
  &__list {
    &-isCollapsed {
      // code
    }

anfibiacreativa

{
  "name": "some-huge-app",
  "version": "1.0.0",
  "description": "Some Huge App",
  "main": "index.js",
  "scripts": {
    "typings": "typings",
    "typings:install": "npm run typings install --global --source --save",
    "build:initial": "npm run typings:install && npm run build",
    "build": "node_modules/.bin/webpack",

anfibiacreativa

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "some-huge-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "",

anfibiacreativa

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[the.category.name.you.wish]"/>

anfibiacreativa

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[the.category.name.you.wish]"
    dependencies="[some.category, some.other.category]"
    embed="[yet.this.other.category]"
    allowProxy="{Boolean}true"/>

anfibiacreativa

#base=/path/to/code/component-one

module/my.module.bundle-one.js
my.component.bundle-one.js

anfibiacreativa

<!--/* Firsy of all, you need to import the clientlibs template */-->
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
 
<!--/* You can then use the call API, to call the right clientlib category, for the right use case. In the example below
you're calling the js files only, for the 'my.category' category */-->
<sly data-sly-call="${clientLib.js @ categories='my.category'}" />

<!--/* Supposing you have special style rules for your authoring mode, you can test for wcmmode and include the right styles too
while avoid requesting them in publish, for performance sake */-->
<sly data-sly-call="${clientLib.css @ categories='my.category.author'}"