arronagrid v0.1.0

ArronaGrid

ArronaGrid es una libreria Postcss / sass para la maquetacion de sitios web.

Autor: Andres Arrona Montoya.

Descargar el proyecto

Version Estable

Version Beta

Instalacion

se recomienda descargar la version estable

Descarge y descomprima la version de ArronaGrid de su preferencia.

coloque el archivo ArronaGrid.scss en la raiz de su proyecto y modifique el archivo gulpfile.js en las siguentes lineas.

//En esta linea debe de especificar el destino de su archivo css compilado

23 | .pipe(gulp.dest('./css')

//En esta linea debe de especificar los archivos de la libreria

27 | gulp.watch('**/*.scss', ['styles']);

Ejemplo

23 | .pipe(gulp.dest('./[public | MiProyecto | etc...  ]/css')


27 | gulp.watch('./[src | app | etc...]/**/*.scss', ['styles']);

Ejecutar

• gulp Para compilar los archivos scss.

Estructura

Carpetas

:file_folder: scss

• :page_facing_up:content.scss

• :page_facing_up:Core.scss

• :page_facing_up:Flexbox.scss

• :page_facing_up:Grid.scss

• :page_facing_up:MediaQuery.scss

• :page_facing_up:Reset.scss

Archivos

• :page_facing_up:.editorconfig Contiene la configuración para la codificación entre diferentes editores e IDEs, considera que en algunos editores tendrás que instalar un plugin adicional para que funcione, consulta el sitio editorconfig.org para saber si tu editor o ide lo soporta nativamente o requiere algún plugin.

• :page_facing_up:.gitignore Indica que archivos y directorios ignorará Git al momento de sincronizar el proyecto, la configuración que se propone ha sido generada en el sitio gitignore.io y es esta: osx, node,macOS ,linux, windows, visualstudio code,Sublime Text siéntete libre de modificarla a tus necesidades.

• :page_facing_up:ArronaGrid.scss Archivo para declarar sus estilos.

• :page_facing_up:Changelog.md Contiene laos cambios de este proyecto.

• :page_facing_up:gulpfile.js Contine la configuracion para la compilacion de los archivos scss a css.

• :page_facing_up:license.txt Licensia del proyecto.

• :page_facing_up:package-lock.json Contiene la configuración del proyecto, en el podrás ver todas las dependencias

• :page_facing_up:package.json Contiene la configuración del proyecto, en el podrás ver todas las dependencias.

• :page_facing_up:Readme.md Contiene la documentación de esta libreira.

Mixin y Funciones

En esta sección se irán listando los mixins o las funciones sass disponibles en esta libreria , si quieres colaborar creando algún mixin o funcion enviar una mensaje al siguinete correo andresarronamontoya@gmail.com.

• :heavy_dollar_sign: ArronaContent Mixin para crear un contenedor.

• :heavy_dollar_sign: Full Mixin para declarar un contenedor del 100% del viewport.

• :heavy_dollar_sign: convertidorRem Mixin para convertir px a rem.

• :heavy_dollar_sign: FlexBasico Mixin para determinar la orientacion y si estaran en una sola linea de un Flex Item.

//Este mixin acepta los siguentes valores

.ejemplo1{
    @include FlexBasico([column | row] , [wrap | nowrap])
}

• :heavy_dollar_sign: FlexOrder Mixin para ordenar un Flex Item.

//Este mixin acepta cualquier valor numerico

.ejemplo1{
    @include FlexOrder(1)
}

• :heavy_dollar_sign: Align Mixin para un Flex Item.

//Este mixin acepta los siguentes valores

.ejemplo1{
    @include `Align([flex-start | flex-end | center | space-between | space-around],[flex-start | flex-end | center],[flex-start | flex-end | center | space-between | space-around])
}

• :heavy_dollar_sign: grid Mixin para crear un sistema de grid.

//Este mixin acepta cualquier valor numerico

.ejemplo1{ @include grid(1,2) }

• :heavy_dollar_sign: gridImplicit Mixin para crear un sistema implicito de grid.

• :heavy_dollar_sign: autoFlow Mixin para determinar la orientacion de un Grid Item

//Este mixin acepta los siguentes valores

.ejemplo1{
    @include autoFlow([column | row])
}

• :heavy_dollar_sign: GridGap Mixin para declarar la separar los Grid items.

//Este mixin acepta cualquier valor numerico

.ejemplo1{
    @include GridGap(1)
}

• :heavy_dollar_sign: GridCoordinates Mixin para ordenar un Grid Item.

//Este mixin acepta cualquier valor numerico

.ejemplo1{
    @include GridCoordinates(1,2,1,2)
}

• :heavy_dollar_sign: MediaQuery Mixin para crear sus media querys nesesarias para su proyecto. Puede usar los valores por defectos o crear sus propios valores

//Este mixin acepta cualquier valor numerico

.ejemplo1{
    @include MediaQuery(S);
}

Brackpoints disponibles