Es una sencilla estructura para un proyecto web estático basado en Gatsby.
- Usa Gatsby para generar sitios estáticos usando React.
- Compila Sass.
- Tiene una estructura lista de estilos (con Sass) basada en SMACSS y ITCSS.
- Tiene una estructura de componentes en React basada en atomic design.
- Tiene una configuración lista para que el sitio sea una progressive web application, para que sea instalable en dispositivos moviles y trabaje offline (Solo funciona despues de hacer el build).
Para usar el boilerplate es necesario tener instalado node.js.
- Instalar Gatsby CLI usando:
Si ya esta instalado, pasar al siguiente paso.
npm install -g gatsby-cli
- Ejecute en terminal.
gatsby new application-name https://github.com/alejogs4/boilerplate-sass-offline-atomicdesign
- Ejecute en terminal.
cd application-name
- Ejecute en terminal
para levantar el servidor de desarrollo.
gatsby develop
- Ejecute en terminal
para generar sus archivos para producción.
gatsby build
- La carpeta src contiene la estructura de archivos con la que trabajará.
- La carpeta public contiene los archivos compilados que deberán llevarse a producción.
- Sass se encuentra en
/src/scss
. - Dentro de
/src/pages
se encuentran todas las paginas que habrá en el sitio. - Dentro de favicons se encuentran los iconos para la pwa.
Para adaptar la configuración de la pwa a sus necesidades, en el archivo gatsby-config.js
, personaliza los datos del manifest.json, en el objeto options
.
{
"resolve": "gatsby-plugin-manifest",
"options": {
"name": "EDteam",
"short_name": "EDteam",
"start_url": "/",
"background_color": "#007BDF",
"theme_color": "#FAFDFF",
"display": "standalone",
"icons": [
{
"src": "/favicons/edteam-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/favicons/edteam-96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicons/edteam-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/favicons/edteam-256.png",
"sizes": "256x256",
"type": "image/png"
}
]
},
}
Los iconos deben estar en los tamaños especificados para que se adapte a los diferentes tamaños de pantalla.