deck

Arquitetura Escalável 
Front-End

@jaime.neves

ReclameAQUI

Porque Front-End Escalável?

Alta performance
client-side.

Interface facilmente
modificável.

Componentes portáveis entre diferentes aplicações.

Bulletproof Web Design.

Mobile First.

Baixa barreira de entrada para outros desenvolvedores.

Suporte aos Navegadores

latest

IE11+

latest

A escolha dos navegadores e o nível de suporte, influencia escolhas e tempo de desenvolvimento.

Pre-processors: sass

O uso de partials ajuda a organizar os módulos.

/* mais.scss */

@import "compass/css3";

@import "base/variables";
@import "base/functions";
@import "base/mixins";
@import "base/helpers";
@import "core/reset";
@import "core/basic";
@import "core/forms";
@import "core/tables";
@import "core/typography";
@import "core/icons";
@import "core/buttons";
@import "layout/main";
@import "layout/header";
@import "layout/footer";
@import "ui/loader";
@import "ui/loaderBar";
@import "ui/flashMessage";
@import "ui/breadcrumb";

app/
 assets/
 stylesheets/
 base/
   _functions.scss
   _mixins.scss
   _variables.scss
 ui/
   _breadcrumb.scss
   _carousel.scss
   _dentedBox.scss
   _flashMessage.scss;

Variáveis ajudam a manter os mesmos padrões de interface.

// Color system

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  ),
  $colors
);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

Mixins padronizam repetições de código.

// Font size
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

// Border radius
@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

// Button sizes
@mixin button-size($padding-y, $padding-x,
  $font-size, $line-height, $border-radius) {
  
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  line-height: $line-height;
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}