es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Usando Bootstrap 3 con Sass

Bootstrap viene con Rejillas receptivas y algunos componentes web comunes que podemos recoger para crear rápidamente un sitio web receptivo . Si ha visto nuestras publicaciones anteriores en Bootstrap, probablemente sepa que los estilos de Bootstrap están compuestos por LESS.

Mientras que LESS se ha vuelto más poderoso con las nuevas características introducidas en la versión 1.5, algunos de ustedes estarán más familiarizados con Sass / SCSS. También puede haber algunas características en Sass que no puedes vivir sin ellas, pero no están presentes en LESS (aún). Si quieres trabajar en Boostrap y con Sass, gracias a Thomas McDonald, puedes hacerlo porque Bootstrap ha sido portado a Sass / SCSS .

Instalación

Hay algunas formas de comenzar a usar Bootstrap + Sass . En primer lugar, dado que se ha incluido como una gema Ruby, puede instalarlo a través de Terminal con la siguiente línea de comando:

 joya instalar bootstrap-sass 

También puede usarlo junto con Compass con este comando a continuación. Es lo mismo que la forma en que instalamos la Fundación Zurb. Sin embargo, tenga en cuenta que de esta forma solo se incluirán las variables _variables.less que contienen variables de Bootstrap y styles.less en las que coloca sus propias reglas de estilo.

 brújula crea mi-nuevo-proyecto -r bootstrap-sass --usando bootstrap 

Alternativamente, simplemente puede descargarlo desde el repositorio de Github.

Qué hay de nuevo en Bootstrap 3

Aquí hay algunas características nuevas que se encuentran en Bootstrap 3.

Diseño plano

El cambio que puede ver de inmediato en la nueva versión, Bootstrap 3, es que ahora abarca el diseño plano. Los degradados y las sombras que encontramos en los componentes de la versión anterior ya no están.

Cuadrícula en Bootstrap 3

Bootstrap también presenta un conjunto de nuevas clases y nuevas construcciones de grillas. En la versión 3, existen grillas grandes, medianas, pequeñas y extrapequeñas para adaptarse a diferentes tamaños de ventanas. Veamos el siguiente ejemplo de HTML:

Columna izquierda

Columna media

Columna derecha

Tenemos tres columnas. Cada columna tiene un ancho igual cuando se ve en un tamaño de ventana grande (en una pantalla de escritorio u orientación horizontal en la tableta). El tamaño se aplica con la clase col-md-4 .

Luego, cuando el tamaño de la pantalla se col-sm-*, la división del ancho de la columna se ajustará con la clase col-sm-*, de modo que el ancho de la columna pueda permanecer en la proporción correcta en lugar de simplemente apilarse, como en la versión anterior de Bootstrap.

Nuevos componentes

También se agregaron algunos Componentes nuevos en la versión 3. Esto incluye Buscapersonas (usado para construir el tipo de navegación Siguiente y Anterior), Grupo de Lista, Paneles y Encabezado de Página .

Utilizando funciones Sass

Técnicamente, podemos agregar clases Bootstrap a los elementos HTML para hacer el diseño del sitio web, como lo hicimos en el ejemplo anterior. Pero, al usar CSS Preprocesadores, como Sass, podemos utilizar algunas de las funciones para lograr una estructura de HTML más limpia y semántica en lugar de estar llenos de nombres de clase sin sentido.

Dado el ejemplo anterior, podemos cambiar la estructura y los nombres de las clases a algo como esto:

Este es el contenido.

Esta es la barra lateral.

Esta es la navegación.

Dentro de la hoja de estilo, podemos usar la directiva Sass @extend para construir el diseño. Usar @extend los selectores que comparten las mismas reglas de estilo.

 .main-area {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; } 

Alternativamente, también puede usar Sass @include que copiará e incluirá las reglas de estilo de mixins en nuestros selectores de clase.

 .main-area {@include make-row; } .content {@include make-xs-column (6); @include make-sm-column (6); } .sidebar {@include make-xs-column (4); @include make-sm-column (4); } .side-nav {@include make-xs-column (2); @include make-sm-column (2); } .column {@include make-md-column (4); } 

Ahora, visualícelo en el navegador y obtendrá un diseño receptivo.

Conclusión

Bootstrap y Sass definitivamente hacen un gran combo. Con Bootstrap, puede crear un sitio web receptivo y funcional en solo unas pocas horas . Y las características en Sass como @extend y @include pueden ayudarnos a escribir CSS más simple, programable y mantenible . Para obtener más información sobre Sass, puede consultar este artículo: Introducción a Sass: instalación y conceptos básicos.

Entonces, ¿has probado Bootstrap + Sass?

Crear barras de progreso adaptables personalizadas con ProgressBar.js

Crear barras de progreso adaptables personalizadas con ProgressBar.js

Las barras de progreso son ampliamente conocidas por la mayoría de los usuarios en la web. Para los desarrolladores, a menudo es un proceso complicado crear una barra de progreso desde cero . ¡Pero con ProgressBar.js no es necesario!Esta biblioteca de código abierto gratuita no tiene dependencias y es compatible con todos los principales navegadores, incluido IE9 +. D

(Consejos de tecnología y diseño)

Freebie: Plantilla de infografía empresarial profesional

Freebie: Plantilla de infografía empresarial profesional

Buscando un regalo de promoción? Tenemos aquí, en colaboración a nuestros amigos de Freepik, un lanzamiento exclusivo para lectores de HKDC. Está viendo una plantilla de infografía estadística con temas de negocios que está repleta de elementos que son excelentes para la visualización de datos, para presentaciones de informes anuales o para hacer una infografía de aspecto asombroso.En este

(Consejos de tecnología y diseño)