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?

20 Términos de la industria de diseño web para Clueless Clueless

En la industria del diseño web, utilizamos muchos términos internos . Esto no solo hace que sea difícil comenzar para los recién llegados, especialmente los clientes que no están involucrados en la industria del diseño, pero comunicar su significado correctamente a veces puede ser todo un desafío.En est

(Consejos de tecnología y diseño)

Cómo Kickstarter ha decepcionado a sus patrocinadores

Kickstarter ha sido una de las plataformas de crowdfunding más famosas de casi una década, brindando soporte a cientos de proyectos que no pueden encontrar el respaldo necesario a través de los medios tradicionales .Las personas (o patrocinadores) que se interesan en un proyecto determinado prometen cualquier cantidad de dinero para su ejecución exitosa. Un

(Consejos de tecnología y diseño)