Colores

_color-variables.scss

Colores del tema. Añadidos siguiendo el esquema de clases de color de Materialize.

$sandy-brown:
"base": #feae59,
"lighten-3": #ffe9bc,
"lighten-2": #ffd5a8,
"lighten-1": #ffbf7c,
"darken-1": #e89033,
"darken-2": #Be6b14,
"darken-3": #913e28
$strawberry:
"base": #c8253b,
"lighten-3": #ffb2c3,
"lighten-2": #f47bbc,
"lighten-1": #d94c5f,
"darken-1": #9f1226,
"darken-2": #7a0011,
"darken-3": #5c0000
$bunting:
"base": #131143,
"lighten-3": #65639f ,
"lighten-2": #3d3b77,
"lighten-1": #26245e,
"darken-1": #07062a,
"darken-2": #020215,
"darken-3": #000010

Fuentes

Texto general_typography.scss
font-family: Montserrat

                        $font-list : (
                        font-directory: '../fonts/Montserrat',
                        font : (
                        font-family: Montserrat,
                        font-variants: (
                        ( file: 'Montserrat-Thin.ttf', weight: '100', style: 'normal' ),
                        ( file: 'Montserrat-ThinItalic.ttf', weight: '100', style: 'italic' ),
                        ( file: 'Montserrat-ExtraLight.ttf', weight: '200', style: 'normal' ),
                        [...]
                        ),
                        ),
                        );
                        $fonts: map-get( map-get( $font-list, 'font' ), 'font-variants' );
                        $font-family: map-get( map-get( $font-list, 'font' ), 'font-family' );
                        $font-directory: map-get( $font-list, 'font-directory' );
                        @each $font-variant in $fonts {
                        @font-face {
                        $font-style: map-get( $font-variant, 'style' );
                        $font-weight: map-get( $font-variant, 'weight' );
                        $file: map-get( $font-variant, 'file' );
                        font-family: $font-family;
                        font-style: unquote( $font-style );
                        font-weight: unquote( $font-weight );
                        src: url("#{$font-directory}/#{$file}");
                        }
                        };
                    
Títulos_typography.scss
font-family: Canter

                        @font-face {
                        font-family: Canter;
                        src: url("../fonts/Canter_Light.otf");
                        font-style: normal;
                        };
                    
Menús y botones_variables.scss (20. Typography)
Fuentes por defecto de Materialize

                        $font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
                    
                    

Componentes

Cada uno de los elementos que forman el framework y/o elementos generales y de normalización.

_variables.scss
Variables de Materialize a utilizar en el resto de componentes (salvo las que definen los
                        colores).
_color-clases.scss
Clases que definen las variables de colores.
_color-variables.scss
Paleta completa de colores organizada en variables.
_normalize.scss
Normaliza estilos de un amplio número de elementos html para que sean compatibles con distintos
                        navegadores.
Basado en el proyecto normalize.css.
_global.scss
Estilos por defecto de elementos html y clases generales.
_typography.scss
Estilos generales de texto.
_grid.scss
Sistema de grillas.
_collapsible.scss
Los colapsables son elementos de acordeón que se expanden al hacer clic en ellos.
_icons-material-design.scss
Estilos para los iconos de Material.
_navbar.scss
_sidenav.scss
_dropdown.scss
Listas desplegables.
_tabs.scss
Lista desordenada de pestañas con hashes correspondientes a los ids de las pestañas.
_table_of_contents.scss
Lista de navegación del contenido de una página.
_buttons.scss
_pulse.scss
Elemento que genera un efecto "latiente" pensado para llamar la atención sobre botones flotantes.
                    
_waves.scss
Biblioteca externa incluida para crear un efecto de tinta.
forms
_checkboxes.scss
_file-input.scss
_forms.scss
_input-fields.scss
_radio-buttons.scss
_range.scss
_select.scss
_switches.scss
_datepicker.scss
Calendarios interactivos.
_timepeciker.scss
Reloj interactivo.
_cards.scss
_chips.scss
Las chips se pueden usar para presentar trozos pequeños de información. Lo más habitual
                        es utilizarlas para contactos o etiquetas. 
_badges.scss
Los badges pueden notificar que hay mensajes o notificaciones nuevas o no leídas.
_toast.scss
Alertas.
_modal.scss
Modal sirve para cuadros de diálogo, mensajes de confirmación u otras llamadas de
                        contenido.
_slider.scss
_carousel.scss
_materialbox.scss
Material box es una implementación del plugin Lightbox para ampliar imágenes al pulsar sobre
                        ellas.
_tooltip.scss
Los tooltips son pequeñas pistas textuales interactivas principalmente para elementos
                        gráficos.
_tapTarget.scss
Elemento para ampliar información en momentos contextualmente relevantes.
_transitions.scss
Estilos para las transiciones.
_preloader.scss
Indicadores del progreso de carga de elementos que tardan en cargar.

Imports

materialize.scss

Archivo que compilará Sass en una hoja de estilos CSS.

Incluye todos los @import de los componentes.

@import "components/color-variables";

Media Queries

_variables.scss (11. Global // Media Query Ranges)

Agrupan los dipositivos en rangos de tamaños de pantalla para la visualización del contenido. Recogido en variables.

Hasta

TAMAÑO $small-screen: 600px !default; $medium-screen: 992px !default; $large-screen: 1200px !default;

MEDIA QUERY


                        $small-and-down: "only screen and (max-width : #{$small-screen})" !default;


                        $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;


                        $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;

Desde

TAMAÑO $small-screen-up: 601px !default; $medium-screen-up: 993px !default; $large-screen-up: 1201px !default;

MEDIA QUERY $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; $extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;

Grid

_variables.scss (12. Grid), _grid.scss

Materialize utiliza un sistema de 12 columnas. El ancho de cada columna se calcula con la fórmula:

(n/12)*100

Donde n es el número de columnas que ocupará la caja actual y 12 es el número total de columnas.

El código a partir del que se compilará el CSS se basa en @mixin para evitar la repetición de código y la utilización de bucles @while para calcular el ancho de las columnas para cada media query.

Las capas col van dentro de una capa row.

Organiza las columnas mediante floats (float: left;).

Botones

_variables.scss (3. Buttons), _buttons.scss

RaisedbuttonBotón estándar.
FloatingaddBotón para
                        funciones importantes.
FlatButtonBotón diseñado para evitar un exceso de
                        capas en elementos que ya tienen profundidad, como las cards.

Cards

_variables.scss (4. Cards), _cards.scss

Materialize cuenta con varios tipos de cards, los más comunes son: básico, horizontal y con imagen.

Utiliza flex para organizar las capas.

                        TAMAÑOS
                        Independientes de las media query.
                        .small{ height: 300px; }
                        .medium{ height: 400px; };
                        .large{ height: 500px; };
                    

                        TIPO DE BOTÓN
                        Por defecto usa enlaces <a>.
                        .card-action { a:not(.btn):not(.btn-large):not(.btn-floating) }
                    
Básico.card-title.cardSoy una tarjeta muy sencilla. Soy buena para contener pequeños fragmentos de información.
                                Soy conveniente porque requiero pocas etiquetas para un uso eficaz.

                            Enlace
                        
Horizontal
                                .card&.horizontal
                                .card-stacked {
                                    flex-direction: column;}
                            

                                Enlace
                            
Con imagen
                             
                            .card-title
                        

                            .card-image
                            img { width: 100%; }
                        

                            ENLACE
                        