Zurix | Diseño a velocidad luz

Mobile first

Zurix esta diseñado para ser mobile first, usted puede iniciar en dispositivos pequeños primero y a medida que el navegador se hace mas grande se puede ir añadiendo mas complejidad para un diseño organizado,aunque esto no esta escrito en piedra, también puedes iniciar en dispositivos grandes, solo es cuestión de gustos.

Versatilidad

Destinado para la maquetación o estructura pura, zurix no tiene css visual preestablecido para que esto no choque con el css del diseñador, cosa que hace de este framework genial para incluir en proyectos en desarrollo con la seguridad de que no habrá inconvenientes o rupturas en esquema visual.

Intuitivo

Esta diseñado para ser rápido, sencillo y generar una curva de aprendizaje mínima, los nombres de las clases son muy fáciles de memorizar, utiliza zurix por un rato y en un pestañeo estarás haciendo magia.

Personalizable

En su versión Sass zurix es increíblemente personalizable, solo basta con modificar los valores de variables declaradas por defecto o crear tus propias variables, ademas que es muy liviano a comparación de otros frameworks,

Acerca de zurix

Zurix es un framework exclusivamente CSS sin estilos visuales preestablecidos, orientado a maquetación HTML y así brindarnos la facilidad de crear diseños web responsive (RWD) y mobile first fácilmente.

Desarrolla geniales proyectos para cualquier tamaño de pantalla a gran velocidad, con zurix es alucinante lo fácil que resulta pues es senmántico, legible, flexible y absolutamente personalizable.

Creado en SASS, destinado para maquetación o estructura pura y en tiempo récord, no añade estilos predeterminados para evitar conflictos con proyectos en desarrollo y así olvidarse de las colisiones de estilos css framework-diseñador, dotado con todo el poder de flexbox!! es hora de olvidar los floats.

Iniciando

Aprende como empezar a utilizar e incluir fácilmente zurix a tus proyectos web.

Descarga

Esta es la versión completa del framework incluye tanto los módulos CSS como Sass, si utilizaras el framework en su versión css toma el archivo .css que se encuentra dentro de la carpeta "css" del proyecto, por el contrario si utilizaras zurix en su forma Sass utiliza la carpeta "Scss", ten en cuenta que en esta versión tendrás mas control sobre los componentes pero necesitaras un compilador para Sass.

Zurix

Estructura del proyecto

Posteriormente a la descarga,extraiga los archivos del .zip en la ruta donde esta localizado su proyecto web.

Se dará cuenta que en general hay dos tipos de archivos. El archivo .min significa que el archivo esta comprimido y optimizado para reducir los tiempo de carga del proyecto, los archivos minificados se utilizan por lo general en la producción mientras que los expandidos o no minificados se recomiendan utilizar en el desarrollo.

	
		"Ruta de tu proyecto web"/
		|-- css/
		| |-- zurix.css
		| |-- zurix.min.css
		|
		|-- fonts/
		| |-- zurix/
		|
		|--scss/
		| |-- componentes/
		| |-- zurix.scss
		|
		|-- index.html

Añadiendo zurix a nuestro proyecto

Proyecto con Css

En este paso se utilizara zurix.css hay que asegurarse de que el enlace de los archivos sea correcto con su proyecto e incluirlo en su archivo principal index.html las etiquetas de importe del framework.

	
		<! DOCTYPE html>
		<html>
				<head>
					<!--Import zurix.css-->
					<link type="text/css" rel="stylesheet" href="css/zurix.css"
					<!--Para verificar que el proyecto esta optimizado para moviles-->
					<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
				</head>

				<body>
				</body>
		</html>

Proyecto con Sass

Esta sección es relevante solo si tienes planeado hacer uso del framework en su versión Sass.

Sass es un meta-lenguaje procesado para css, a través de este encontramos una sintaxis y funcionalidades mas poderosas que un css normal no soportaría, nos permite crear código css mucho más mantenible.

Desafortunadamente, el navegador no tiene la capacidad de interpretar los archivos en formato Sass, por lo que se debe tener un compilador para que procese los archivos.scss, y nos den como resultado un archivo.css, actualmente existen compiladores gráficos como Prepros, Koala o Scout solo por mencionar algunos.

En lugar de hacer uso directo de la carpeta css, esta vez su enfoque quedara centrado en la carpeta llamada scss que contiene dentro una carpeta llamada "componentes" que contiene los módulos del framework y un archivo "zurix.scss", este archivo es el principal, pues es la unión de los demás archivos módulos que se encuentran en la carpeta "componentes" realizado con @import y tiene algunas variables generales que puedes configurar para adaptar mejor el framework a su exigencia. Al procesar zurix.scss el resultado sera un archivo .css que podra leer e interpretar fácilmente el navegador, este se puede incluir como cualquier otro archivo css al proyecto.

	
		"Ruta de tu proyecto web"/
		|-- css/
		| |-- zurix.css <-- Resultado de procesar el archivo "zurix.scss"	
		| |-- zurix.min.css
		|
		|-- fonts/
		| |-- zurix/
		|
		|--scss/
		| |-- componentes/
		| |-- zurix.scss
		|
		|-- index.html

Grid o sistema de rejillas

Una familia es un gran ejemplo para aprender y es la base de todo, en Zurix se manejan los contenedores con el nombre de papas ("papa") e hijos ("hijo") para tener una mejor comprensión y organización de contenedores, veras que es muy fácil memorizar las clases de este framework y rápidamente estarás haciendo estructuras HTML con estilo y a la velocidad de la luz.

Contenedores

Los padres en la familia son los eslabones primordiales de la casa y en zurix fungen de una manera similar, los grupos con la clase "papa" son los contenedores que albergan los divs "hijos" para su organización y función. "Los hijos deben estar siempre dentro del contenedor papa."

Los contenedores "papa" son los estelares del framework zurix se debe utilizar etiquetas div para generarlos al igual que los contenedores hijos "hijo".

	
		<body>
				<div class="papa">
						<div class="hijo">
						</div>
				</div>
		</body>

Los contenedores papa tienen declarados los siguientes valores css.

	
		.papa {
				display:     flex;
				flex-wrap:   wrap;
				max-width:   1100px;
				margin-left: auto;
				margin-rigt: auto;
				width:       100%;
		}

Si por algún motivo no quisieras que el ancho máximo del contenedor fuera de 1100px simplemente basta con sobrescribir en un css el valor nuevo que se le va a asignar, o mejor aun si usas sass en el archivo "zurix.scss" puedes modificar su valor directamente en su variable nombrada $max-width.

Hay varios puntos que se tienen que dejar en claro en cuanto al uso de contenedores papas e hijos en zurix:

Los papas son los contenedores principales y los hijos son divisiones del contenedor papa.
Todo contenedor papa debe tener al menos un hijo y los hijos deben estar dentro de un papa.
Los contenedores hijos llevan la clase "hijo" y ademas otra clase que describa su tamaño de breakpoint y anchura con la clase "tamaño-x" o si es una fracción "tamaño-x-y".

Porcentajes

En zurix nuestro sistema de grid se basa en porcentajes para así por fin liberarnos de las columnas y brindar a los diseñadores una herramienta mas versátil y sin tanta restricción en cuanto a la estructura, esto te abre las puertas al desarrollo de entornos web como nunca imaginaste.

La mayoria de framework utiliza un sistema de grid basada en columnas posicionadas con floats, zurix rompe el esquema y toma todo el poder de flexbox para llevar acabo su cometido, es hora de olvidar los floats y dar un paso a lo nuevo.

Nuestra cuadricula tiene 20 particiones que van desde el 5% hasta el 100% incrementando de 5 en 5 como se muestra a continuación, omitimos poner las 20 particiones en el ejemplo para evitar extender la documentación.

Porcentajes menores a 50%...

50%

55%

60%

65%

70%

75%

80%...etc

	
		<div class="papa">
				<div class="hijo mini-50">
						<p> 50%</p>
				</div>

				<div class="hijo mini-55">
						<p> 55%</p>
				</div>

				Etc,etc... y así sucesivamente, nota como se juega con las clases.

		</div>

Fracciones

Este framework a parte de los porcentajes, también te ofrece la capacidad de manejar anchos en elementos del html con clases fracciones, determinado por la función de la clase "mini-1-3" donde mini es el tamaño de la media querie y 1-3 es la fracción que determina el ancho del objeto (1/4, 3/6, etc).

Actualmente el framework tiene como base 3 tipos de fracciones con las que puedes interactuar, y esos son: tercios, sextos y octavos declarados en un map en su versión sass, si usted usa la versión sass en el archivo principal "zurix.scss" puede añadir soporte para más fracciones de acuerdo a su necesidad solo es cuestión de modificar los valores.

	
		$fracciones:(
				tercios: 	3,
				sextos:		 6,
				octavos: 8
		)

Este recurso es complemento del grid de porcentaje, ya que si te habras dado cuenta con el sistema de porcentaje con intervalos de 5 en 5% no podrias determinar una cuadricula con 3 contenedores hijo que ocuparan el 100% por que necesitarias dar a cada uno 33.3% de ancho y asi en varias situaciones muy puntuales, por eso en zurix las fracciones llegan al rescate.

Resolver este problema es fácil utilizando el recurso de anchura con fracciones.

1/3

1/6

1/8

	
			<div class="papa">
				<div class="hijo mini-1-3"> <---Nota la forma en que se declaran los anchos con fracciones mediante las clases.
						<p>1/3</p>
				</div>

				<div class="hijo mini-1-6">
						<p>1/6</p>
				</div>

				<div class="hijo mini-1-8">
						<p>1/8</p>
				</div>
		</div>

Veamos un ejemplo para dejar por sentado este tema,declaramos un contenedor "papa" y dentro queremos 3 contenedores "hijo" que individualmente tengan 1/6 del ancho total del contenedor padre el segundo 3/6 y el ultimo 2/6.

1/6

3/6

2/6

	
			<div class="papa">
				<div class="hijo mini-1-6">
						<p>1/3</p>
				</div>

				<div class="hijo mini-3-6">
						<p>1/6</p>
				</div>

				<div class="hijo mini-2-6">
						<p>1/8</p>
				</div>
		</div>

Como observaste en el ejemplo anterior puedes jugar con las anchuras en las fracciones y adaptarlas a tus necesidades rápidamente, pero recuerda que solo usando tercios, sextos y octavos solo si usas el framework en su versión css, si por el contrario optas por Sass tienes mas libertad de editar los parametros.

Hagamos un layout!

Como practica y parte de la demostración crearemos un layout usando el grid de porcentaje y combinándolo con fracciones para generar rápidamente una estructura html.

Hagamos un contenedor padre papa que en su interior contenga en su primera fila dos hijos que tengan de ancho el 50%, en la segunda fila un hijo único que tome el 100%, en su tercera fila 3 contenedores hijos que tengan 1/3 de ancho cada uno y por ultimo otro hijo unico con 100%.

	
		<div class="papa">
				<div class="hijo mini-50">
						<p> Hola hijo 1</p>
				</div>

				<div class="hijo mini-50">
						<p> Hola hijo 2</p>
				</div>

				<div class="hijo mini-full">
						<p> Yo soy mayor!! :D</p>
				</div>

				<div class="hijo mini-1-3">
						<p> Trillizos</p>
				</div>
				
				<div class="hijo mini-1-3">
						<p> Trillizos</p>
				</div>

				<div class="hijo mini-1-3">
						<p> Trillizos</p>
				</div>

				<div class="hijo mini-full">
						<p> No yo soy mayor!! >:s</p>
				</div>
		</div>

El codigo anterior genera el siguiente layout, observemos el manejo de contenedores (papas e hijos), el papa o contenedor principal esta delimitado por lineas purpura y los hijos están con lineas blancas:

Soy Gemelo

Yo soy mayor!! :D

Trillizos

No yo soy mayor!! >:s

Como ya vimos, con zurix es fácil asignar y controlar el manejo de los anchos de elementos del HTML pero esto no solo se limita a los contenedores papa o hijo, también puedes asignarles anchuras mediante clases a elementos puntuales del html como por ejemplo párrafos, imágenes, vídeos, divs, menús, todo lo que se te ocurra, esto hace a zurix una herramienta extremadamente fácil de utilizar para controlar rápidamente el width o anchura de objetos en tu proyecto.

Veamos unos ejemplos:

En este caso tomemos de ejemplo una imagen que queremos asignarle un ancho del 50% de su contenedor padre."Recuerda que puedes hacer esto con cualquier objeto del html".

	
		<img class="mini-50" src= "http://lorempixel.com/100/100/">

Resultado:

Desplazamientos

Zurix nos brinda la posibilidad de desplazar contenedores con la funcion Offset solamente basta con añadir la clase "mini-offset-40" en lo que mini significa el prefijo del tamaño de pantalla (mini,movil,tablet,web,hd) y el numero después de offset significa el porcentaje de la distancia que se va a desplazar, también puedes hacer uso de offset asignando fracciones en lugar de porcentajes.

La funcion offset solo funciona con contenedores con la clase "hijo".

Este div tiene 100%

50%
(Desplazado 50%)

50%
(Desplazado 1/3)

	
		<div class="papa">
				<div class="hijo mini-full">
						<p> Este div tiene 100% </p>
				</div>

				<div class="hijo mini-50 mini-offset-50">
						<p> 50% (Desplazado 50%) </p>
				</div>

				<div class="hijo mini-50 mini-offset-1-3">
						<p> 50% (Desplazado 1/3) </p>
				</div>
		</div>

Creando diseños responsivos (RWD)

Entrando en materia cuando hablamos de un diseño responsivo siempre viene al tema las media queries, breakpoints o puntos de quiebre nos referimos a el punto en el que el tamaño del viewport o pantalla presenta cambios para adaptarse al tipo de resolución o dimensión del viewport y así evitar que las partes del diseño no se rompan y se genere un caos total.

Para que tu desarollo o proyecto web identifique los cambios de los media queries es necesario declarar una etiqueta meta llamada "viewport". La etiqueta viewport nos permite a los que construimos sitios web o web apps, definir el ancho, alto y escala del área usada por el navegador para mostrar contenido. A continuación la configuración más común de una etiqueta meta.

Hay que mencionar que esta etiqueta se debe de incluir en el html entre los tags o etiquetas "head".

	
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Zurix es un framework orientado al responsive design (RWD) y esto significa que a través de el, puedes manipular mediaqueries para el beneficio de tu proyecto y hacer que se vea bien en prácticamente todo los tipos de pantallas.

Zurix presenta por default varios breakpoints o tamaños de media queries que podemos usar por default:

mini: 320px en adelante.
movil: 480px en adelante.
tablet: 768px en adelante.
web: 1024px en adelante.
hd: 1500px en adelante.

En los ejemplos anteriores, solo definimos el tamaño de las pequeñas pantallas con "mini", esto esta bien si solamente queremos un diseño estático ya que las reglas se heredan hacia las medidas mayores. Con solo declarar "mini-50" por ejemplo, estamos diciendo o declarando indirectamente "mini-50 movil-50 tablet-50 web-50 hd-50". Pero definiendo explícitamente el tamaño podemos hacer que nuestro diseño se haga sensible a los cambios.

Veamos unos ejemplos a continuación de como se puede hacer uso de las medidas para volver responsive tu proyecto.

Siempre estoy de ancho completo (mini-100)

Soy de ancho completo en móviles (movil-50)

	
		<div class="papa">
				<div class="hijo mini-100">
						<p> Siempre estoy de ancho completo (mini-100) </p>
				</div>

				<div class="hijo mini-100 movil-100 tablet-50">
						<p> Soy de ancho completo en móviles (movil-50) </p>
				</div>
		</div>

Hagamos otro ejemplo pero esta vez realicemos un layout básico responsivo. Intente cambiar el tamaño de su navegador para que aprecie el reacomodo del diseño continuación.

	
		<div class="papa">

				<div class="hijo mini-100">

						//Contenedor purpura, Aquí va el header titulo,logo,etc.

				</div>

				<div class="hijo mini-100 movil-100 tablet-20">

						//Contenedor gris, Aquí va el panel de navegación.

				</div>

				<div class="hijo mini-100 movil-100 tablet-80">

						//Contenedor verde, Aquí va el contenido principal.

				</div>

		</div>

Otro ejemplo de cuadricula o layout responsiva,recuerde redimencionar el navegador para apreciar los cambios.

mini-100

mini-100 tablet-1-3 web-20

mini-100 tablet-1-3 web-60

mini-100 tablet-1-3 web-20

mini-100 tablet-50 web-25

mini-3-3 tablet-1-6 web-1-3

mini-3-3 tablet-4-6 web-1-3

mini-3-3 tablet-1-6 web-1-3

	
		<div class="papa">
				<div class="hijo mini-100">
						<p>mini-100</p>
						//Contenedor purpura
				</div>

				<div class="hijo mini-100 tablet-1-3 web-20">
						<p>mini-100 tablet-1-3 web-20</p>
						//Contenedor azul
				</div>
				<div class="hijo mini-100 tablet-1-3 web-20">
						<p>mini-100 tablet-1-3 web-20</p>
						//Contenedor azul
				</div>
				<div class="hijo mini-100 tablet-1-3 web-20">
						<p>mini-100 tablet-1-3 web-20</p>
						//Contenedor azul
				</div>

				<div class="hijo mini-100 tablet-50 web-25">
						<p>mini-100 tablet-50 web-25</p>
						//Contenedor verde
				</div>
				<div class="hijo mini-100 tablet-50 web-25">
						<p>mini-100 tablet-50 web-25</p>
						//Contenedor verde
				</div>
				<div class="hijo mini-100 tablet-50 web-25">
						<p>mini-100 tablet-50 web-25</p>
						//Contenedor verde
				</div>
				<div class="hijo mini-100 tablet-50 web-25">
						<p>mini-100 tablet-50 web-25</p>
						//Contenedor verde
				</div>

				<div class="hijo mini-3-3 tablet-4-6 web-1-3">
						<p>mini-3-3 tablet-4-6 web-1-3</p>
						//Contenedor rosa
				</div>
				<div class="hijo mini-3-3 tablet-4-6 web-1-3">
						<p>mini-3-3 tablet-4-6 web-1-3</p>
						//Contenedor rosa
				</div>
				<div class="hijo mini-3-3 tablet-4-6 web-1-3">
						<p>mini-3-3 tablet-4-6 web-1-3</p>
						//Contenedor rosa
				</div>
		</div>

Utilidades

A continuación veremos las herramientas-clases que el framework zurix nos ofrece para ayudar a agilizar nuestra maquetación de nuestro proyecto web.

Zurix cuenta con clases predeterminadas que pueden usarse como herramientas rápidas para ayudar a la distribución de elementos y dar diseños rápidamente ahorrándote tiempo de desarrollo en css, a continuación veremos las características de una por una con su respectiva demostración.

centro: Centra el contenido.

	
			<div class="papa">
				<div class="hijo">
						<img src="img/ejemplo.png" class="centro">
				</div>
		</div>

izquierda: Flota el contenido hacia la izquierda.

derecha: Flota el contenido hacia la derecha.

	
			<div class="papa">
				<div class="hijo">
						<img src="img/ejemplo.png" class="izquierda">
						<img src="img/ejemplo.png" class="derecha">
				</div>
		</div>

centrar-texto: Coloca el contenido en el centro.

izquierda-texto: Coloca el contenido hacia la izquierda.

derecha-texto: Coloca el contenido hacia la derecha.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse?

	
			<div class="papa">
				<div class="hijo">

						<p class="centrar-texto"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse? <p>
						<p class="izquierda-texto"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse? <p>
						<p class="derecha-texto"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse? <p>

				</div>
		</div>

circulo: Se aplica el estilo circular con border-radius: 50% "siempre y cuando tenga el ancho y el alto de la misma medida."

	
			<div class="papa">
				<div class="hijo">
						<img src="img/ejemplo.png" class="circulo">
				</div>
		</div>

limpiar: Purga el elemento para evitar que lo afecte el float de otros elementos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla alias deleniti dolore, aliquid excepturi repellat eaque tempora itaque! Fugiat tempora vitae eius cum enim, ullam ea quibusdam doloremque adipisci provident?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam dolore magni dolores reiciendis voluptatibus ea! Eum aliquam odio, error id dolore hic quidem, velit officia iste harum voluptates fuga blanditiis!

	
			<div class="papa">
				<div class="hijo">

						<img src="img/ejemplo.png" class="base-30 derecha">
						<p class="base-70 izquierda"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla alias deleniti dolore, aliquid excepturi repellat eaque tempora itaque! Fugiat tempora vitae eius cum enim, ullam ea quibusdam doloremque adipisci provident? <p>
						<p class="limpiar"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam dolore magni dolores reiciendis voluptatibus ea! Eum aliquam odio, error id dolore hic quidem, velit officia iste harum voluptates fuga blanditiis! <p>

				</div>
		</div>

Como se pudieron ver la clase limpiar lo que hace es que purga al objeto de modo que salga de la influencia de los floats y se situé en una linea limpia en el div y no debajo del párrafo anterior.

Si no hubiéramos incluido la clase limpiar habría pasado que el parrafo 2 hubiera seguido la estructura de los elementos flotados de la siguiente forma: