README
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/
- css/elements/: carpeta que contiene estilos genéricos para los principales elementos HTML que se utilizan en una web.
- css/generic/: carpeta que contiene estilos generales para elementos como el body y para unificar estilos entre todos los navegadores.
- 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.
- 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).
- css/tools/: contiene todos los mixin y funciones útiles para cualquier proyecto (descubre cuáles existen y cómo usarlas).
- css/utilities/: clases BEM que resultan útiles en cualquier proyecto (descubre todas las que existen y cómo usarlas).
- js/: archivos JS útiles para el Framework.
Documentación
Aprende a usar el Framework desde la documentación oficial y desde los tutoriales.