El look and feel de nuestro website debía estar abierto a ser modificado por front-end developers para la creación de themes.
"A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server".
"Una persona es una descripción ficticia pero realista de un usuario primario, principal u objetivo del producto. Es un arquetipo en lugar de un ser humano real, que deben describirse como si fueran personas reales."
"Escribo código e implemento el front-end de la tienda web. Me gusta enfocarme en los detalles, pero sobre todo me gustan los sitios web que funcionan rápido y se ven estéticamente lindos".
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
Pages are specific instances of templates that show what a UI looks like with real representative content in place.
“A visual design system is built out of the core components of typography, layout, shape or form, and colour (....) These concepts, design decisions or rules, created around the core components are used consistently across your product to create a cohesive feel..."
// Font sizes
$font-size-base: 15px !default;
$font-size-xxs: 0.75rem !default;
$font-size-xs: 0.87rem !default;
$font-size-s: 0.93rem !default;
$font-size-m: 1rem !default;
$font-size-l: 1.067rem !default;
$font-size-xl: 1.2rem !default;
$font-size-xxl: 1.47rem !default;
$font-size-xxxl: 1.73rem !default;
// Font family
$font-family: “Open Sans”, Helvetica, Arial, sans-serif !default;
// Font weight
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
// Colors for primary and secondary actions
$color-primary: #e23200 !default;
$color-secondary: #15607b !default;
// Neutral Shades Palette
$neutral-shade: #4D5256 !default;
$neutral-shade-900: darken($neutral-shade, 25) !default;
$neutral-shade-700: darken($neutral-shade, 18) !default;
$neutral-shade-500: $neutral-shade !default;
$neutral-shade-300: lighten($neutral-shade, 20) !default;
$neutral-shade-0: lighten($neutral-shade, 100) !default;
// Theme Color palette
$color-theme: #97CCDF !default;
$color-theme-900: saturate(darken($color-theme, 55), 18) !default;
$color-theme-700: saturate(darken($color-theme, 45), 17) !default;
$color-theme-500: $color-theme !default;
$color-theme-300: desaturate(lighten($color-theme, 15), 3) !default;
$color-theme-100: desaturate(lighten($color-theme, 23), 3) !default;
// Link's colors
$color-link: #0067b9 !default;
$color-link-hover: desaturate(lighten($color-link, 25), 15) !default;
$color-link-active: desaturate(lighten($color-link, 10), 15) !default;
// Text's colors
$color-copy-dark: $neutral-shade-700 !default;
$color-copy: $neutral-shade-500 !default;
$color-copy-light: $neutral-shade-300 !default;
// Padding variables
$padding-base: 5px;
$padding-lv1: $padding-base !default;
$padding-lv2: $padding-base * 2;
$padding-lv3: $padding-base * 3;
$padding-lv4: $padding-base * 4;
$padding-lv5: $padding-base * 5;
$padding-lv6: $padding-base * 6;
$padding-lv7: $padding-base * 7;
$padding-lv8: $padding-base * 8;
// Margin variables
$margin-base: 5px !default;
$margin-lv1: $margin-base;
$margin-lv2: $margin-base * 2;
$margin-lv3: $margin-base * 3;
$margin-lv4: $margin-base * 4;
$margin-lv5: $margin-base * 5;
$margin-lv6: $margin-base * 6;
$margin-lv7: $margin-base * 7;
$margin-lv8: $margin-base * 8;
.button-primary {
display: inline-block;
padding: $padding-lv3;
color: $neutral-shade-0;
font-size: $font-size-m;
font-weight: $sc-font-weight-normal;
background: $color-primary;
border: 1px solid darken($color-primary, 15);
&:hover {
background: ligthen($color-primary, 20);
}
&:active, &:focus {
background: ligthen($color-primary, 10)
}
&:disabled {
opacity: 0.6;
}
}
// Primary buttons
//
// The primary action is generally the action that completes a task or desired action.
// Primary buttons use bright and use saturated colors to provide stronger
// visual weight that catches the users attention to avoid confusion and competing
// with secondary actions.
//
// Markup:
// <button class="button-primary button-medium">Button Primary</button>
//
// Styleguide 2.1.1
.button-primary {
display: inline-block;
padding: $padding-lv3;
color: $neutral-shade-0;
font-size: $font-size-m;
font-weight: $sc-font-weight-normal;
background: $color-primary;
border: 1px solid darken($color-primary, 15);
&:hover {
background: ligthen($color-primary, 20);
}
&:active, &:focus {
background: ligthen($color-primary, 10)
}
&:disabled {
opacity: 0.6;
}
}
Text
Matías Hernández
mtt.hernandez@gmail.com
@mtthernandez
Antonella Clavero
hiantonellaclavero@gmail.com
@holahongo
@holahongo
Matías Hernández