Reglas CSS para Layout-Base
/**
* /////////////////////////////////////////////////
* Hoja de estilos general para Layout básicos
* (cc) 3con14, FEB-2017
* archivo de estilos: base314.css
* /////////////////////////////////////////////////
*/
/**
* Es conveniente cargar el archivo reset: normalize
* de https://necolas.github.io/normalize.css
* (enlazar normalize.css antes de base314.css en HTML)
*/
/** VARIABLES GLOBALES ------------------------- */
:root {
--texto-mobile : 90%;
--texto-desktop : 110%;
--anchoWeb : 800px;
--espacio : 2%;
}
/** RESET BÁSICO -------------------------------- */
* {
box-sizing : border-box;
margin : 0;
padding : 0;
transition : all 0.1s ease-in;
}
*::before, *::after { box-sizing: border-box; }
a:active, a:hover, *:focus { outline: 0; }
body {
max-width : 100vw;
min-height : 100vh;
background-color : #FDF5E6;
}
/** TAMAÑO DE FUENTE POR DEFECTO ---------------- */
html { font-size : 16px; }
/** TAMAÑO DE FUENTE MOBILE POR DEFECTO --------- */
body { font-size : var(--texto-mobile); }
/** TAMAÑO EN % PARA DISEÑO RESPONSIVE ---------- */
h1 { font-size: 200%; }
h2 { font-size: 180%; }
h3 { font-size: 150%; }
h4 { font-size: 130%; }
h5 { font-size: 110%; }
h6 { font-size: 90%; }
/** ELEMENTOS COMUNES ---------------------- */
p, ul, ol, blockquote, pre { margin: 0 0 25px 0; }
* + p,* + ul,* + ol,* + blockquote,* + pre { margin-top: 25px; }
h1, h2, h3, h4, h5, h6 {
margin : 0 0 25px 0;
font-family : sans-serif;
font-weight : normal;
color : #333333;
text-transform : none;
}
* + h1,* + h2,* + h3,* + h4,* + h5,* + h6 { margin-top: 20px; }
ul, ol { padding-left: 30px; }
hr {
width : var(--anchoWeb);
margin : 2em auto;
border-top : 1px dotted #8c8b8b;
border-bottom : 1px dotted #fff;
}
/** ==============================================
* DISEÑO RESPONSIVE MOBILE /////////////////////
================================================== */
/* ANCHOS Y ALTOS POR DEFECTO ///////////////// */
.ancho-full,.ancho-fix {
max-width : 100vw;
margin : 0 auto;
}
.ancho-fix { width: 96%; }
/* CAJAS FLOTANTES (CON FLOATS) ///////////////// */
/** contenedor flotante */
.fila-flo {
overflow : hidden;
height : 1%;
margin : var(--espacio) auto;
}
/** hijos del contenedor flotante */
div[class*="item-flo"] {
float : none;
margin-top : calc(var(--espacio) / 2);
margin-bottom : calc(var(--espacio) / 2);
background-color : rgba(0,0,0,0.1);
}
/* CAJAS FEXIBLES (CON FLEX) ///////////////// */
/** contenedor flexBox */
.fila-flex {
display : flex;
flex-direction : column;
margin : var(--espacio) auto;
}
/** hijos del contenedor flex-box */
.item-flex {
margin-top : calc(var(--espacio) / 2);
margin-bottom : calc(var(--espacio) / 2);
background-color : rgba(255,0,0,0.1);
}
/** Separa los item-flex de texto */
.item-flex { margin-right : var(--espacio); }
/** Quita margen del último item-flex de texto */
div.fila-flex > div[class*="item-flex"]:last-child {
margin-right: 0;
}
/** =========================================================
* /// CAMBIOS EN DISEÑO RESPONSIVE DESKTOP ///////////////
* ========================================================= */
@media all and (min-width: 768px) {
/** TAMAÑO DE FUENTE DESKTOP POR DEFECTO --------- */
body { font-size : var(--texto-desktop); }
.ancho-fix {
max-width : var(--anchoWeb);
margin-left : auto;
margin-right : auto;
}
/* CAJAS FLOTANTES ////////////////////////////////////// */
div[class*="item-flo"] {
float : left;
margin-left : calc(var(--espacio) / 2);
margin-right : calc(var(--espacio) / 2);
}
/** Cambia margenes del primer item-flo */
div.fila-flo > div[class*="item-flo"]:first-child {
margin-left : 0 !important;
margin-right : var(--espacio) !important;
}
/** Cambia márgenes de último item-flo */
div.fila-flo > div[class*="item-flo"]:last-child {
margin-left : var(--espacio) !important;
margin-right: 0 !important;
}
/** Diseño 1/5 (=20%) del 100% */
.item-flo-1_5 { width: calc(100% * (1 / 5) - var(--espacio)); }
.item-flo-2_5 { width: calc(100% * (2 / 5) - var(--espacio)); }
.item-flo-3_5 { width: calc(100% * (3 / 5) - var(--espacio)); }
.item-flo-4_5 { width: calc(100% * (4 / 5) - var(--espacio)); }
/** Diseño 1/4 (=25%) y 1/2 (=50%) del 100% */
.item-flo-1_4 { width: calc(100% * (1 / 4) - var(--espacio)); }
.item-flo-2_4 { width: calc(100% * (1 / 2) - var(--espacio)); }
.item-flo-3_4 { width: calc(100% * (3 / 4) - var(--espacio)); }
/** Diseño 1/3 (=33.333%) del 100% */
.item-flo-1_3 { width: calc(100% * (1 / 3) - var(--espacio)); }
.item-flo-2_3 { width: calc(100% * (2 / 3) - var(--espacio)); }
/* CAJAS FLEXIBLES ////////////////////////////////////// */
.fila-flex {
flex-direction : row;
justify-content : space-between;
}
/** Separa los item-flex de imágenes */
.galeria { flex-wrap: wrap; justify-content: space-around; }
/** Del % depende el número de imágenes por línea */
.galeria > .item-flex {
width : 20%;
margin : 0.5em !important;
line-height : 0;
}
} /* ######################################################## */
/** ==============================================
* ELEMENTOS RESPONSIVE DESING ///////////////
* ============================================== */
/**
* IMÁGENES RESPONSIVE Y ADAPTABLES A SU CONTENEDOR
*/
img {
max-width : 100%;
height : auto;
border : 0;
}
/**
* OBJETOS (obj) FULL-WIDTH (ANCHO 100% DEL NAVEGADOR) DESDE HTML
* 1) Ejemplo con una imagen como banner
* <div class="full-box">
* <img src="/i2017bto2/img/wpp1_13.jpg" class="full-obj">
* </div>
* 2) Ejemplo con un mapa de Google-Maps
* <div class="full-box">
* <iframe class="full-obj" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d68724.23825770643!2d-3.7231663634384162!3d40.426328001427194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1486287754960" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
* </div>
*/
.full-box {
position : relative;
height : 0;
padding-bottom : 25%; /* alto de objeto */
overflow : hidden;
margin : var(--espacio) auto;
}
.full-obj {
width : 100%;
background-size : cover;
background-repeat : no-repeat;
}
/**
* OBJETOS (media) RESPONSIVE: videos, mapas, páginas, onDrive, Drive,...
* 1) Ejemplo con video de Youtube 16:9
* <div class="media-16_9">
* <iframe width="560" height="315" src="https://www.youtube.com/embed/v64KOxKVLVg" frameborder="0" allowfullscreen></iframe>
* </div>
* 2) Ejemplo con video de Vimeo 16:9
* <div class="media-16_9">
* <iframe src="https://player.vimeo.com/video/36296951" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
* </div>
* 3) Ejemplo con mapa de Google-Maps 4:3
* <div class="media-16_9 media-4_3">
* <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d68724.23825770643!2d-3.7231663634384162!3d40.426328001427194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1486287754960" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
* </div>
* NOTA: Estos ejemplos se adaptarán al tamaño de su contenedor, por ejemplo:
* <div class="item-flo-2_4"> (aquí poner ejemplo) </div>
* <div class="fila-flo ancho-full"> (aquí poner ejemplo) </div>
* <div class="fila-flo ancho-fix"> (aquí poner ejemplo) </div>
*/
.media-16_9 {
position : relative;
height : 0;
max-width : 100%;
overflow : hidden;
}
.media-16_9 { padding-bottom : 56.25%; }
/** si seguidamente añadimos esta sera 4:3; */
.media-4_3 { padding-bottom : 75%; }
.media-16_9 iframe,
.media-16_9 object,
.media-16_9 embed,
.media-16_9 video {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
}
audio, canvas, iframe, img, video { vertical-align: middle; }
/* MARCAS para ver cajas (solo en tiempo de diseño) /////////////
================================================================= */
.mk1 { box-shadow: 0 0 0 5px hsla(0, 100%, 50%, 0.4) inset; }
.mk2 { box-shadow: 0 0 0 4px hsla(120, 100%, 50%, 0.4) inset; }
.mk3 { box-shadow: 0 0 0 3px hsla(240, 100%, 50%, 0.4) inset; }
.mk4 { box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 0.4) inset; }
.mk5 { box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.4) inset; }
Demo: base314.css
En puedes observar una estructura de ejemplo realizada con este CSS. Si abres el navegador con un ancho inferior a 768px, el diseño se adapta a este tipo de dispositivos. En el siguiente enlace puedes descargar el archivo "estilos_base.css".
Videotutorial de funcionamiento
Etiquetas: HTML5, CSS3
Imprimir
