pixeldivision-f

Un front-end framework basado en la metodología BEM que sirve como base para cualquier proyecto web

Usage no npm install needed!

<script type="module">
  import pixeldivisionF from 'https://cdn.skypack.dev/pixeldivision-f';
</script>

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/
  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.