Pequeño marco de CSS responsive-Strawberry. CSS

Vista prévia

Descripción

Sin embargo, otro pequeño Framework CSS que ayuda a los desarrolladores y principiantes a crear rápidamente diseños de rejilla anidados totalmente responsivos usando CSS < a href = "https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target = "_ blank" rel = "noopener" > Flexbox Modelo.

Funcionamiento

Incluya la versión minimizada de Strawberry. CSS desde una red CDN.

<link rel="stylesheet" href="https://unpkg.com/strawberry-css/dist/strawberry.min.css">

El ejemplo de HTML para crear un sistema de cuadrícula anidada para su aplicación web moderna.

<div class="wrapper sb-flex-row sb-wrap sb-ai-center sb-jc-space-ad sb-items-20-nogs sb-n-flex-col sb-n-ai-center">

<div class="item">



<img src="pic.png" alt="pic">



<span>1</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>2</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>3</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>4</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>5</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>6</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>7</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>8</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>9</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>10</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>11</span>

</div>

<div class="item">



<img src="pic.png" alt="pic">



<span>12</span>

</div>
</div>

Clases CSS disponibles.

• SB-Flex-Row : Flex-dirección: Row;
• SB-Flex-Rev-Row : Flex-dirección: Row-Reverse;
• SB-Flex-col : Flex-dirección: columna;
• SB-Flex-Rev-col: dflex-Direction: columna-Reverse;
• SB-Flex-inline: pantalla: inline-Flex;
• SB-Wrap : Flex-Wrap: Wrap;
• SB-Rev-Wrap : flexión-envoltura: envolver-Reverse;
• SB-NoWrap : flexión-envoltura: NoWrap;
• SB-JC-Flex-Start : justificar-contenido: Flex-Start;
• SB-JC-Flex-end : justificar-contenido: Flex-end;
• SB-JC-centro : justificar-contenido: Centro;
• SB-JC-Space-BN : justificar-contenido: espacio-entre;
• SB-JC-Space-ad : justificar-contenido: espacio-alrededor;
• SB-JC- inicial: justificar-contenido: inicial;
• SB-JC-inherit : justificar-contenido: Flex-inherit;
• SB-AI-Stretch : alinear elementos: estirar;
• SB-AI-centro : alinear-elementos: Centro;
• SB-AI-Flex-Start : alinear-elementos: Flex-Start;
• SB-AI-Flex-end : alinear-elementos: Flex-end;
• SB-AI-línea de base : alinear-elementos: línea base;
• SB-AI- inicial: alinear-elementos: inicial;
• SB-AI-inherit : alinear-elementos: inherit;
• SB-AC-Stretch : alineación-contenido: Stretch;
• SB-AC-centro : alinear-contenido: Centro;
• SB-AC-Flex-Start : alinear-contenido: Flex-Start;
• SB-AC-Flex-end : alinear-contenido: Flex-end;
• SB-AC-Space-BN : alinear-contenido: espacio-entre;
• SB-AC-Space-ad : alinear-contenido: espacio-alrededor
• SB-AC- inicial: alinear-contenido: inicial;
• SB-AC-inherit : alinear-contenido: inherit;
• SB-items-100 : Flex: 1 1 100%;
• SB-items-90 : Flex: 1 1 90%
• SB-items-80 : Flex: 1 1 80%;
• SB-items-70 : Flex: 1 1 70%;
• SB-items-60 : Flex: 1 1 60%;
• SB-items-50 : Flex: 1 1 50%;
• SB-items-40 : Flex: 1 1 40%;
• SB-artículos-tercera : Flex: 1 1 33,3333%;
• SB-items-30 : Flex: 1 1 30%;
• SB-ítems-trimestre : Flex: 1 1 25%;
• SB-items-20 : Flex: 1 1 20%;
• SB-items-sexto : Flex: 1 1 16,6666%;
• SB-items-séptimo : Flex: 1 1 14,2857%;
• SB-artículos-octavo : Flex: 1 1 12,50%;
• SB-items-noveno : Flex: 1 1 11,1111%;
• SB-items-10 : Flex: 1 1 10%;
• SB-items-100-Nog : Flex: 0 1 100%;
• SB-items-90-Nog : Flex: 0 1 90%
• SB-items-80-Nog : Flex: 0 1 80%;
• SB-items-70-Nog : Flex: 0 1 70%;
• SB-items-60-Nog : Flex: 0 1 60%;
• SB-items-50-Nog : Flex: 0 1 50%;
• SB-items-40-Nog : Flex: 0 1 40%;
• SB-ítems-tercera-Nog : Flex: 0 1 33,3333%;
• SB-items-30-Nog : Flex: 0 1 30%;
• SB-ítems-trimestre-Nog : Flex: 0 1 25%;
• SB-items-20-Nog : Flex: 0 1 20%;
• SB-items-sexto-Nog : Flex: 0 1 16,6666%;
• SB-items-séptimo-Nog : Flex: 0 1 14,2857%;
• SB-items-octavo-Nog : Flex: 0 1 12,50%;
• SB-items-noveno-Nog : Flex: 0 1 11,1111%;
• SB-items-10-Nog : Flex: 0 1 10%;
• SB-items-100-nos : Flex: 1 0 100%;
• SB-items-90-nos : Flex: 1 0 90%
• SB-items-80-nos : Flex: 1 0 80%;
• SB-items-70-nos : Flex: 1 0 70%;
• SB-items-60-nos : Flex: 1 0 60%;
• SB-items-50-nos : Flex: 1 0 50%;
• SB-items-40-nos : Flex: 1 0 40%;
• SB-items-tercera-nos : Flex: 1 0 33,3333%;
• SB-items-30-nos : Flex: 1 0 30%;
• SB-items-trimestre-nos : Flex: 1 0 25%;
• SB-items-20-nos : Flex: 1 0 20%;
• SB-items-sexto-nos : Flex: 1 0 16,6666%;
• SB-items-séptimo-nos : Flex: 1 0 14,2857%;
• SB-items-octavo-nos : Flex: 1 0 12,50%;
• SB-items-noveno-nos : Flex: 1 0 11,1111%;
• SB-items-10-nos : Flex: 1 0 10%;
• SB-items-100-nogs : Flex: 0 0 100%;
• SB-items-90-nogs : Flex: 0 0 90%
• SB-items-80-nogs : Flex: 0 0 80%;
• SB-items-70-nogs : Flex: 0 0 70%;
• SB-items-60-nogs : Flex: 0 0 60%;
• SB-items-50-nogs : Flex: 0 0 50%;
• SB-items-40-nogs : Flex: 0 0 40%;
• SB-ítems-tercera-nogs : Flex: 0 0 33,3333%;
• SB-items-30-nogs : Flex: 0 0 30%;
• SB-ítems-Quarter-nogs : Flex: 0 0 25%;
• SB-items-20-nogs : Flex: 0 0 20%;
• SB-items-sexto-nogs : Flex: 0 0 16,6666%;
• SB-items-séptimo-nogs : Flex: 0 0 14,2857%;
• SB-items-octavo-nogs : Flex: 0 0 12,50%;
• SB-items-noveno-nogs : Flex: 0 0 11,1111%;
• SB-items-10-nogs : Flex: 0 0 10%;

Modificadores disponibles:

• -l : 1000 < = ancho;
• -m : 600 < = ancho < = 999;
• -s : width < = 599;

<div class="sb-flex-rev-row sb-wrap-s sb-wrap-m sb-nowrap-l">
</div>