Pixel Division Framework

El Framework de Pixel Division permite construir proyectos web de forma más rápida y ordenada.

Además, se integra perfectamente con la librería de componentes web con la que podemos copiar y pegar módulos completos en nuestros sitios web.

Características

• es rápido y fácil de instalar en cualquier proyecto web
• junto a los componentes web constituye una solución rápida y robusta para crear sitios web
• utiliza tecnologías / metodologías modernas como variables CSS o BEM
• fácil de aprender

Estructura de carpetas

pixeldivision-framework/
├── css/
│   ├── elements/
│   ├── generic/
│   ├── objects/
│   ├── settings/
│   │   ├── _settings.colors.scss
│   │   ├── _settings.common.scss
│   │   ├── _settings.fonts.scss
│   │   ├── _settings.mq.scss
│   │   ├── _settings.spacing.scss
│   ├── tools/
│   │   ├── mixins
│   │   ├── _flexbox.scss
│   │   ├── _functions.scss
│   ├── utilities/
│   ├── __framework.scss
├── js/
│   ├── util/

1. css/elements/: carpeta que contiene estilos genéricos para los principales elementos HTML que se utilizan en una web.
2. css/generic/: carpeta que contiene estilos generales para elementos como el body y para unificar estilos entre todos los navegadores.
3. css/objects/: carpeta que define estilos para aquellos objetos BEM que son más recurrentes en los proyectos:
   • _article.scss: un artículo de un post o una página de legales (aprender más)
   • _buttons.scss: botones que aparecen a lo largo de una página web (aprender más).
   • _forms.scss: un formulario de una página web (aprender más).
   • _gallery.scss: una galería que usa el sistema CSS grid (aprender más sobre el layout).
   • _section.scss: una sección de cualquier zona de la web.
4. css/settings/: carpeta que define toda la configuración de un proyecto:
   • _colors.scss: definición de los colores del proyecto (aprende a configurar los colores).
   • _common.scss: definición de variables comunes tales como los bordes, anchura de los contenedores o valores de z-index (aprende a configurar las variables globales).
   • _fonts.scss: definición de todas las variables referentes a la tipografía (aprende a configurar la tipografía)
   • _mq.scss: definición de los breakpoints del proyecto (aprende a usarlos).
   • _spacing.scss: definición del sistema de espacios del proyecto (aprende a configurar el sistema de espacios).
5. css/tools/: contiene todos los mixin y funciones útiles para cualquier proyecto (descubre cuáles existen y cómo usarlas).
6. css/utilities/: clases BEM que resultan útiles en cualquier proyecto (descubre todas las que existen y cómo usarlas).
7. js/: archivos JS útiles para el Framework.

Documentación

Aprende a usar el Framework desde la documentación oficial y desde los tutoriales.