Normalize.css

Clase 17 de 32 • Curso de Responsive Design 2015

Clase anteriorSiguiente clase

Pablo Castano

student•

en el main.styl hace falta importar nib para que funcione correctamente @import 'nib'

Alejandro Irimia Mesa

student•

Muy cierto, corregido y aplicado. ¡Gracias!

Erick Orlando Velasco Martínez

student•

Lo coloqué pero nada pasó ¬¬

Manuel Galindez

student•

Pueden tambien descargar normalize.styl que esta ya con la sintaxis de stylus.

Juan Manuel López García

student•

Normalize.css

Ramon Zuniga

student•

Si usan nib puden utilizar las funciones reset que ya vienen incluidas en nib

Fabio Rojas

student•

/*Para los que no les funciono el server gulp-server porque manejaban un estructura de directorios diferente usada en clase así me funciono:*/

var gulp = require('gulp');
var webserver = require('gulp-webserver');
var stylus = require('gulp-stylus');
var nib = require('nib');
var minifyCss = require('gulp-minify-css');

/*
** todos los directorios
*.styl todos los directorios .styl
*/
var config ={
styles:{
main:'./app/src/styles/main.styl',
watch:'./app/src/styles/**/*.styl',
output:'./app/static/public/css'
},
html:{
watch:'./app/website/views/templates/*.html',
}

}
/*Creamos la tarea del servidor web*/
gulp.task('server',function(){
gulp.src('./')
.pipe(webserver({
host:'0.0.0.0',
port:8080,
open: true,
fallback: './app/website/views/templates/index.html',
livereload:true
}));
});

/*tarea de stylus a css*/
gulp.task('build:css',function(){
gulp.src(config.styles.main)
.pipe(stylus({
use:nib(),
'include css':true
}))
.pipe(minifyCss())
.pipe(gulp.dest(config.styles.output));
});

gulp.task('watch',function(){
gulp.watch(config.styles.watch,['build:css']);
gulp.watch(config.html.watch,['build']);
});
gulp.task('build',['build:css']);
gulp.task('default',['server','watch','build']);

Normalize.css

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?