Álvaro Felipe
CEO de EDteam
Web oficial de EDteam
Plataforma dedicada a la enseñanza de programación, diseño web y todo lo referente al mundo de desarrollo web.
Restaurant
Restaurant de parrilldas y pollos ubicada en Perú con diversas sucursales al rededor de todo el país.
Tienda en línea
Empresa dedicada a la comercialización de equipo agrícola, repuestos y accesorios.
Venta de maquinaría metalmecánica
Empresa dedicada a la importación y comercialización de maquinaria metalmecánica y accesorios.
Centro educativo cristiano bilingüe
Unidad Educativa fundamentada en sólidos principios bíblicos con una alta calidad en la formación académica bilingüe.
Transporte corporativo, turístico y personal
Empresa peruana dedicada al transporte de personal, transporte ejecutivo o corporativo y transporte turístico.
Agencia de soluciones TI
Wizardgva nace del sueño de un joven por brindar soluciones de hardware rápidas y accesibles
Empresa de reta de autos
Alkila es una empresa Peruana dedicada al rubro de alquiler de vehículos.
Agencia de eventos
En Gema, son especialistas en el servicio de banquetes y renta de equipo para todo tipo de eventos
Portafolio
Esta web es el portfolio de Robert Huamán Cáceres, estudiante en Ingeniería informática y sistemas de la Universidad Nacional Micaela Bastidas de Apurímac - Perú
Empresa
Empresa peruana dedicada a la exportación de indumentaria y accesorios para uso militar.
v2.1.6 (Mayo 2017)
Agrega CSS grid y resuelve varios bugs menores.
v2.0 (3 dic 2016)
Cambia su enfoque al de librería (pretendía ser un framework) en versión Sass y CSS. Permite usar mixins que compilano solo el código necesario, además de activar y desactivar componentes.
v1.2 (26 sep 2015)
Se cambia floats por flexbox. Se usan las clases .ed-container y .ed-item en remplazo de .grupo y .caja
v1.0 (19 abr 2015)
Uso de floats, clases .grupo y .caja
Álvaro Felipe
CEO de EDteam
Alexis Mora Angulo
UX Designer
Carlos Cuatin
Frontend Developer
Camilo Rodríguez
Web Developer
Daniel Romero
Backend Developer
Franco Correa
Web Developer
Ernesto Graterol
UI Designer
Jose Daniel Posso Garcia
Developer
Alex Andrei
Frontend Developer
Johelyn Cordovao
Web Designer
Con EDgrid puede alinear elementos o su contenido en horizontal y vertical según el breakpoint.
Use las clases breakpoint-left, breakpoint-center y breakpoint-right
<h1 class="s-left m-center lg-right">Hola mundo</div>
<h1 class="s-center m-right lg-left">Hola mundo</div>
<h1 class="s-right m-left lg-center">Hola mundo</div>
Redimensione la ventana para ver
Use las clases breakpoint-to-left, breakpoint-to-center, breakpoint-to-right
<p class="s-75 m-50 lg-40 s-to-left m-to-center l-to-right">
EDgrid es una libreria construida con Sass (y con versión CSS)
para Responsive Web Design (RWD). Es muy ligero, personalizable
y te permite prototipar y crear layouts en muy poco tiempo sin
conflictos con tu proyecto.
</p>
Ejemplo:
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
* Para que las alineaciones de bloque funcionen debe agregar clases de ancho.
Use las clases breakpoint-numero donde número es un múltiplo de 5 desde 0 hasta 95. Asi que la clase m-85 significa que el elemento tendrá 85% de ancho (de su contenedor) a partir de 640px.
Combine estas clases con las de alineación para crear layouts avanzados.
<p class="s-75 m-50 lg-40 s-to-left m-to-center l-to-right">
EDgrid es una libreria construida con Sass (y con versión CSS)
para Responsive Web Design (RWD). Es muy ligero, personalizable
y te permite prototipar y crear layouts en muy poco tiempo sin
conflictos con tu proyecto.
</p>
Ejemplo:
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
Comprender la diferencia entre estos dos conceptos le ahorrará dolores de cabeza y sufrimiento. Se considera contenido a todo elemento inline y bloque a todo elemento de bloque (en la definición de HTML). Los elementos inline son mostrados por el navegador uno al lado del otro y con saltos de línea (cuando se agota el ancho). Los elementos de bloque fuerzan un salto de línea (salvo que lo modifiques con CSS).
Por ejemplo, un párrafo <p></p> es un bloque, pero el texto dentro de él es contenido. Así que debe preguntarse, ¿quiero todo el bloque de párrafo a la derecha o solo quiero el texto alineado a la derecha?
<p class="s-right">
Este es un párrafo cuyo texto se ha alineado a la derecha
</p>
Ejemplo:
Este es un párrafo cuyo texto se ha alineado a la derecha
<p class="s-75 s-to-right">
Este es un párrafo alineado a la derecha (como bloque)
</p>
Ejemplo:
Este es un párrafo alineado a la derecha (como bloque)
<p class="s-75 s-to-center s-right">
Este es un párrafo alineado al centro como bloque <br> y con el contenido alineado a la derecha.
</p>
Ejemplo:
Este es un párrafo alineado al centro como bloque
y con el contenido alineado a la derecha.
Comprender esta sutil diferencia es crucial para construir layouts. Por ejemplo, si quiere una imagen centrada, agregarle una clase s-to-center no hará nada porque las imágenes son inline (igual que los <span>, <a>, <input>, <label>). Podría maldecir a EDgrid pero así funciona CSS y no podemos hacer nada.
Para centrar una imágen puede aplicarle la clase breakpoint-center a su contenedor. Por ejemplo:
<div class="s-center">
<img src="/img/tioalexys.jpg">
</div>
Igual si quiere alinearla a la derecha o izquierda. Y lo mismo para cualquier elemento inline.
Ahora bien, ¿qué sucede si quiero centrar directamente la imagen y no usar su contenedor? Use la clases breakpoint-block-left, breakpoint-block-center y breakpoint-block-right que agregan además un display: block al elemento inlne al que se apliquen y resuelven la alineación.
<img src="/img/tioalexys.jpg" class="s-block-center">
Seguro pensará: si se necesita un display: block agréguenlo a los estilos en lugar de crear nuevas clases. El detalle es que el elemento podría tener display:grid, display:flex, display: table o display: inline-block y no se puede forzar un display: block porque destruiría su layout.
Las imágenes de mapas de bits (jpg, png, gif, webp) poseen las propiedades naturalHeight y naturalWidth (accedes a ellas por JavaScript) que representan su ancho y alto original. La imagen del ejemplo anterior es de 200x200px por eso la podemos centrar. Pero si fuera más grande habría que aplicarle además una clase para definir su ancho.
En el caso de las imágenes svg, estas son vectoriales y carecen de dichas propiedades por lo que siempre ocuparan todo el espacio disponible en su contenedor.
Ejemplo:
La podemos centrar con clases de ancho y de alineación de bloques
<img alt="Logotipo de EDgrid" src="/assets/img/EDgrid-logo.svg" class="s-30 s-block-center">
Con EDgrid puede alinear elementos o su contenido en horizontal y vertical según el breakpoint.
Use las clases breakpoint-left, breakpoint-center y breakpoint-right
<h1 class="s-left m-center lg-right">Hola mundo</div>
<h1 class="s-center m-right lg-left">Hola mundo</div>
<h1 class="s-right m-left lg-center">Hola mundo</div>
Redimensione la ventana para ver
Use las clases breakpoint-to-left, breakpoint-to-center, breakpoint-to-right
<p class="s-75 m-50 lg-40 s-to-left m-to-center l-to-right">
EDgrid es una libreria construida con Sass (y con versión CSS)
para Responsive Web Design (RWD). Es muy ligero, personalizable
y te permite prototipar y crear layouts en muy poco tiempo sin
conflictos con tu proyecto.
</p>
Ejemplo:
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
Use las clases breakpoint-numero donde número es un múltiplo de 5 desde 0 hasta 95. Asi que la clase m-85 significa que el elemento tendrá 85% de ancho (de su contenedor) a partir de 640px.
Combine estas clases con las de alineación para crear layouts avanzados.
<p class="s-75 m-50 lg-40 s-to-left m-to-center l-to-right">
EDgrid es una libreria construida con Sass (y con versión CSS)
para Responsive Web Design (RWD). Es muy ligero, personalizable
y te permite prototipar y crear layouts en muy poco tiempo sin
conflictos con tu proyecto.
</p>
Ejemplo:
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
Comprender la diferencia entre estos dos conceptos le ahorrará dolores de cabeza y sufrimiento. Se considera contenido a todo elemento inline y bloque a todo elemento de bloque (en la definición de HTML). Los elementos inline son mostrados por el navegador uno al lado del otro y con saltos de línea (cuando se agota el ancho). Los elementos de bloque fuerzan un salto de línea (salvo que lo modifiques con CSS).
Por ejemplo, un párrafo <p></p> es un bloque, pero el texto dentro de él es contenido. Así que debe preguntarse, ¿quiero todo el bloque de párrafo a la derecha o solo quiero el texto alineado a la derecha?
<p class="s-right">
Este es un párrafo cuyo texto se ha alineado a la derecha
</p>
Ejemplo:
Este es un párrafo cuyo texto se ha alineado a la derecha
<p class="s-75 s-to-right">
Este es un párrafo alineado a la derecha (como bloque)
</p>
Ejemplo:
Este es un párrafo alineado a la derecha (como bloque)
<p class="s-75 s-to-center s-right">
Este es un párrafo alineado al centro como bloque <br> y con el contenido alineado a la derecha.
</p>
Ejemplo:
Este es un párrafo alineado al centro como bloque
y con el contenido alineado a la derecha.
Comprender esta sutil diferencia es crucial para construir layouts. Por ejemplo, si quiere una imagen centrada, agregarle una clase s-to-center no hará nada porque las imágenes son inline (igual que los <span>, <a>, <input>, <label>). Podría maldecir a EDgrid pero así funciona CSS y no podemos hacer nada.
* Puede usar estas clases también para alinear botones
Para centrar una imágen puede aplicarle la clase breakpoint-center a su contenedor. Por ejemplo:
<div class="s-center">
<img src="/img/tioalexys.jpg">
</div>
Igual si quiere alinearla a la derecha o izquierda. Y lo mismo para cualquier elemento inline.
Ahora bien, ¿qué sucede si quiero centrar directamente la imagen y no usar su contenedor? Use la clases breakpoint-block-left, breakpoint-block-center y breakpoint-block-right que agregan además un display: block al elemento inlne al que se apliquen y resuelven la alineación.
<img class="s-block-center" src="/assets/img/EDgrid-isotipo.svg">
Seguro pensará: si se necesita un display: block agréguenlo a los estilos en lugar de crear nuevas clases. El detalle es que el elemento podría tener display:grid, display:flex, display: table o display: inline-block y no se puede forzar un display: block porque destruiría su layout.
Las imágenes de mapas de bits (jpg, png, gif, webp) poseen las propiedades naturalHeight y naturalWidth (accedes a ellas por JavaScript) que representan su ancho y alto original. La imagen del ejemplo anterior es de 200x200px por eso la podemos centrar. Pero si fuera más grande habría que aplicarle además una clase para definir su ancho.
En el caso de las imágenes svg, estas son vectoriales y carecen de dichas propiedades por lo que siempre ocuparan todo el espacio disponible en su contenedor.
Ejemplo:
La podemos centrar con clases de ancho y de alineación de bloques
<img alt="Logotipo de EDgrid" src="/assets/img/EDgrid-logo.svg" class="s-30 s-block-center">
Al copiar el código del componente banner usted sólo conseguirá la estructura de éste para que coloque el contenido que desee.
Los estilos empleados en la demostración (como el color de fondo o estilos del texto) provienen de la guía de estilos de EDteam.
<section class="l-section s-py-4">
<!-- Separación del contenido en columnas -->
<div class="ed-grid lg-grid-2 row-gap s-gap-2 m-gap-4">
<!-- Contenido de la columna 1 -->
<div class="s-column s-main-center lg-main-start lg-cross-start s-center lg-left">
<h1>Banner principal de dos columnas con EDgrid</h1>
<p>Creado utilizando los componentes de columnas. Totalmente responsive.</p>
<!-- Botones -->
<div class="s-main-center">
<a class="button s-mr-2 s-mb-2 m-mb-0">Botón 1</a>
<a class="button s-mb-2 m-mb-0">Botón 2</a>
</div>
</div>
<!-- Contenido de la columna 2 -->
<div>
<div class="img-container s-ratio-16-9">
<img class="s-radius-1" src="/assets/img/og-image.jpg">
</div>
</div>
</div>
</section>
Los estilos base normalizan los elementos HTML para Responsive Web Design.
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin : 0;
font-family : sans-serif;
}
img {
max-width : 100%;
height : auto;
}
a {
text-decoration : none;
&:hover { text-decoration : underline }
}
Los estilos base normalizan los elementos HTML para Responsive Web Design.
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin : 0;
font-family : sans-serif;
}
img {
max-width : 100%;
height : auto;
}
a {
text-decoration : none;
&:hover { text-decoration : underline }
}
Aunque ed-grid no pretende incluir elementos de UI (que se incluirán en el futuro proyecto ed-ui), por el momento incluye botones y menu pensando en el prototipado rápido.
Use la clase button. Puede añadir las clases round o radius para bordes redondeados.
Para controlar el tamaño del botón, cambie manualmente el font-size por CSS. Si desea cambiar los colores, haga lo mismo en su CSS personalizado.
<!-- version con css -->
<a href="#" class="button">Boton default</a>
<a href="#" class="button round">Boton round</a>
<a href="#" class="button radius">Boton radius</a>
Resultado
Boton default Boton round Boton radius
Incluya el mixin button($bg-color,$front-color,$style) Sus parámetros (todos opcionales) son:
<a href="#" class="selector1">Boton 1</a>
<a href="#" class="selector2">Boton 2</a>
<a href="#" class="selector3">Boton 3</a>
.selector1 { @include button(teal, white) }
.selector2 { @include button(tomato, white, round) }
.selector3 { @include button(#2e84e6, white, radius) }
Resultado
Los breakpoints son los puntos de quiebre donde el layout cambia. Estan definidos en el siguiente Sass map:
$breakpoints : (
s : 0, // Todos los tamaños
m : 40em, // ~ 640px
lg : 64em, // ~ 1024px
xl : 90em // ~1440px
) !default;
* En versiones anteriores se usaba el breakpoint l que ahora se ha cambiado a lg para evitar confusión con la nomenclatura de SMACSS en la que l no significa large sino layout. Sin embargo, por compatibilidad hacia atrás, EDgrid reconoce aun el breakpoint l por lo que su proyecto no se verá afectado. Aunque recomendamos dejar de usarlo en el futuro.
EDgrid usa el patrón Mobile first, lo que significa que el estilo definido en un breakpoint será heredado en breakpoints superiores salvo que sea sobreescrito. En el siguiente ejemplo, el elemento medirá 50% de ancho (s-50) en todos los tamaños ya que fue definido en el breakpoint menor y no ha sido sobreescrito.
<article class="s-50">Hola mundo</article>
En cambio, en este ejemplo, medirá 50% en los breakpoints s y m pero en l y xl medirá 75%.
<article class="s-50 lg-75">Hola mundo</article>
Si es usuario avanzado puede cambiar los breakpoints por los suyos. Puede cambiar el tamaño, el nombre o la cantidad. Solo debe declarar el Sass map $breakpoints antes de importar EDgrid.
$breakpoints : (
small : 0,
medium : 45em,
large : 80em,
xlarge : 90em,
xxlarge : 120em
)
@import "~ed-grid/ed-grid";
Recuerde que EDgrid es una librería enfocada al RWD, por lo que no tiene componentes o estilos integrados por defecto, pero puede utilizar el prototipado y el prototipado avanzado para crear sus propios componentes.
Ejemplo de tarjeta creada con el prototipado integrado:
Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación
<article class="s-shadow-bottom">
<!--Contenedor de la imagen-->
<div class="s-ratio-16-9 img-container s-radius-tl s-radius-tr">
<img src="/assets/img/poster-curso.png">
</div>
<!--Contenido-->
<div class="s-bg-white s-pxy-2">
<h3>Curso Bases de Datos Desde Cero</h3>
<p class="s-mb-0">Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación</p>
</div>
<footer class="s-cross-center s-bg-grey s-pxy-2 s-radius-br s-radius-bl">
<!--Define el ancho máximo de la imagen-->
<div class="s-10 s-mr-1">
<!--Contenedor de la imagen-->
<div class="circle ">
<img src="/assets/img/alexys.jpg">
</div>
<!--Profesor-->
</div>
<p class="s-mb-0">Prof. Alexys Lozada</p>
<!--Boton-->
<div class="button s-to-right">$40USD</div>
</footer>
</article>
Este card se mostrará en formato horizontal en desktop y pasará a ser vertical en dispositivos móviles.
Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación
<article class="s-shadow-bottom">
<!-- Póster y contenido -->
<div class="ed-grid m-grid-5 s-gap-2 m-pxy-2 s-bg-white s-radius-tl s-radius-tr">
<!-- Contenedor de la imagen -->
<div class="m-cols-2 img-container s-ratio-16-9 s-radius-tl s-radius-tr m-radius">
<img src="/assets/img/poster-curso.png">
</div>
<!-- Contenido -->
<div class="s-pxy-2 m-pxy-0 m-cols-3">
<h3>Curso Bases de Datos Desde Cero</h3>
<p class="s-mb-0">Diseña, estructura y administra
bases de datos SQL y crea un sistema de facturación</p>
</div>
</div>
<footer class="s-bg-grey s-cross-center s-pxy-2 s-radius-br s-radius-bl">
<!-- Define el ancho máximo de la imagen -->
<div class="s-10 m-5 s-mr-1">
<!-- Contenedor de la imagen -->
<div class="circle ">
<img src="/assets/img/alexys.jpg">
</div>
</div>
<!-- Profesor -->
<p class="s-mb-0">Prof. Alexys Lozada</p>
<!-- Botón -->
<div class="button s-to-right">$40USD</div>
</footer>
</article>
En EDgrid puede decidir que código será compilado a CSS.
Si usted desea puede trabajar solo con la versión CSS de EDgrid, y añadir clases a su marcado HTML para construir su layout según el flujo de trabajo recomendado.
El código CSS de EDgrid 2 se clasifica en 2 grupos:
Cojunto de clases CSS recomendadas si va a trabajar con la versión CSS. Si va a trabajar con Sass puede saltarse está sección.
Clases utilitarias de CSS que incluyen la funcionalidad base de EDgrid. Por eso, incluso en la versión Sass vienen activadas por defecto.
Tanto en flexbox como en grid, la propiedad order permite definir la posición de un elemento en el layout. Por ejemplo, un elemento con order: 1 aparecerá antes que uno con order:2 aunque en el código HTML se encuentre después.
Con EDgrid puede definir esta propiedad con las clases breakpoint-order-numero. Donde número va de 1 hasta la variable max-grid-columns (12 por defecto).
Tenga en cuenta que asignarle 1 al order de un elemento no hará que aparezca en primer lugar ya que el valor predeterminado de todos es 0 (teoría de CSS). Por lo que debe agregarle las clases a todos los que quiera modificar.
<div class="ed-grid s-grid-3">
<div class="m-order-2 lg-order-3">1</div>
<div class="m-order-3 lg-order-1">2</div>
<div class="m-order-1 lg-order-2">3</div>
</div>
Usando la teoría de flexbox, consideramos main como eje horizontal y cross como eje vertical. Con las clases breakpoint-main-[start|center|end|justify|distribute] y breakpoint-cross-[start|center|end|baseline] Puede alinear bloques y elementos hijos.
<div class="s-cross-center">
<img src="/img/tioalexys.jpg" width="80" class="s-mr-2">
<span>Alexys Lozada</span>
</div>
Tenga en cuenta que los márgenes de los elementos pueden influir en estas alineaciones. Por ejemplo, el mismo código anterior pero con un párrafo en lugar de span (el párrafo tienen un margin-bottom que impide el centrado vertical).
<div class="s-cross-center">
<img src="/img/tioalexys.jpg" width="80" class="s-mr-2">
<p>Alexys Lozada</p>
</div>
Alexys Lozada
Lo resolvemos cambiando la etiqueta o anulando el margen.
<div class="s-cross-center">
<img src="/img/tioalexys.jpg" width="80" class="s-mr-2">
<p class="s-mb-0">Alexys Lozada</p>
</div>
Alexys Lozada
Use las siguientes clases para definir la orientacion de los hijos de un elemento:
breakpoint-row De izquierda a derecha (predeterminado)breakpoint-column De arriba hacia abajobreakpoint-row-reverse De derecha a izquierdabreakpoint-column-reverse De abajo hacia arriba<div class="lg-50 lg-to-center column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
La siguiente es la estructura de archivos de EDgrid. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)
Tenga presente que en el mismo repositorio se encuentra la librería EDgrid y la página web con la documentación. Si desea estudiar como se creó EDgrid busque el archivo src/scss/ed-grid.scss y la carpeta src/scss/ed-grid. Todo lo demás se usa para construir esta página web y no forma parte de la librería.
src/ Carpeta de desarrollo
md/ Contenido de la documentación en markdowndata/ Datos JSON para la página webimg/ Imágenes para la página webjs/ JavaScript para la página webpug/ Archivos pug para generar la página webscss/ Estructura de archivos Sassed-grid/ 🔥 Componentes de la librería EDgrid.web-styles/ Estilos para la documentación en ed-grid.com (no son parte de EDgrid)styles.scss Archivo principal para la documentacion ed-grid.com (no es parte de EDgrid)ed-grid.scss 🔥 Archivo principal de EDgrid que importa sus componentes y define variables.ed-grid.scss 🔥 Archivo para importar EDgrid desde node_modules.test.html 🔥 Archivo para hacer pruebas con EDgrided-grid.scss 🔥 Archivo para importar EDgrid desde node_modules.src/
ed-grid.scss 🔥 Archivo que importa los componentes y define las variables de configuracióned-grid-css.scss Archivo para compilar EDgrid a su versión CSSed-grid/
components/ Componententes principales de la librería
_alignment.scss Utilidades para alineación de bloques y contenido_base Estilos base para elementos HTML._core-flexbox.scss Sistema de columnas con flexbox_core-grid.scss Sistema de filas y columnas con CSS Grid_dev.scss Estilos para debuggin_layouts.scss Estilos para separaciones verticales, margenes y paddings._media-queries Mixins para crear media queries_prototype.scss Estilos para prototipado rápido_video.scss Estilos para video responsive_visibility.scss Estilos para mostrar y ocultar elementos en cada breakpointhelpers/ Funciones y mixins necesarios para el funcionamiento de diversos componentes
_functions.scss Funciones para convertir pixeles a em y rem (necesarios para mixins de EDgrid)_mixins.scss Mixins de apoyo en el desarrollo de componenteslegacy/ Componentes y estilos para compatibilidad con versiones anteriores de EDgrid (no necesario en proyectos nuevos).
_ed-menu Estilos para crear menus de navegación_grid.scss Estilos para crear cuadriculas (se recomienda usar core-grid)_legacy.scss Estilos varios de versiones antiguas_offset Estilos legacy para offset de columnas (no necesario en proyectos nuevos).css/
ed-grid.css Versión CSS de EDgrid con comentarios para desarrolloed-grid.min.css Versión minificada de EDgriddocs/ Página web de documentación y assets compiladossrc/
pug/ Archivos pug para generar páginas HTMLmd/ Contenido de la documentación en formato markdownimg/ Imágenes de la página webdata/ Datos en formato JSON para mostrar en la página webjs/ Archivos javascript para la documentaciónscss/
styles.scss Importa archivos para estilos de la documentaciónweb-styles/ Partials de Sass para la documentaciónEl core de ed-grid está construido con flexbox, cero floats, display:table, inline-blocks u otros hacks extraños. Sin embargo, ed-grid ofrece muchas utilidades extra para aprovechar el poder de flexbox.
Estas utilidades están dentro de los helpers de CSS ($cssHelpers : true) por lo que se recomienda activarlos aunque su flujo de trabajo sea con Sass.
l-main-justify m-flex-reverse xl-cross-centercross-end<!-- version con css -->
<div class="main-justify">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass *******
.container { @include mainJustify }
<!-- version con css -->
<div class="main-distribute">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include mainDistribute }
<!-- version con css -->
<div class="main-start">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include mainStart }
<!-- version con css -->
<div class="main-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
:markdown-it
// version con Sass
.container { @include mainCenter }
<!-- version con css -->
<div class="main-end">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include mainEnd }
<div class="cross-start">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include crossStart }
<!-- version con css -->
<div class="cross-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include crossCenter }
<!-- version con css -->
<div class="cross-end">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include crossEnd }
Puede combinar alineaciones para el eje principal y secundario
<!-- version con css -->
<div class="main-center cross-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container {
@include mainCenter;
@include crossCenter;
}
<!-- version con css -->
<div class="flex-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include flexReverse }
<!-- version con css -->
<div class="flex-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
//version con Sass
.container { @include flexReverse }
<!-- version con css -->
<div class="flex-column-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// version con Sass
.container { @include flexColumnReverse }
El centrado absoluto se aplica a un container que tiene un solo hijo, el cual puede ser solo texto o un elemento html
<!-- version con css -->
<div class="flex-center">
<div>1</div>
</div>
// version con Sass
.container { @include flexCenter }
A través de clases html con el formato bp-order-n siendo bp un breakpoint válido de ed-grid, y n un número entre 1 y 10 se puede controlar la aparicion de los elementos en el navegador. Recuerde que todos los elementos tienen por defecto el valor 0 para la propiedad order.
Ejemplo
<div class="container">
<div class="m-order-2">1</div>
<div class="m-order-1">2</div>
<div>3</div>
</div>
Esta característica no esta disponible para Sass porque en Sass basta escribir una linea de código en la media query requerida. Escribir los mixins consume más código que tan solo escribir manualmente el orden cuando sea necesario.
EDgrid incluye dos funciones útiles en el RWD: em($px) y rem($px)
Estas funciones convierten un número en px a em o rem respectivamente
.selector {
font-size: em(15px);
max-width : rem(1000px);
}
Compila a
.selector{
font-size:.9375em;
max-width:62.5rem;
}
Estas funciones lanzarán un error si le pasa un valor diferente a un número en pixeles
Con EDgrid puede crear cuadrículas fácilmente.
En CSS EDgrid cuenta con dos grids preconstruidos: 1,2,3,4 y 2,3,4,5 (los números representan las columnas en cada breakpoint de ed-grid).
Para utilizarlos, use la clase grid-container en el contedor, además la clase grid-1234 o grid-2345 para indicar el tipo de grid.
Por último, a cada item de la galeria asignele la clase grid-item
<div class="grid-container grid-1234">
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
</div>
Para Sass, use el mixin grid($item,$s $m $l $xl,$gutter) aplicado al contenedor del grid. Los parámetros son:
$item (obligatorio) es el selector css de cada item del grid. Debe pasarse entrecomillado.$s $m $l $xl (solo el primero obligatorio) son el número de columnas en cada breakpoint de EDgrid (separados por espacios)
$gutter (opcional) es la separación entre los items. Solo se aceptan em, rem o px.Ejemplo, para el siguiente HTML:
<div class="gallery">
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
</div>
Crearemos un grid 1,1,2,3
.gallery {
@include grid('.image',1 1 2 3);
}
Los grids son creados con CSS Grid y agregan un fallback con flexbox para navegadores que no lo soportem.
Archivo helpers.scss
Los helpers son ayudas al trabajo a través de clases.
Puede usar las mismas clases de los ed-item.
<div class="m-60">
<!--Este elemento mide 60% a partir de 640px-->
</div>
<div class="xl-1-3">
<!-- Este elemento mide 33.33% a partir de 1440px-->
</div>
Se aplica al mismo elemento que se quiere alinear las clases: to-left, to-right, to-center. Para que funcione debe especificar un ancho también.
<div class="to-left s-50"><!-- Se envia a la izquierda 50% de ancho desde small--></div>
<div class="to-right m-80"><!-- Se envia a la derecha 80% de ancho desde medium --></div>
<div class="to-center l-75"><!-- Se envia al centro 75% de ancho desde large--></div>
Use las clases left, center, right en el contenedor para que su contenido se centre.
<h2 class="center">
Soy un título centrado
</h2>
Versión CSS
<!--Version css-->
<div class="clearfix"><!-- la clase clearfix limpia los floats--></div>
Versión Sass
// Uso con Sass
.selector { @include clearfix }
Hace que un elemento siempre mida el 100% del ancho disponible
Versión CSS
<!-- Version CSS -->
<div class="full"><!-- Este elemento medirá 100% de ancho siempre --></div>
Versión Sass
// Uso con Sass
.selector { @include full }
Tenga en cuenta que si el alto y el ancho no son iguales, el elemento no será circular sino oval.
Versión CSS
<!-- Version CSS -->
<div class="circle"><!-- Este elemento será circular --></div>
Versión Sass
// Uso con Sass
.selector { @include circle }
Importante: si usa la versión con CSS Grid puede saltarse esta sección.
En EDgrid la separación entre los ed-item se genera a través de padding laterales (la separación entre uno y el siguiente es dos veces el tamaño del padding, por defecto 15px).
Puede ocurrir que en algunos casos complejos para forzar la alineación requiera añadir o quitar los padding por defecto a cualquier elemento (no solo ed-container y ed-item).
Versión CSS
<!-- Version CSS -->
<div class="padding"><!-- Añade un padding si el elemento no lo tenia --></div>
<div class="padding-2"><!-- Añade un padding doble --></div>
<div class="padding-3"><!-- Añade un padding triple --></div>
<div class="ed-container no-padding"><!-- Elimina el padding de todos sus ed-item internos--></div>
<div class="ed-item no-padding"><!-- Elimina el padding de solo este ed-item--></div>
Versión Sass
// Uso con Sass
// el mixin padding() recibe un número como parámetro
// este número puede ser 0 para eliminar el padding
.selector1 { @include padding(3) }
// El mixin noPaddingContainer tiene efecto
// solo aplicado a un .ed-container y elimina
// el padding de sus ed-item hijos
.selector2 { @include noPaddingContainer }
EDgrid es una libreria CSS/Sass para construir layouts para web fácilmente.
EDgrid es un proyecto de EDteam usado en todos los proyectos de la empresa. Es Open Source (GPL2) y puede usarla y modificarla libremente en todos sus proyectos.
Si encuentra algun error o tiene sugerencias de mejoras, puede escribirlas en Github.
EDgrid es una libreria CSS/Sass para construir layouts para web fácilmente. En una hora ya lo estará usando en sus proyectos.
Creado por EDteam y usado en todos los proyectos de la empresa. Es Open Source (GPL2) y puede usarla y modificarla libremente en todos sus proyectos.
Si encuentra algun error o tiene sugerencias de mejoras, puede escribirlas en Github.
Puede usar EDgrid con Sass (recomendado) y CSS.
Para instalar la versión Sass puede utilizar npm:
npm install --save-dev ed-grid
También puede usar yarn:
yarn add ed-grid --dev
Posteriormente, impórtelo en su estructura de archivos Sass
@import "~ed-grid/ed-grid"
Descargue la última versión CSS de EDgrid e impórtela en su proyecto como cualquier otra hoja de estilos. También puede usar del CDN para importaciones rápidas.
<link href="https://unpkg.com/ed-grid@3.0.0/src/css/ed-grid.min.css" rel="stylesheet">
* Al usar EDgrid en su versión CSS no podrá personalizar la librería, utilizar el prototipado avanzado y compilar sólo el código necesario, entre otras opciones que sólo se pueden hacer con la versión de Sass
La versión 3 de EDgrid incluye la creación de layouts con CSS Grid, la que ofrece varias ventajas sobre los layouts con Flexbox.
Esta versión se basa en las siguientes reglas:
ed-grid. Los items pueden ser cualquier elemento hijo directo de ed-grid (a diferencia de la versión con flexbox que exigía tener un ed-item).gap para definir la separación entre tracks, lo que resuelve el problema de los contenedores anidados y los paddings (propio de layouts con floats y flexbox).En esta versión se usa ed-grid como contenedor y es en él donde debemos definir las columnas (es así como funciona CSS Grid).
Para definir las columnas use la nomenclatura breakpoint-grid-numero.
<div class="ed-grid s-grid-2 lg-grid-4 xl-grid-10">
<!-- Este contenedor tiene 2 columnas en tamaño s, 4 columnas en tamaño lg y 10 columnas en tamaño xl -->
</div>
Cualquier hijo directo de ed-grid es automáticamente un item del layout. Y automáticamente tomará una columna de su contenedor.
<!-- Layout de tres columnas donde cada card ocupa una columna.
No tiene que hacer nada en los items. Solo definir las columnas en el contenedor -->
<div class="ed-grid s-grid-3">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
Ejemplo:
Use la siguiente nomenclatura breakpoint-cols-numero Donde número es la cantidad de columnas.
Por ejemplo, para crear un layout de sidebar al 25% y contenido al 75% el marcado sería el siguiente:
<div class="ed-grid s-grid-4">
<div>1</div>
<div class="s-cols-3">2</div>
</div>
Ejemplo
Use la nomenclatura: breakpoint-x-numero para indicar en qué columna iniciará un item.
<div class="ed-grid s-grid-4">
<div class="s-cols-3 s-x-2">
Comienzo en la columna 2 y ocupo 3 columnas
</div>
</div>
Ejemplo:
Use la siguiente nomenclatura breakpoint-rows-numero Donde número es la cantidad de filas.
<div class="ed-grid rows-gap s-grid-2">
<div class="s-rows-2">1</div>
<div >2</div>
<div>3</div>
</div>
Ejemplo:
Use la nomenclatura: breakpoint-y-numero para indicar en qué columna iniciará un item.
<div class="ed-grid rows-gap s-grid-4">
<div class="s-rows-2">1</div>
<div class="">2</div>
<div class="s-y-2 s-x-2 s-cols-2">3</div>
<div>4</div>
<div class="s-rows-2">5</div>
</div>
Ejemplo:
Puesto que CSS Grid define la separación entre tracks internamente, puede anidar contenedores como desee, sin restricciones.
<div class="ed-grid lg-grid-3">
<div class="s-cols-2 ed-grid s-grid-3 rows-gap">
<div class="s-cols-3">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div>5</div>
</div>
Ejemplo:
De forma predeterminada las columnas tienen una separacion de 1rem en tamaños móviles (s,m) y 2rem en tamaños de escritorio (lg,xl). Si desea agregar una separación entre filas (igual a la de las columnas), agregue la clase rows-gap al contenedor.
<div class="ed-grid rows-gap s-grid-2 m-grid-4 lg-grid-6">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
Ejemplo:
Puede cambiar la separación para todos los ed-grid redefiniendo la variable $gap antes de importar EDgrid.
$gap: 1rem; // En tamaños de escritorio se multiplica por 2
@import "~ed-grid/ed-grid";
O puede cambiar la separación para un ed-grid especifico usando la nomenclatura breakpoint-gap-numero. El número va de 0 a 4 con separaciones de .5rem.
* Puede usar el numero 05 para crear separaciones de .25rem. Ejemplo: s-gap-05.
<div class="ed-grid rows-gap s-gap-05 m-gap-1 s-grid-2 m-grid-4 lg-grid-6">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="lg-cols-3">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
EDgrid es una librería para construir layouts. Puede construirlos con Flexbox o CSS Grid.
Para construir layouts con Flexbox y EDgrid debe definir contenedores con la clase ed-container e items con la clase ed-item. Con las siguientes reglas:
ed-item no puede ser huérfano. Siempre debe ser hijo de un ed-containered-container debe tener al menos un ed-item como hijo directo.ed-container y ed-item son contenedores para crear layout. No agregue contenido directamente en ellos.<!-- Bien -->
<div class="ed-container">
<div class="ed-item">
<article>
<p>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredor.
</p>
</article>
</div>
</div>
<!-- Mal -->
<div class="ed-container">
<article class="ed-item">
En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredor.
</article>
</div>
Los ed-container tienen un ancho predeterminado de 100% y un ancho máximo de 1200px. Así cuando la pantalla es mayor a esta medida, el ed-container queda fijo y se centra horizontalmente.
Si desea un ed-container que mida siempre el 100% de la pantalla agregue la clase full.
<div class="ed-container full">
<div class="ed-item"></div>
</div>
Si desea personalizar el ancho máximo del ed-container redefina la variable Sass $max-width antes de importar EDgrid.
$max-width: 1400px;
@import "~ed-grid/ed-grid";
Cada ed-item tiene 100% del ancho de su padre a menos que se especifique lo contrario (a través de clases). Las clases para definir el ancho son de dos tipos: porcentajes y fracciones.
La nomenclatura de clase es breakpoint-numero Donde número es cualquier número múltiplo de 5 entre 0 y 100. Así que la clase lg-75 significa que el elemento tendrá 75% del ancho de su padre a partir del breakpoint lg.
<div class="ed-container">
<div class="ed-container">
<div class="ed-item s-30 lg-50">1</div>
<div class="ed-item s-50 lg-25">2</div>
<div class="ed-item s-20 lg-25">3</div>
</div>
</div>
Si quiere dividir el ancho entre 3 o 6 necesitará fracciones. La nomenclatura es breakpoint-numerador-denominador. Por ejemplo: lg-1-3 significa un tercio de ancho (33.33%) a partir del breakpoint lg (1024px). Mientras que xl-2-3 significa dos tercios a partir del breakpoint xl (1440px).
<!-- Layout de tres columnas a partir de 1024px de pantalla -->
<div class="ed-container">
<div class="ed-item s-1-3">1</div>
<div class="ed-item s-1-3">2</div>
<div class="ed-item s-1-3">3</div>
</div>
Si necesita anidar elementos para crear layouts más complejos tenga en cuenta las siguientes reglas:
ed-container como hijo de un ed-itemed-container a un ed-item entonces ya podrá crear nuevos ed-item nietos.<!-- Bien -->
<div class="ed-container">
<div class="ed-item s-60">1</div>
<div class="ed-item s-40 ed-container">
<div class="ed-item s-50">2</div>
<div class="ed-item s-50">3</div>
</div>
</div>
<!-- Mal -->
<div class="ed-container">
<div class="ed-item s-1-3"></div>
<div class="ed-item s-2-3">
<div class="ed-container">
<div class="ed-item s-50"></div>
<div class="ed-item s-50"></div>
</div>
</div>
</div>
Si no desea usar las clases ed-container y ed-item puede definir las suyas. Simplemente redefina las variables $container y $item antes de importar EDgrid.
$container: row;
$item: column;
@import "~ed-grid/ed-grid";
Si no desea tocar el marcado HTML (o no tiene acceso a el por restricciones del proyecto) puede usar mixins de Sass para definir sus contenedores e items.
ed-container.ed-item($s,$m,$lg,$xl) Los parámetros definen el ancho en cada breakpoint:1/3.main-page {
@include ed-container
}
.sidebar {
@include ed-item(100,100,1/3)
}
.content {
@include ed-item(100,100,2/3)
}
EDgrid agrega clases para crear separaciones exteriores (margin) e interiores (padding) para crear layouts armoniosos y bien distribuidos.
Para seguir buenas prácticas, considere lo siguiente:
l-. *Además todos lmargin-bottom.margin-top se usa solamente en negativo para cancelar una separación verticalmargin-rightmargin-left se usa solo en negativo para cancelar una separación horizontal.En EDgrid existen tres tipos de secciones que se indican con las siguientes clases.
l-block Bloques pequeños como widgets, cards, separadores.l-section Sección grande de contenido.l-big-section Igual que el anterior pero cuando se quiere dar una separación mayor.Si en algun caso desea anular el espaciado de una seccion con la anterior. Use las siguientes clases:
cancel-l-block Cancela margin-bottom de hermano anterior l-blockcancel-l-section Cancela margin-bottom de hermano anterior l-sectioncancel-l-big-section Cancela margin-bottom de hermano anterior l-big-sectionEDgrid usa la variable CSS --vertical-block-space cuyo valor cambia según el breakpoint
:root {
--vertical-block-space : #{$l-unit * 2}; // 1rem
@include from(lg) {
--vertical-block-space : #{$l-unit * 4}; // 2rem
}
}
El código que crea las separaciones es el siguiente.
// Block
.l-block {
margin-bottom : var(--vertical-block-space); // 1rem mobile, 2rem desktop
}
.cancel-l-block {
margin-top : calc(var(--vertical-block-space) * -1);
}
// Section
.l-section {
margin-bottom : calc(var(--vertical-block-space) * 2); // 2rem mobile, 4rem desktop
}
.cancel-l-section {
margin-top : calc(var(--vertical-block-space) * -2);
}
// Big section
.l-big-section {
margin-bottom : calc(var(--vertical-block-space) * 4); // 4rem mobile, 8rem desktop
}
.cancel-l-big-section {
margin-top : calc(var(--vertical-block-space) * -4);
}
EDgrid incluye espaciado vertical armonioso entre contenido (parrafos, titulos, listas, etc). No tiene que hacer nada. Solo escribir su contenido.
:root {
--vertical-content-space : 1rem;
}
// Encabezados
h1, h2, h3, h4, h5, h6 {
margin-top : 0;
margin-bottom : var(--vertical-content-space);
}
h1 {
margin-bottom : calc(var(--vertical-content-space) * 1.5) !important;
}
La norma recomienda encerrar cada sección en una etiqueta section. Pero en la práctica es dificil conseguirlo siempre así que la presenciad e un titulo indica el cambio de sección y por eso se le agrega una separación vertical mayor con el hermano anterior.
:root {
--vertical-content-space : 1rem;
}
p,
video,
blockquote,
article,
section,
form,
figure,
iframe,
ul,
ol,
pre,
hr,
dl,
address {
margin-top : 0;
margin-bottom : var(--vertical-content-space);
+ h2 {
padding-top : calc(var(--vertical-content-space) * 1.5);
}
+ h3 {
padding-top : var(--vertical-content-space);
}
}
Use las clases de márgenes para separar elementos. La nomenclatura es la siguiente breakpoint-mr-numero y breakpoint-mb-numero Donde mr es margin-right y mb es margin-bottom.
El número va de 0 a 4 con separaciones de .5rem Por ejemplo lg-mb-0 significa margin-bottom:0 a partir del breakpoint lg. Y m-br-4 sinifica margin-right: 2rem a partir del breakpoint m.
* Puede usar el numero 05 para crear separaciones de .25rem. Ejemplo: s-mb-05.
<img alt="Logotipo de EDgrid" src="/assets/img/EDgrid-logo.svg" width="200">
<img alt="Logotipo de EDgrid" src="/assets/img/EDgrid-logo.svg" width="200">
Usando margenes
<img class="m-mr-2 s-mb-2" alt="Logotipo de EDgrid" src="/assets/img/EDgrid-logo.svg" width="200">
<img alt="Logotipo de EDgrid" src="/assets/img/EDgrid-logo.svg" width="200">
Con la misma nomenclatura puede crear márgenes superiores margin-top e izquierdos margin-left pero estos siempre serán negativos y debe usarlos para cancelar una separación con un hermano anterior.
<h1>Bienvenidos a EDteam</h1>
<p>Este es un subtítulo pero aparecerá muy abajo del título</p>
Ejemplo:
Este es un subtítulo pero aparecerá muy abajo del título
Usando márgenes negativos:
<h1>Bienvenidos a EDteam</h1>
<p class="s-mt-3">Este es un subtítulo con un margen superior negativo</p>
Ejemplo:
Este es un subtítulo con un margen superior negativo
Los paddings agregan una separación interna y tienen la siguiente nomenclatura de clases: breakpoint-p[direction]-numero
Donde direction puede ser t (top), r (right), b (bottom), l (left). Por ejemplo: xl-pb-4. Al igual que en margin, los números van de 0 a 4 indicando separaciones de .5rem.
breakpoint-py-numero).breakpoint-px-numerobreakpoint-pxy-numero* Puede usar el numero 05 para crear paddings de .25rem. Ejemplo: s-py-05.
EDgrid incluye mixins para crear mediaqueries fácilmente:
from($bp)to($bp)fromTo($from,$to)Los tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid s,m,lg,xl o números especificados en px, em o rem.
Ejemplos:
// Ejemplo mixin from()
.from {
color: red;
@include from(m) {
color: blue;
}
@include from(700px) {
color: red
}
}
// Ejemplo mixin to()
.to {
display: flex;
@include to(l) {
display: block
}
}
// Ejemplo mixin from-to()
.from-to {
display: block;
@include from-to(m,800px) {
display: none
}
}
Compila a:
// From
.from{
color:red;
}
@media screen and (min-width:40em){
.from{
color:blue;
}
}
@media screen and (min-width:700px){
.from{
color:red;
}
}
// To
.to {
display:flex;
}
@media screen and (max-width:64em){
.to {
display:block;
}
}
// From to
.from-to {
display:block;
}
@media screen and (min-width:40em) and (max-width:800px){
.from-to {
display:none;
}
}
Si los parámetros pasados a estos mixins no son válidos EDgrid lanzará un mensaje en terminal indicando el error.
Un menú responsive es un buen ejemplo de cómo podemos integrar EDgrid con código ajeno a la librería.
Toda la estructura y distribución se harán desde el marcado con la nomenclatura que ya conocemos y a la vez se usarán los mixins que otorga la librería para los estilos en Sass.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales convallis dui quis elementum. Aliquam erat neque, suscipit vitae nisi posuere, eleifend luctus enim.
Praesent euismod rutrum dui, suscipit vulputate nisl tincidunt et. Aenean commodo ac ex id malesuada. Morbi luctus tempus venenatis. Integer non ante at diam cursus mattis sit amet a augue.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempus justo sit amet velit porttitor pretium. Nam metus dolor, semper vitae dui ac, mattis varius nisi..
<header class="ed-header s-bg-grey s-py-2">
<div class="ed-grid lg-grid-5">
<!-- Logo -->
<div class="s-cross-center s-main-center lg-main-start">
<img class="logo" src="https://ed.team/static/images/logo.svg">
</div>
<nav class="nav lg-cols-4 s-cross-center ed-grid full">
<!-- Menú de navegación -->
<ul class="menu s-main-distribute lg-to-right s-mb-0 s-pl-0 s-py-1">
<!-- Item de menú. Contiene link e ícono -->
<li class="lg-mr-3">
<a class="link s-column s-cross-center active" href="#">
<!-- El ícono sólo se mostrará en la versión móvil -->
<svg class="icon to-lg s-mb-0">
<use href="#home"></use>
</svg>
<span>Inicio</span>
</a>
</li>
<li class="lg-mr-3">
<a class="link s-column s-cross-center" href="#">
<svg class="icon to-lg s-mb-0">
<use href="#studies"></use>
</svg>
<span>Estudios</span>
</a>
</li>
<li class="lg-mr-3">
<a class="link s-column s-cross-center" href="#">
<svg class="icon to-lg s-mb-0">
<use href="#courses"></use>
</svg>
<span>Cursos</span>
</a>
</li>
<li>
<a class="link s-column s-cross-center" href="#">
<svg class="icon to-lg s-mb-0">
<use href="#notes"></use>
</svg>
<span>Notas</span>
</a>
</li>
</ul>
</nav>
</div>
</header>
La mayoría del siguiente código es para estética del menú.
// Posicionamiento del header
.ed-header {
position : fixed;
top : 0;
width : 100%;
z-index : 100;
.logo { height : 2rem }
// Posicionamiento del nav
// Utilizamos el mixin to() de EDgrid para que sólo se aplique en móvil
.nav {
@include to(lg) {
position : fixed;
left : 0;
bottom : 0;
background : black;
}
}
.menu { list-style : none }
// Colores de links del menú
.link {
color : lightgrey;
&.active { color : cornflowerblue }
@include from(lg) { color : grey }
}
// Estilos para los íconos
.icon {
--size : 1.5rem;
width : var(--size);
height : var(--size);
fill : currentColor;
}
}
Este componente utiliza íconos para su versión móvil. Puede crear un archivo SVG donde guarde todo el siguiente código o ponerlo al lado de la estructura del header en el HTML.
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="notes" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24"></rect>
<path d="M19,3H4.99C3.89,3,3,3.9,3,5l0.01,14c0,1.1,0.89,2,1.99,2h10l6-6V5C21,3.9,20.1,3,19,3z M7,8h10v2H7V8z M12,14H7v-2h5V14z M14,19.5V14h5.5L14,19.5z"></path>
</symbol>
<symbol id="studies" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"></path>
</symbol>
<symbol id="courses" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none"></path>
<path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"></path>
</symbol>
<symbol id="home" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
</symbol>
</svg>
Con EDgrid puede crear menus responsive fácilmente. Basta con crear una lista ul y los enlaces dentro de cada li.
Añada la clase ed-menu al ul de nivel superior.
Añada la clase n-horizontal siendo n el breakpoint (s,m,l,xl) desde el cual el menú será horizontal
Añada alguna de las tres clases para cambiar el estilo: default nav-bar button-bar
<ul class="ed-menu l-horizontal button-bar">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
Si va a usar Sass, el marcado HTML debe ser el mismo.
Incluya el mixin edMenu($bp,$style) al ul de nivel superior. Los parámetros son:
$bp breakpoint a partir del cual el menu será horizontal. Puede ser un breakpoint del core de ed-grid (s,m,l,xl) o un breakpoint válido en px, em o rem.$style (opcional) puede ser default, navBar o buttonBar.main-menu {
@include edMenu(l,navBar)
}
Este componente no está terminado y estos son algunos de los pendientes
El modo dev es una característica de EDgrid que nos permite saber el breakpoint actual y los componentes del layout (ed-grid, ed-container y ed-item).
Al activarlo el navegador muestra el layout de la siguiente manera:
ed-container y ed-grid tienen un borde rojo y en la parte superior una franja roja que imprime sus clases html.ed-item e hijos directos de ed-grid se colorean de azul y a su vez imprimen sus clases html en una franja azul.Basta con añadirle la clase dev al elemento body
<body class="dev"></body>
Redefinir la variable $dev a true antes de importar ed-grid
$dev: true;
@import 'path/ed-grid/ed-grid';
Si sólo quieres inspeccionar un elemento a la vez y no toda la página, puedes usar el modo desarrollo con hover, donde sólo funcionará con ed-grid, ed-container y ed-item que tengan el estado de hover.
Basta con añadirle la clase dev-hover al elemento body
<body class="dev-hover"></body>
Redefinir la variable $dev-hover a true antes de importar ed-grid (no es necesario redifinir también la variable $dev).
$dev-hover: true;
@import 'path/ed-grid/ed-grid';
Se conoce como offset al movimiento de un elemento respecto a la posición que se supone deberia tener. En ed-grid, offset no es más que un margin-left. La única ventaja de usar offsets con ed-grid es no escribir a mano las media queries.
Basta añadir clases del formato bp-offset-n donde bp es un breakpoint válido de ed-grid (s,m,l,xl) y n un múltiplo de 5 o una fracción según lo indicado en el flujo de trabajo recomendado.
<div class="selector s-offset-2-3 m-offset-50 l-offset-10"></div>
Incluya el mixin offset($s,$m,$l$xl) donde cada parámetro es el offset en cada breakpoint de ed-grid. No hay restricciones a múltiplos de 5, incluso puede pasar fracciones.
Tenga en cuenta que solo es obligatorio el primer parámetro.
.selector {
@include offset(2/3,50,10);
}
Compila a:
.selector{
margin-left:66.66667%;
}
@media screen and (min-width:40em){
.selector{
margin-left:50%;
}
}
@media screen and (min-width:64em){
.selector{
margin-left:10%;
}
}
EDgrid es altamente personalizable pues sus variables de configuración pueden ser sobreescritas. Para hacerlo, debe redefinirlas antes de importar EDgrid.
// 1. Personalice sus variables
$prototype: false;
$dev: true;
// 2. Importe EDgrid
@import "~ed-grid/ed-grid";
Tenga en cuenta que no siempre querrá personalizar EDgrid y le bastará con solo importar la librería.
A continuación se muestran las variables que puede redefinir, con su valor por defecto y la explicación de su función.
// Breakpoints
$breakpoints : (
s : 0,
m : 640px,
lg : 1024px,
xl : 1440px
);
$prototype : true; // Activa los estilos de prototipado
$dev : false; // Activa los estilos para debuggin
$dev-hover : false; // Estilos de debuggi sólo en hover
$max-width : 1200px; // Ancho máximo de los contenedores ed-container y ed-grid
$l-unit : .5rem; // Unidad básica de layout (para separaciones verticales, margin y padding)
$gap : $l-unit * 4; // Separación entre columnas (2rem)
$fractions : 3 6; // Fracciones para crear columnas (core flexbox)
$container : ed-container; // Clase para el contenedor (core flexbox)
$item : ed-item; // Clase para los items (core flexbox)
$grid-container : ed-grid; // Clase para el contenedor (core grid)
$max-grid-columns : 12; // Máximo número de columnas (core css grid)
$legacy : false; // Soporte para versiones antiguas
// CSS Variables
:root {
// Variables para prototipar
--color : #007BDF; // Color base (azul EDteam)
--color-alt : #006DC6; // Color alterno (azul EDteam alterno)
--border-color : #DFE0E0; // Color para bordes (gris suave)
--light-bg : #F0F0F0; // Color gris para fondos
--border-radius : #{$l-unit * 0.5}; // .25rem
// layout
--vertical-block-space : #{$l-unit * 2}; // 1rem
--vertical-content-space : #{$l-unit * 2}; // 1rem
--gap : #{$l-unit * 2}; // 1rem
--max-width : #{$max-width};
@include from(lg) {
--vertical-block-space : #{$l-unit * 4};
--gap : #{$l-unit * 4}; // 2rem
}
}
Ya vio qué es EDgrid y todo lo que es capaz de hacer, pero tal vez no sea suficiente en ciertos casos. ¿Qué tal si quiere utilizar otras propiedades que no tiene la librería? ¿O no quiere estar escribiendo CSS para cada componente y prefiere usar la numenclaruta de clases de EDgrid? Aquí es donde el prototipado avanzado entra en acción.
Utiliza el core de EDgrid para convetir cualquier propiedad en las nomenclaturas de la librería breakpoint-propiedad. Cabe recalcar que esta función sólo está disponible para la versión de EDgrid Sass.
Para esto haremos uso del mixin prototype(), el cual podrá utilizarlo en cualquier lugar de su proyecto siempre y cuando EDgrid se haya importado antes. La sintaxis es la siguiente:
@include prototype($names, $property, $value);
/*
* $names - Lista de nombres que usaremos para nombrar nuestras clases.
* Recorremos una lista por si queremos múltiples selectores con el mismo valor
*
* $property, $value - Propiedad CSS con su respectivo valor
*/
Ejemplo
@include prototype('cursor-pointer', cursor, pointer);
El resultado en CSS sería:
.s-cursor-pointer {
cursor: pointer;
}
@media screen and (min-width: 640px)
.m-cursor-pointer {
cursor: pointer;
}
}
@media screen and (min-width: 1024px) {
.lg-cursor-pointer {
cursor: pointer;
}
}
@media screen and (min-width: 1440px) {
.xl-cursor-pointer {
cursor: pointer;
}
}
Si queremos múltiples clases con el mismo valor debemos pasar $names como si fuera una lista.
@include prototype(('color-red', 'red-color'), cursor, pointer);
<!-- Ambas clases funcionan -->
<p class="s-color-red">Este es un párrafo de color rojo</p>
<p class="s-red-color">Y éste también lo está</p>
Si quiere crear selectores más avanzados como juntar una clase con la nomenclatura que está creando o usar selectores como +, >, ~ entre muchos otros, no podrá hacerlo desde $names,
si no que deberá pasar un cuarto parámetro. Un ejemplo de esto es el componente breakpoint-gap-numero de EDgrid, el cuál solo funciona si el contenedor tiene la clase ed-grid.
@include prototype($names, $property, $value, $concat);
Ejemplos
// El elemento también tiene la clase .background
// .background.s-red
@include prototype('red', color, red, '.background');
// Algún elemento ancestro tiene la clase .background (nótese el espacio al final)
// .background .s-red
@include prototype('red', color, red, '.background ');
// Hijos directos de un elemento con la clase background
// .background > .s-red
@include prototype('red', color, red, '.background > ');
El modo debug le permite ver en la terminal el CSS resultado (selector, propiedad, valor y mediaquery). Para activarlo debemos pasar un quinto parámetro en true.
@include prototype($names, $property, $value, $concat, $debug);
Ejemplo
@include prototype('red', color, red, '.background > ', true);
// Introduzca un string vacío si no necesita el cuarto parámetro
// Puede borrarlo una vez que desactive el debug
@include prototype('red', color, red, '', true);
EDgrid le permite hacer prototipos rápidos con poco esfuerzo. La opción de prototipado viene activada por defecto en el proyecto, por lo que no necesita hacer ajustes extras para empezar a usarla.
Agrega la clase button a un elemento. Si necesita darle márgenes, centrarlo, etc, use las clases que EDgrid proporciona.
breakpoint-border para agregar un borde a los cuatro lados.breakpoint-border-none para anular el borde en los cuatro lados.breakpoint-border-[top|right|bottom|left] para agregar un borde solo en el lado seleccionado.breakpoint-border-[top|right|bottom|left]-none para anular el borde en el lado seleccionado.<div class="s-border lg-30 lg-to-center s-pxy-2">
<h3 class="s-border-bottom">Soy una tarjeta</h3>
<p class="s-mb-0">Yo soy el contenido de esta tarjeta</p>
</div>
Yo soy el contenido de esta tarjeta
breakpoint-radius para asignar un border-radius a las cuatro esquinas.breakpoint-radius-none para anular el border-radius de las cuatro esquinasbreakpoint-radius-[tl|tr|br|bl] para agregar border-radius en top-left|top-right|bottom-right|bottom-left respectivamentebreakpoint-radius-[tl|tr|br|bl]-none para anular el border-radius en top-left|top-right|bottom-right|bottom-left respectivamente<div class="s-radius s-border lg-30 lg-to-center s-pxy-2">
<h3 class="s-border-bottom">Soy una tarjeta</h3>
<p class="s-mb-0">Yo soy el contenido de esta tarjeta</p>
</div>
Yo soy el contenido de esta tarjeta
Puede usar las clases breakpoint-bg-[grey|blue] Para asignarle un fondo a un elemento. Así podemos crear componentes muy rápido. Por ejemplo, tarjetas:
<div class="lg-50 lg-to-center s-bg-grey s-radius s-pxy-2 l-block">
<p>EDgrid es una libreria construida con Sass (y con versión CSS)
para Responsive Web Design (RWD). Es muy ligero, personalizable
y te permite prototipar y crear layouts en muy poco tiempo
sin conflictos con tu proyecto.</p>
<div class="button">Empezar con EDgrid</div>
</div>
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
<div class="lg-50 lg-to-center s-border s-radius">
<p class="s-pxy-2 s-mb-0">EDgrid es una libreria construida con Sass
(y con versión CSS) para Responsive Web Design (RWD). Es muy ligero,
personalizable y te permite prototipar y crear layouts en muy poco
tiempo sin conflictos con tu proyecto.</p>
<div class="s-bg-grey s-pxy-2">
<div class="button">Empezar con EDgrid</div>
</div>
</div>
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
breakpoint-shadow para aplicar sombras en los cuatro lados.breakpoint-shadow-[top|right|bottom|left] para aplicar sombras en los lados seleccionadosbreakpoint-shadow-none para anular las sombras en los cuatro lados.<img class="s-shadow s-block-center" src="/img/tioalexys.jpg">
<div class="s-shadow-bottom lg-50 lg-to-center s-border s-radius">
<p class="s-pxy-2 s-mb-0">EDgrid es una libreria construida con Sass
(y con versión CSS) para Responsive Web Design (RWD). Es muy ligero,
personalizable y te permite prototipar y crear layouts en muy poco
tiempo sin conflictos con tu proyecto.</p>
<div class="s-bg-grey s-pxy-2">
<div class="button">Empezar con EDgrid</div>
</div>
</div>
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
Con los ratios puede obtener elementos de un proporcion de ancho y alto definidos. Por ejemplo 3 x 1 (el triple de ancho que de alto). Tenga en cuenta que por limitaciones de css los elementos con ratio siempre tienen el 100% del ancho de su contenedor.
Use las clases breakpoint-ratio-x-y donde x y y son numeros enteros del 1 al 4. x representa el ancho y y el alto.
<div class="ed-grid lg-grid-3 lg-60 lg-to-center s-pxy-1 s-border s-radius s-shadow-bottom">
<div class="s-ratio-16-9 lg-ratio-2-3 s-bg-blue s-mb-2 lg-mb-0"></div>
<div class="lg-cols-2">
<h3>Bienvenido a a EDgrid</h3>
<p>EDgrid es una libreria construida con Sass (y con versión CSS)
para Responsive Web Design (RWD). Es muy ligero, personalizable.</p>
<div class="button">Comenzar con EDgrid</div>
</div>
</div>
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable.
Además EDgrid incluye las clases breakpoint-ratio-16-9, breakpoint-ratio-9-16 y breakpoint-ratio-21-9 Ya que son proporciones comunes de elementos multimedia.
Puede usar las clases de ratios para contener imagenes evitando que se desborden o se deformen. Solo agregue la clase img-container.
<div class="ed-grid s-grid-2 m-grid-3 lg-grid-4 s-cross-center">
<div class="s-ratio-4-3 img-container">
<img src="https://cocha2018.ed.team/assets/img/banner-edcamp.jpg">
</div>
<div class="s-ratio-9-16 img-container">
<img src="https://cocha2018.ed.team/assets/img/banner-edcamp.jpg">
</div>
<div class="circle">
<img src="https://cocha2018.ed.team/assets/img/banner-edcamp.jpg">
</div>
<div class="s-ratio-16-9 img-container">
<img src="https://cocha2018.ed.team/assets/img/banner-edcamp.jpg">
</div>
</div>
La imagen es la misma en todos los casos:
circle para obtener un círculo perfecto sin usar clases de ratio. Si va a usarlo para contener una imagen, agregué tambien la clase img-container.Si va a trabajar con Sass, tenga en cuenta que como se explicó aquí, EDgrid genera dos grupos de código css:
cssCore Clases utilitarias no recomendadas si va a trabajar con Sass (desactivado por defecto para Sass)cssHelpers Clases utilitarias recomendadas si va a trabajar con Sass (activado por defecto para Sass, puede desactivarlo si desea)Si es un usuario avanzado puede activar o desactivar estos componentes redefiniendo las variables $cssCore y $cssHelpers antes de importar EDgrid. Estas variables son booleans.
Por ejemplo, si desea construir todo su layout con Sass, sin usar clases en HTML, puede desactivar ambos:
$cssCore: false;
$cssHelpers: false;
@import "path/ed-grid/ed-grid"
Sin embargo, si usa la configuración recomendada, importe EDgrid sin preocuparse de estos valores.
@import "~ed-grid/ed-grid";
Los componenentes skeleton son una vista previa del contenido que se muestra antes de que se carguen los datos para reducir la frustración del usuario con los tiempos de cargas lentos en un sitio web. Una vez que terminan de cargar, el skeleton desaparece.
En sí no existe un componente único para los skeleton, porque todo dependerá de la UI que tengan en su proyecto, pero eso no es problema ya que con el prototipado usted podrá recrear la gran mayoría de ésta.
Diseña, estructura y administra bases de datos SQL y crea un sistema de facturación
<article class="s-shadow-bottom">
<div class="s-bg-grey s-ratio-16-9 img-container s-radius-tl s-radius-tr"></div>
<div class="s-bg-white s-pxy-2">
<div class="s-bg-grey s-py-2 s-mb-2"></div>
<div class="s-bg-grey s-py-1 s-mb-1"></div>
<div class="s-bg-grey s-py-1 s-70"></div>
</div>
<footer class="s-py-4 s-bg-grey">
<div class="s-py-1"></div>
</footer>
</article>
EDgrid le permite insertar videos responsive con la proporcion 16:9 en cualquier breakpoint.
El video siempre se expandirá al 100% del ancho de su contenedor.
Añada la clase ed-video al contenedor de su video (que puede ser un iframe elemento video o cualquier elemento con la clase .video)
<div class="ed-video">
<iframe src="https://www.youtube.com/embed/cd549lZtPEU"></iframe>
</div>
El componente visibilidad permite definir los breakpoints en los que un elemento se mostrará y los breakpoints en los que se ocultará.
Use las clases from-breakpoint o to-breakpoint donde breakpoint es un breakpoint válido de EDgrid (s,m,l,xl)
from-lg hará al elemento visible a partir de 1024px e invisible por debajo de esa medida.
to-xl Hará al elemento visible por debajo de 1440px e invisible por encima de él.
En la versión Sass cuenta con cuatro mixins que reciben como parámetro un breakpoint del core de ed-grid ( s,m,l,xl) o uno en px, em o rem.
showFrom($bp) Muestra el elemento solo por encima del breakpoint especificado en el parámetro.showTo($bp) Muestra el elemento solo por debajo del breakpoint especificado en el parámetro.hideFrom($bp) Oculta el elemento por encima del breakpoint especificado en el parámetro.hideTo($bp) Oculta el elemento por debajo del breakpoint especificado en el parámetro.Ejemplo
.menu-movil {
@include hideFrom(lg)
}
.menu-desktop {
@include showFrom(xl)
}
Compila a
@media screen and (min-width:1024px){
.menu-movil{
display:none;
}
}
@media screen and (max-width:1440px){
.menu-desktop{
display:none;
}
}
EDgrid implementa un sistema de diseño flexible y personalizable para construir layouts y componentes responsive a la velocidad de la luz ⚡
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
No añade botones, tipografías, colores ni otro estilo visual. Es layout puro para maquetar que no genera conflictos. Además EDgrid en su versión Sass compila solo el código necesario sin css extra.
Completamente gratuito y de código abierto (GPL2). Puede usarlo en proyectos comerciales, descargarlo y estudiar el código y crear sus propias versiones derivadas sin pagar una licencia.
EDgrid usa las características más modernas de CSS: Flexbox y Grid. Además incluye fallbacks para Grid en navegadores que todavía no lo soporten.
¿Cansado de las 12 columnas? Con EDgrid puedes crear layouts con completa libertad sin amarrarte a usar siempre doce columnas.
El modo dev se activa con una sola línea de código y te muestra la construcción del layout por debajo del capó. Así podrás corregir problemas con facilidad.
EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
``` Ejemplo:EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
## Ancho de los bloques Use las clases `breakpoint-numero` donde `número` es un múltiplo de 5 desde 0 hasta 95. Asi que la clase `m-85` significa que el elemento tendrá 85% de ancho (de su contenedor) a partir de 640px. Combine estas clases con las de alineación para crear layouts avanzados. ```htmlEDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
``` Ejemplo:EDgrid es una libreria construida con Sass (y con versión CSS) para Responsive Web Design (RWD). Es muy ligero, personalizable y te permite prototipar y crear layouts en muy poco tiempo sin conflictos con tu proyecto.
## Diferencia entre bloque y contenido Comprender la diferencia entre estos dos conceptos le ahorrará dolores de cabeza y sufrimiento. Se considera contenido a todo elemento inline y bloque a todo elemento de bloque (en la definición de HTML). Los elementos inline son mostrados por el navegador uno al lado del otro y con saltos de línea (cuando se agota el ancho). Los elementos de bloque fuerzan un salto de línea (salvo que lo modifiques con CSS). Por ejemplo, un párrafo `` es un bloque, pero el texto dentro de él es contenido. Así que debe preguntarse, ¿quiero todo el bloque de párrafo a la derecha o solo quiero el texto alineado a la derecha? ```htmlEste es un párrafo cuyo texto se ha alineado a la derecha
``` Ejemplo:Este es un párrafo cuyo texto se ha alineado a la derecha
```htmlEste es un párrafo alineado a la derecha (como bloque)
``` Ejemplo:Este es un párrafo alineado a la derecha (como bloque)
```html
Este es un párrafo alineado al centro como bloque
y con el contenido alineado a la derecha.
Este es un párrafo alineado al centro como bloque
y con el contenido alineado a la derecha.