Que es Bkool Branding Basics

Bkool Branding Basics

Es el sistema de diseño de Bkool para productos y experiencias digitales. El sistema consta de código de trabajo, herramientas y recursos de diseño, pautas de interfaz humana, guías de estilo y uso de la marca y descarga de recursos.

Introducción

Como sistema de diseño de Bkool, Bkool Branding Basics da soporta al equipo de trabajo y desarrollo de Bkool. Es, además, mantenido por el mismo equipo de diseñadores y desarrolladores que lo ha creado, con base en Madrid, España.

Los objetivos de son dar consistencia y calidad de la interfaz de usuario, hacer que el proceso de diseño y desarrollo sea más eficiente y ágil, establecer un vocabulario compartido entre el diseñador y el desarrollador, brindar una guía de estilos y usos de la marca y proporcionar los recursos y ficheros necesarios para hacer el trabajo mas eficiente.

Frameworks

Recursos

Estructura de ficheros


    ├── css/

    │   ├── plugins/

    │   │   ├── ion-range-slider/

    │   │   ├── owl-carousel-css/

    │   │   └── range-slider/

    │   ├── private-web-styles/

    │   │   └── Estilos Landings Privadas

    │   ├── public-web-styles/

    │   │   └── Estilos Landings Públicas

    │   └── general_styles_lightTheme.css (Para Theme Light)

    ├── fonts/

    │   ├── HKGothic/

    │   │   └── Fuente HKGothic

    │   ├── HKGrotesk/

    │   │   └── Fuente HKGrotesk

    │   ├── icons/

    │   │   └── icomoon/

    │   │       └── Fuente icomoon (Iconos)

    ├── images/

    │   ├── error/

    │   ├── footer/

    │   ├── header/

    │   ├── icons/

    │   │   ├── flags/

    │   │   └── flags_rounded/

    │   ├── login-register/

    │   ├── public-web/

    │   │   ├── apps/

    │   │   ├── compatibility/

    │   │   │   ├── devices/

    │   │   │   │   ├── bike/

    │   │   │   │   │   ├── bkool/

    │   │   │   │   │   ├── keiser/

    │   │   │   │   │   ├── technogym/

    │   │   │   │   │   └── zycle/

    │   │   │   │   ├── non-smart/

    │   │   │   │   │   ├── bkool/

    │   │   │   │   │   ├── cycleops/

    │   │   │   │   │   ├── elite/

    │   │   │   │   │   └── kinetic/

    │   │   │   │   └── smart/

    │   │   │   │       ├── bkool/

    │   │   │   │       ├── cycleops/

    │   │   │   │       ├── elite/

    │   │   │   │       ├── tacx/

    │   │   │   │       ├── wahoo/

    │   │   │   │       └── zycle/

    │   │   ├── comunity/

    │   │   │   │   ├── accesories/

    │   │   │   │   └── events/

    │   │   │   │       ├── challenges/

    │   │   │   │       ├── leagues/

    │   │   │   │       ├── meet-ups/

    │   │   │   │       └── races/

    │   │   ├── coupon/

    │   │   ├── cycling/

    │   │   │   │   ├── carousel/

    │   │   │   │   │   ├── awesome-places-routes/

    │   │   │   │   │   ├── classic-routes/

    │   │   │   │   │   ├── competition-routes/

    │   │   │   │   │   ├── get-ready-workouts/

    │   │   │   │   │   ├── mountain-routes/

    │   │   │   │   │   ├── resistance-workouts/

    │   │   │   │   │   ├── shapeup-workouts/

    │   │   │   │   │   ├── triathlon-routes/

    │   │   │   │   │   ├── workouts-bg/

    │   │   │   │   │   └── races/

    │   │   │   │   ├── leagues/

    │   │   │   │   └── videos/

    │   │   ├── experience-shapes/

    │   │   ├── fitness/

    │   │   │   │   ├── carousel/

    │   │   │   │   │   ├── classes/

    │   │   │   │   │   ├── shape-classes/

    │   │   │   │   │   ├── weight-classes/

    │   │   │   │   └── instructors/

    │   │   ├── home/

    │   │   ├── legal/

    │   │   └── trial/

    │   └── spinner/

    ├── js/

    │   ├── bkool-dist/

    │   │   └── Ficheros js compilados

    │   ├── bkool-source/

    │   │   └── Ficheros js Bkool

    │   ├── fullcalendar/

    │   ├── ion-range-slider/

    │   ├── owl-carousel-js/

    │   ├── range-slider/

    │   └── Bootstrap and jQuery files

    └── scss/

        ├── bkool-styles/

        │   │   ├── mixins/

        │   │   ├── private-web-styles/

        │   │   │   └── Landings Privadas

        │   │   ├── public-web-styles/

        │   │   │   └── Landings Públicas

        │   │   └── Componentes de Bkool

        └── bootstrap/

Carga de ficheros y componentes

La carga de ficheros y componentes CSS se hace de manera progresiva. Tenemos un grupo de estilos que se cargarán en un sólo fichero general_styles_lightTheme.css al inicio del documento y que son la base de todo el sistema de componentes y layout de toda la web.

Estos componentes para la base general se importan desde el fichero general_styles_lightTheme.scss. El nombre del fichero contiene la cadena _lightTheme.scss, para en el futuro tener un homólogo a la hora de crear un theme dark.


    // ------ IMPORTS ------

    // Required

    @import  "../bootstrap/functions";

    @import  "../bootstrap/variables";

    @import  "../bootstrap/mixins";


    // Optional

    @import  "../bootstrap/breadcrumb";

    @import  "../bootstrap/buttons";

    @import  "../bootstrap/dropdown";

    @import  "../bootstrap/grid";

    @import  "../bootstrap/images";

    @import  "../bootstrap/nav";

    @import  "../bootstrap/navbar";

    @import  "../bootstrap/popover";

    @import  "../bootstrap/reboot";

    @import  "../bootstrap/transitions";

    @import  "../bootstrap/type";

    @import  "../bootstrap/tooltip";

    @import  "../bootstrap/utilities";


    //RFS (Responsive Font Sizes > TRUE)

    @import  "scss";


    //BKOOL

    @import  "bkool-breadcrumb";

    @import  "bkool-buttons";

    @import  "bkool-dropdown";

    @import  "bkool-font";

    @import  "bkool-mixins";

    @import  "bkool-nav";

    @import  "bkool-navbar";

    @import  "bkool-popover";

    @import  "bkool-reboot";

    @import  "bkool-spinner";

    @import  "bkool-tables";

    @import  "bkool-tooltip";

    @import  "bkool-type";

    @import  "bkool-utilities";

El resto de componentes se cargaran de manera individual en cada una de las páginas donde se necesiten. De esta forma, no se cagarán componentes innecesarios.

id y class en body

Cada página tiene un id y al menos un class identificativo en el body con carácter semántico para describir la página, además de funcionar como soporte para dar estilos a label en reader.

Home
- id=”bkool-home”
- class=”bkool-public light-theme”
Experiencias / Ciclismo
- id=”bkool-cycling”
- class=”bkool-public light-theme”
Experiencias / Fitness
- id=”bkool-fitness”
- class=”bkool-public light-theme”
Comenzar / Cómo funciona
- id=”bkool-getStarted”
- class=”bkool-public light-theme”
Comenzar / Compatibilidad
- id=”bkool-compatibility”
- class=”bkool-public light-theme”
Comunidad
- id=”bkool-events”
- class=”bkool-public light-theme”
Comunidad / Detalles de evento
- id=”bkool-events”
- class=”bkool-public light-theme bkool-events-{leagues, races, meetups”}

Laravel Mix

Laravel Mix es el sucesor de Laravel Elixir y, al contrario que su antecesor, está basado en Webpack y no en Gulp. En la documentación de Laravel Mix encontramos todo lo referente a Instalación, Running Mix, Compilado de ficheros, etc.

Configuración del fichero webpack.mix.js

Por defecto, este fichero viene con la siguiente configuración:


mix.js('resources/js/app.js', 'public/js'

   .sass('esources/sass/app.scss', 'public/css');

Cambiando la configuración:

La configuración la hemos cambiado, pues nuestros “resources” no se encuentran en la carpeta creada por defecto por Laravel. Nuestros assets se encuentran en un template creado adhoc en: ‘public/bkool-2019/’.

Para que no de error al compilar, debemos cambiar una de las propiedades en las opciones de mix.sass.


mix.sass('public/bkool-2019/scss/bkool-styles/general_styles_lightTheme.scss', 'public/bkool-2019/css').options({

    processCssUrls: false;

});

Ficheros scss:

Dentro del listado de métodos usados en Laravel Mix no hay uno definido para compilar todos los ficheros que se encuentren en una misma carpeta. Cada fichero hay que añadirlo individualmente.


mix.sass('public/bkool-2019/scss/bkool-styles/public-web-styles/bkool-public-apps.scss', 'public/bkool-2019/css')

mix.sass('public/bkool-2019/scss/bkool-styles/public-web-styles/bkool-public-compatibility.scss', 'public/bkool-2019/css')

mix.sass('public/bkool-2019/scss/bkool-styles/public-web-styles/bkool-public-press.scss', 'public/bkool-2019/css')

...

Siempre que sea necesario crear un fichero .css nuevo, para una nueva página, seguimos la estructura de ficheros definida en el proyecto y lo añadimos en la carpeta scss, donde corresponda, dependiendo si es para la web privada o la web pública.


└── public/

    └── bkool-2019/

        └── scss/

            └── general_styles_lightTheme.css

                └── bkool-styles/

                    ├── private-web-styles/

                    │   └── Ficheros css web privada

                    └── public-web-styles/

                        └── Ficheros css web pública

Para no tener un listado enorme de métodos mix.sass en la configuración, y no olvidarnos de añadir una nueva línea mix.sass cada vez que tengamos un nuevo fichero .scss, tendremos una función que se encargue de ir a la ruta especificada, compilar los ficheros que se encuentren dentro de dicha carpeta y enviarlos al destino que indiquemos.


// sass root/compile folder

function mix_scss_files(folder) {

    let fs = require('fs');

    var relative_path = 'public/bkool-2019/scss/bkool-styles' + folder;

    var paths = fs.readdirSync(relative_path);

    for (var i = 0; i < paths.length; i++) {

        if (paths[i].indexOf('.scss') > 0 && paths[i].charAt(0) != '_') {

            var file_path = relative_path + path[i];

            mix.sass(file_path, 'public/bkool-2019/css' + folder);

        }

    }

}

mix_scss_files('/public-web-styles/');

mix_scss_files('/private-web-styles/');

Ficheros js:

Pasa lo mismo con los ficheros .js. Se encuentran en una carpeta distinta de resources. Nuestros ficheros .js tampoco están simplificados a un solo fichero, sino que depende del contenido de cada página.

Cada vez que es necesario crear un fichero .js nuevo, para una nueva página, seguimos la estructura de ficheros definida en el proyecto.


└── public/

    └── bkool-2019/

        └── js/

            ├── bkool-dist/

            │   └── Ficheros js compilados

            └── bkool-source/

                └── Ficheros js a añadir o cambiar


// js root/compile folder

function mix_js_files(folder) {

    let fs = require('fs');

    var relative_path = 'public/bkool-2019/js' + folder;

    var paths = fs.readdirSync(relative_path);

    for (var i = 0; i < paths.length; i++) {

        if (paths[i].indexOf('.js') > 0 && paths[i].charAt(0) != '_') {

            var file_path = relative_path + path[i];

            var outputFileName = path[i].substring(0, path[i].length - 3);

            mix.js(file_path, 'public/bkool-2019/js/bkool-dist' + outputFileName + '.min.js');

        }

    }

}

mix_js_files('/bkool-source/');

Configuración final:


let mix = require('laravel-mix');


/*

|--------------------------------------------------------------------------

| Mix Asset Management

|--------------------------------------------------------------------------

|

| Mix provides a clean, fluent API for defining some Webpack build steps

| for your Laravel application. By default, we are compiling the Sass

| file for the application as well as bundling up all the JS files.

|

*/


// sass root/compile folder

function mix_scss_files(folder) {

    let fs = require('fs');

    var relative_path = 'public/bkool-2019/scss/bkool-styles' + folder;

    var paths = fs.readdirSync(relative_path);

    for (var i = 0; i < paths.length; i++) {

        if (paths[i].indexOf('.scss') > 0 && paths[i].charAt(0) != '_') {

            var file_path = relative_path + paths[i];

            mix.sass(file_path, 'public/bkool-2019/css' + folder);

        }

    }

}

mix_scss_files('/public-web-styles/');

mix_scss_files('/private-web-styles/');


// js root/compile folder

function mix_js_files(folder) {

    let fs = require('fs');

    var relative_path = "public/bkool-2019/js" + folder;

    var paths = fs.readdirSync(relative_path);

    for (var i = 0; i < paths.length; i++) {

        if (paths[i].indexOf('.js') > 0 && paths[i].charAt(0) != '_') {

            var file_path = relative_path + paths[i];

            var outputFileName = paths[i].substring(0, paths[i].length - 3);

            mix.js(file_path, 'public/bkool-2019/js/bkool-dist/' + outputFileName + '.min.js');

        }

    }

}

mix_js_files('/bkool-source/');


mix.sass('public/bkool-2019/scss/bkool-styles/general_styles_lightTheme.scss', 'public/bkool-2019/css').options({

    processCssUrls: false

});

Comandos npm:

npm run dev
Compila los ficheros
npm run watch
Compila los ficheros y queda esperando cambios para volver a compilar
npm run production
Compila los ficheros y los minifica, listos para producción
IMPORTANTE: Hacerlos siempre antes de subir a producción.

Que es Bkool Branding Basics

Bkool Branding Basics

Es el sistema de diseño de Bkool para productos y experiencias digitales. El sistema consta de código de trabajo, herramientas y recursos de diseño, pautas de interfaz humana, guías de estilo y uso de la marca y descarga de recursos.

Introducción

Frameworks

Recursos

Estructura de ficheros

Carga de ficheros y componentes

id y class en body

Home

Experiencias / Ciclismo

Experiencias / Fitness

Comenzar / Cómo funciona

Comenzar / Compatibilidad

Comunidad