simpledev.css es un nuevo marco CSS que describo como un marco mayormente sin clases. Lo llamo mayoritariamente sin clases porque gran parte del código utiliza selectores de tipo, por lo que no es necesario agregar muchas clases para diseñar su página web. Hay algunas clases, pero intentamos mantenerlas al mínimo (hasta ahora sólo hay unas 42 clases).

¡Repasemos algunas de las funciones siguientes!

Características

1. Diseño mayormente sin clases: Generalmente no tiene clases, por lo que verás tu página HTML simple transformarse tan pronto como agregues el marco.
2. Clases mínimas para elementos comunes: Proporcionamos clases para cosas que son realmente comunes: una barra de navegación, hacer que los enlaces parezcan botones, un pie de página básico, etc.
3. Centrado en la accesibilidad: No soy un experto en accesibilidad, pero hice todo lo posible para incorporar las mejores prácticas de accesibilidad en el marco. Por lo tanto, el marco tiene un componente para omitir enlace, una clase visualmente oculta y usamos rems para los tamaños de fuente.
4. Soporte de temas: simpledev.css admite diferentes temas. Puedes usar solo el modo claro, solo el modo oscuro o ambos.
5. JavaScript mínimo: Es muy ligero en JS. Solo usamos JS para el componente de la barra de navegación. Si no estás usando la barra de navegación (o estás usando el componente de barra de navegación simple), ¡puedes omitir el JS por completo!
6. Fácil de comenzar: Tenemos una página de inicio que tiene plantillas básicas y avanzadas que puedes copiar o descargar, un repositorio de GitHub que puedes descargar o usar para iniciar un nuevo repositorio y un lápiz de CodePen. para probarlo directamente en tu navegador.
7. Recetas: También tenemos una página de Recetas donde puedes copiar y pegar reglas CSS en tu archivo custom.css para obtener cosas como una barra de navegación fija, esquinas redondeadas, tablas rayadas y un desplazamiento suave.
8. Paletas de colores personalizadas: Puedes traer tu propia paleta de colores. simpledev.css realmente no tiene ningún color de forma predeterminada, por lo que puedes elegir tus propios colores y agregarlos al marco.
9. Componentes modulares: Técnicamente, puedes descargar algunos de los componentes y usarlos individualmente si lo deseas. Simplemente visite el repositorio de GitHub y descargue los archivos CSS que desee. Solo tenga en cuenta que desarrollamos nuestros componentes sobre Modern Normalize, por lo que es posible que deba incorporar Modern Normalize para obtener el mismo aspecto.

Fondo

El año pasado descubrí el repositorio awesome-css-frameworks en GitHub. Contiene una larga lista de marcos CSS agrupados en diferentes categorías. Estaba particularmente interesado en la sección sobre marcos CSS sin clases. Me gustó la idea de vincular un archivo CSS y cambiar instantáneamente la apariencia de una página HTML sin tener que modificar su HTML.

Al principio, me inspiré en el marco llamado Water.css en la lista, pero luego me inspiré más en Pico.css, otro marco sin clases.

Finalmente decidí intentar crear mi propio marco. Sin embargo, quería que fuera un poco diferente:

• Decidí usar CSS básico en lugar de Sass. Esto se debe a que quería que fuera fácil para otras personas probar el marco y también aprender del código fuente.
• No quería que fuera puramente sin clases, porque creo que hay algunas cosas que requieren clases de CSS.
• Pico es probablemente el marco CSS sin clases más atractivo, pero siento que algunos de los elementos/componentes son un poco grandes, así que quería que mis elementos/componentes fueran más pequeños.

Conclusión

¡Gracias por leer esta publicación! Tengo algunos favores que pedirte:

1. ¡Destaca el repositorio en GitHub!
2. Intenta construir un pequeño proyecto con el marco
3. Si nota algún problema, cree un problema en GitHub
4. Si tiene alguna solicitud de función, inicie una discusión en GitHub
5. Si tienes una idea para un componente, ¡intenta crearlo en CodePen!

¡Deja un comentario a continuación si tienes alguna pregunta o sugerencia! Probablemente también continuaré con un tutorial sobre simpledev.css más adelante.