Reto

Resumen

Ahora hay un reto para ustedes.
Como sabemos tenemos que hacer la guía de estilos del proyecto de PlatziMusic. En el reto te propongo que hagamos de forma predictiva las variables que serán utilizadas y los parciales que se pueden utilizar. Por ahora tenemos tablas, pero tendremos muchos más elementos útiles.

Edison Jhon Moya Arias

student•

_variables.scss:

/* ----------------------------- *\
|             $COLORS             |
\* ----------------------------- */

/*-------Branding colors */
$color-brand: #ea83ee;
$color-secondary: rgb(219,216,221);
$black:rgb(0,0,0);
$dark-grey:#4d4d4d;
$grey:#737373;
$white:#ffffff;

/*-------text colors */
$black-text:black;
$blue-text:blue;
$yellow-text:yellow;
$orange-text:orange;
$white-text:white;

/*-------alerts colors */
$danger-color:#ff0000;
$warning-color: #ffa500;
$success-color: #30e92c;
$info-color: #5474f5;
$primary-color: #584aff;

/*-------background colors */

/*------- fonts styles */
$basefont:Verdana, Geneva, Tahoma, sans-serif;

/*-------cols size's */

/*-------elements size's */

Estructura de archivos:

Diego Alejandro Cardona Giraldo

student•

Tampoco hay mucha necesidad de usar.

$black-text:black;
$blue-text:blue;
$yellow-text:yellow;
$orange-text:orange;
$white-text:white;

Sabiendo que básicamente solo le dan otro nombre

Jesus Olivo Lacroix

student•

@DiegoKardona al principio con estos ejemplos básicos notarás cosas un poco innecesarias, sin embargo, en un proyecto grande aunque una variable sea;

$orange-text: orange;

Funciona como referencia (o para mantener un orden y formato) al programador o a un segundo colaborador en el proyecto (a la hora de leer el codigo) para saber que se esta usando un color naraja, el cual puede mutar a una tonalidad mas oscura o mas clara respectivamente. Tal y como se comento en el video anterior.

Lo mas seguro sea, que a la hora de leer veas el nombre de la variable y no el valor, a menos que busques en el archivo de _variables.scss directamente.

Roger Carlos Ariel Alba

student•

con todo respeto sugiero a los compañeros del curso que busquen una página, o un template y usen eso para maquetar, al verlo facilmente puede detectar variables, botones, colores, texto, titulos, etc.

César Alejandro Garay Aguilar

student•

Luis Alejandro Vera Hernandez

student•

Me gusta como implementaste Atomic Design

David Alejandro Mosquera Moreno

student•

Creo que sería así Parciales: ![](

Código: ![](

Gabriel Alejandro Delgado Álvarez

student•

Eduardo Reyes

student•

Para los que usamos git, encontré este artículo donde se ve una guía para manejar los archivos de proyectos grandes y pequeños. https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4 Y basicamente se puede descargar todo solo clonando el repo con git clone https://github.com/HugoGiraudel/sass-boilerplate.git

Gló Aguilera Ortega

student•

Este artículo está buenísimo para guía: https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4

Espero les sirva como me sirvió a mi :D

WILDER GUTIERREZ QUISPE

student•

_variables.scss

// Branding Colors
$color-brand: #eaB3ee;
$color-secondary: rgb(219,211,216);


// Palette Colors
$dark_primary_color:  #616161;
$light_primary_color: #F5F5F5;
$prynary_color: #9E9E9E;
$accent_color: #536DFE;

// text colors
$text_color: #212121;
$prymary_text: #212121;
$secondary_text: #757575;
$title_color:#F5F5F5;
$title_secondary_color: #F9F9F9;
$alert_text_color: #D32F2F;
$alert_secondary_text_color: #F44336;

// Component Colors 
$divider_color: #BDBDBD;

Estructura de Archivos

Jhean Pacheco

student•

Reto cumplido

Emmanuel López

student•

Perla Godinez Castillo

student•

1.25x velocidad mejora por mucho

Esau Rosales

student•

Yo lo veo a 1.5 😅😅

Luis Alejandro Vera Hernandez

student•

Yo a 1.75 xd

Naldo Duran

student•

Carlos Jesús Fernández Salazar

student•

Este seria mi _variables.scss:

/*-----------------------------
    $COLORS
------------------------------*/

/**
* Branding Colors
*/

$color-primary: #ea83ee;
$color-secondary: #dbd879;


$color-black: #000000;
$color-darkgrey: #4d4d4d;
$color-grey: #737373;
$color-lightgrey: #bfbfbf;
$color-white: #ffffff;

/**
* Alert Colors
*/

$color-warning: #fa3838;
$color-info: #028ccc;
$color-success: #07ce53;

/**
* Shadow Colors
*/

$color-lightshadow: rgba(0, 0, 0, .3);
$color-shadow: rgba(0, 0, 0, .5);
$color-darkshadow: rgba(0, 0, 0, .8);

/**
* Other Colors
*/

$color-link: #028ccc;


/*-----------------------------
    $FONTS
------------------------------*/

/**
* Font Sizes
*/

$font-size-h1: 1em;
$font-size-h2: 1em;
$font-size-h3: 1em;
$font-size-h4: 1em;
$font-size-h5: 1em;
$font-size-p: 1em;
$font-size-p-secondary: 1em;

/**
* Font family
*/

$font-primary: Arial;
$font-secondary: Verdana;
$font-tertiary: Tahoma;



/*-----------------------------
    $BOX
------------------------------*/

/**
* $PADDING
*/

$padding-extra: 60px;
$padding-high: 40px;
$padding-medium: 20px;
$padding-small: 10px;
$padding-tiny: 5px;

/**
* $MARGIN
*/

$margin-extra: 60px;
$margin-high: 40px;
$margin-medium: 20px;
$margin-small: 10px;
$margin-tiny: 5px;

Esta es el árbol de archivos que me imaginé:

marco antonio cespedes mamani

student•


// Viewports
$desktop-medium: 1420px;
$desktop-small: 1024px;
$tablet-medium: 768px;
$tablet-small: 480px;
$phone-smart: 320px;

// Typography
$font-1: Montserrat, sans-serif;
$font-2: Nunito, sans-serif;
$fontello: fontello;

// Font-Size
$fsize_x0: 8px;
$fsize_x0_5: 12px;
$fsize_x1: 16px;
$fsize_x2: 24px;
$fsize_x3: 32px;
$fsize_x4: 40px;
$fsize_x5: 48px;

// Colors
$fc_p: #992;
$fc_s: #060336;
$fc_op1: #992;
$fc_op2: #1b2025;
$maincolor-1: #e7484a;

$bgc_p: #025;
$bgc_s: #025;
$bgc_op1: white;
$bgc_op2: #002050;
$bgc_op3: darkblue;

$facebook-color: #3d5b99;
$twitter-color: #1ea1f1;
$youtube-color: #ff0000;
$linkedin-color: #0274b3;
$viadeo-color: #f07355;
$pinterest-color: #bd081c;
$google-plus-color: #df493a;

Kevin Gerardo Mendez Argueta

student•

Giovanni Muñoz

student•

</*--------------------------*\
    var globales $COLORS
/*--------------------------*\
/**
*Branding Colors
*/
$color-brand: #ea83ee;
$color-secudary: rgb(219, 216, 121); 

$black: rgb(0,0,0);
$darkgrey: #4d4d4d;
$grey: #737373;
$lightgrey: #bfbfbf;
$white: #fff; 

/*shadow item*/
$item_dark: 0 0 1px $black;
$item_darkmedium: 0 0 1px $grey;
$item_light: 0 0 3px $white;

/*color link*/
$green_link: Limegreen;

>

Giovanni Muñoz

student•

solución al reto

Julian Carelli

student•

Edward Fabian Martinez Aparicio

student•

Buenos días a todos

mas o menos así me lo imaginé

/*-----------------------------------------*\
                    $COLORS
\*-----------------------------------------*\
/**
*Branding Colors
*/

$color-brand: #ea83ee;
$color-secondary:rgb(219, 216, 121);
$black: rgb(0, 0, 0);
$darkgrey: #4d4d4d;
$grey: #737373;
$ligthgrey: #bfbfbf;
$white: white;

/*-----------------------------------------*\
                    $FONT-COLORS
\*-----------------------------------------*\
/**
*FONT Colors
*/

$color-tittle: $black;
$color-subtittle: $grey;
$color-text: $ligthgrey;

/*-----------------------------------------*\
                    $FONT-SIZE
\*-----------------------------------------*\
/**
*FONT Size
*/

$font-h1: 2em;
$font-h2: 1.5em;
$font-h3: 1em;
$font-paragraph: 0.8em;
$font-text:0.5em;

/*-----------------------------------------*\
                    $BORDER-SIZE
\*-----------------------------------------*\
/**
*BORDER Size
*/

$border-top: 0.5em;
$border-bottom: 0.5em;
$border-left: 0.5em;
$border-rigth: 0.5em;
$padding-top: 0.3em;
$padding-bottom: 0.3em;
$padding-left: 0.3em;
$padding-rigth: 0.3em;

/*-----------------------------------------*\
                    $COLOR-BUTTON
\*-----------------------------------------*\
/**
*GENERICS-BUTTONS
*/

$button-alert:red;
$button-sucess:green;
$button-player: blue;

Y para las carpetas sería algo así

Fredy A. Yomayuza Colorado

student•

Todos vemos las cosas de un modo diferente, si todos fuéramos iguales el mundo no tendría sentido. Este es un curso básico y cada quien organiza su proyecto como le guste o lo entienda mejor. El profesor nos da las bases y de nosotros depende el desarrollar nuestras capacidades o ingenio para ser mas competitivos cada dia. Entonces dejen de quejarse tanto y sean productivos. Menos blablabla y mas practica.

Oscar Jesus Resendiz Mendoza

student•

Definitivamente este curso debe mejorar... 7 clases para llegar aqui me parece se pudo haber resumido en 3 :c

Christian Velázquez

student•

Te recomiendo el curso de Preprocesadores Css. Está muy actualizado, y trabaja con todos. Además, el proyecto final lo haces con Sass. Adicional a esto, creo que este curso, es para reforzar conocimiento, o para los iniciados.

Luis Fernando Pedroza Taborda

student•

oscar tiene razon, se hubiera podido realizar en menos clases.

/* ----------------------------- *\
|             $COLORS             |
\* ----------------------------- */

/*-------Branding colors */
$color-brand: #ea83ee;
$color-secondary: rgb(219,216,221);
$black:rgb(0,0,0);
$dark-grey:#4d4d4d;
$grey:#737373;
$white:#ffffff;

/*-------text colors */
$black-text:black;
$blue-text:blue;
$yellow-text:yellow;
$orange-text:orange;
$white-text:white;

/*-------alerts colors */
$danger-color:#ff0000;
$warning-color: #ffa500;
$success-color: #30e92c;
$info-color: #5474f5;
$primary-color: #584aff;

/*-------background colors */

/*------- fonts styles */
$basefont:Verdana, Geneva, Tahoma, sans-serif;

/*-------cols size's */

/*-------elements size's */

// Branding Colors
$color-brand: #eaB3ee;
$color-secondary: rgb(219,211,216);


// Palette Colors
$dark_primary_color:  #616161;
$light_primary_color: #F5F5F5;
$prynary_color: #9E9E9E;
$accent_color: #536DFE;

// text colors
$text_color: #212121;
$prymary_text: #212121;
$secondary_text: #757575;
$title_color:#F5F5F5;
$title_secondary_color: #F9F9F9;
$alert_text_color: #D32F2F;
$alert_secondary_text_color: #F44336;

// Component Colors 
$divider_color: #BDBDBD;

/*-----------------------------
    $COLORS
------------------------------*/

/**
* Branding Colors
*/

$color-primary: #ea83ee;
$color-secondary: #dbd879;


$color-black: #000000;
$color-darkgrey: #4d4d4d;
$color-grey: #737373;
$color-lightgrey: #bfbfbf;
$color-white: #ffffff;

/**
* Alert Colors
*/

$color-warning: #fa3838;
$color-info: #028ccc;
$color-success: #07ce53;

/**
* Shadow Colors
*/

$color-lightshadow: rgba(0, 0, 0, .3);
$color-shadow: rgba(0, 0, 0, .5);
$color-darkshadow: rgba(0, 0, 0, .8);

/**
* Other Colors
*/

$color-link: #028ccc;


/*-----------------------------
    $FONTS
------------------------------*/

/**
* Font Sizes
*/

$font-size-h1: 1em;
$font-size-h2: 1em;
$font-size-h3: 1em;
$font-size-h4: 1em;
$font-size-h5: 1em;
$font-size-p: 1em;
$font-size-p-secondary: 1em;

/**
* Font family
*/

$font-primary: Arial;
$font-secondary: Verdana;
$font-tertiary: Tahoma;



/*-----------------------------
    $BOX
------------------------------*/

/**
* $PADDING
*/

$padding-extra: 60px;
$padding-high: 40px;
$padding-medium: 20px;
$padding-small: 10px;
$padding-tiny: 5px;

/**
* $MARGIN
*/

$margin-extra: 60px;
$margin-high: 40px;
$margin-medium: 20px;
$margin-small: 10px;
$margin-tiny: 5px;

// Viewports
$desktop-medium: 1420px;
$desktop-small: 1024px;
$tablet-medium: 768px;
$tablet-small: 480px;
$phone-smart: 320px;

// Typography
$font-1: Montserrat, sans-serif;
$font-2: Nunito, sans-serif;
$fontello: fontello;

// Font-Size
$fsize_x0: 8px;
$fsize_x0_5: 12px;
$fsize_x1: 16px;
$fsize_x2: 24px;
$fsize_x3: 32px;
$fsize_x4: 40px;
$fsize_x5: 48px;

// Colors
$fc_p: #992;
$fc_s: #060336;
$fc_op1: #992;
$fc_op2: #1b2025;
$maincolor-1: #e7484a;

$bgc_p: #025;
$bgc_s: #025;
$bgc_op1: white;
$bgc_op2: #002050;
$bgc_op3: darkblue;

$facebook-color: #3d5b99;
$twitter-color: #1ea1f1;
$youtube-color: #ff0000;
$linkedin-color: #0274b3;
$viadeo-color: #f07355;
$pinterest-color: #bd081c;
$google-plus-color: #df493a;

</*--------------------------*\
    var globales $COLORS
/*--------------------------*\
/**
*Branding Colors
*/
$color-brand: #ea83ee;
$color-secudary: rgb(219, 216, 121); 

$black: rgb(0,0,0);
$darkgrey: #4d4d4d;
$grey: #737373;
$lightgrey: #bfbfbf;
$white: #fff; 

/*shadow item*/
$item_dark: 0 0 1px $black;
$item_darkmedium: 0 0 1px $grey;
$item_light: 0 0 3px $white;

/*color link*/
$green_link: Limegreen;

>

/*-----------------------------------------*\
                    $COLORS
\*-----------------------------------------*\
/**
*Branding Colors
*/

$color-brand: #ea83ee;
$color-secondary:rgb(219, 216, 121);
$black: rgb(0, 0, 0);
$darkgrey: #4d4d4d;
$grey: #737373;
$ligthgrey: #bfbfbf;
$white: white;

/*-----------------------------------------*\
                    $FONT-COLORS
\*-----------------------------------------*\
/**
*FONT Colors
*/

$color-tittle: $black;
$color-subtittle: $grey;
$color-text: $ligthgrey;

/*-----------------------------------------*\
                    $FONT-SIZE
\*-----------------------------------------*\
/**
*FONT Size
*/

$font-h1: 2em;
$font-h2: 1.5em;
$font-h3: 1em;
$font-paragraph: 0.8em;
$font-text:0.5em;

/*-----------------------------------------*\
                    $BORDER-SIZE
\*-----------------------------------------*\
/**
*BORDER Size
*/

$border-top: 0.5em;
$border-bottom: 0.5em;
$border-left: 0.5em;
$border-rigth: 0.5em;
$padding-top: 0.3em;
$padding-bottom: 0.3em;
$padding-left: 0.3em;
$padding-rigth: 0.3em;

/*-----------------------------------------*\
                    $COLOR-BUTTON
\*-----------------------------------------*\
/**
*GENERICS-BUTTONS
*/

$button-alert:red;
$button-sucess:green;
$button-player: blue;

Reto

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales