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
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);
}
deck
By Jaime Neves
deck
- 126