hernandezblasantonio/pw/documentacion/html/css

CSS

Un framework CSS es un conjunto de herramientas, hojas de estilos y buenas prácticas que permiten al diseñador web olvidarse de las tareas repetitivas para centrarse en los elementos únicos de cada diseño en los que puede aportar valor. - Frameworks de CSS

Ventajas: Proporcionar una forma fácil y por tanto rápida de implementar diseños web. Nos aseguran que el diseño va a funcionar en una amplia gama de navegadores. Nos aseguran que su código cumple cierta normas estándar. El framework se supone que está bien probado para asegurarnos que no hay errores. Inconvenientes: La importación de código del framework que no es necesario en el nuestro diseño web concreto. Hay un menor control por parte del maquetador de lo que realmente está sucediendo en la visualización de la página web. Al diseñar con código prehecho, podemos estar limitándonos en cuanto las posibilidades de elección del diseño web. - Wikipedia

Los frameworks CSS no son nada nuevos y son muy populares en la escena del desarrollo front-end. Estos frameworks proporcionan fragmentos de código que puedes copiar y pegar en tu sitio web para elaborar el diseño entero y la interfaz de usuario. Probablemente ya has leído muchos artículos sobre cómo pueden ser buenos para tus proyectos, pero aquí me gustaría hacer lo contrario: destacar algunos de los inconvenientes que le pueden traer a tus sitios web o aplicaciones, y cómo puedes evitarlos o mitigarlos. - Puede que no necesites un framework CSS

Frameworks CSS

  • Twitter Bootstrap: the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • Bulma: a modern CSS framework based on Flexbox.
  • ZURB Foundation: the most advanced responsive front-end framework in the world.
  • Materialize: a modern responsive front-end framework based on Material Design.

Otras propuestas

  • Basscss: low-Level CSS Toolkit.
  • Ink: create responsive web interfaces quick and efficiently.
  • MUI: a lightweight CSS framework that follows Google's Material Design guidelines.
  • Primer: the CSS toolkit and guidelines that power GitHub.
  • PureCSS: a set of small, responsive CSS modules that you can use in every web project.
  • Semantic UI: user Interface is the language of the web.
  • Tachyons: functional css for humans. Quickly build and design new UI without writing css.
  • UIkit: a lightweight and modular front-end framework for developing fast and powerful web interfaces.
  • CSS-Mint: an Open Source UI Kit.
  • Skeleton Framework: a simple responsive framework for mobile friendly development.
  • MilligramCSS: a minimalist CSS framework.
  • Metro UI CSS: the front-end framework for developing projects on the web in Windows Metro Style.
  • Propeller.in: a front-end responsive framework based on Google's Material Design Standards & Bootstrap.
  • Kube CSS Framework: CSS & JS Framework, for professional developers and designers alike.
  • mini.css: minimal, responsive, style-agnostic CSS framework.
  • Concise CSS: a lightweight, front-end framework that provides a number of great features without the bloat.
  • siimple: minimal CSS framework for flat and clean designs.
  • Base: a rock solid, responsive HTML/CSS Framework built to work on all devices big and small.
  • mincss: the world's smallest (995 bytes) CSS framework.
  • Cardinal: a modular, “mobile-first” CSS framework built with performance and scalability in mind.
  • Ratchet: build mobile apps with simple HTML, CSS, and JavaScript components.

Recursos

  • Normalize.css: makes browsers render all elements more consistently and in line with modern standards.
  • sanitize.css: a CSS library that corrects broken and missing styles in all browsers, preserving useful defaults rather than unstyling everything.
  • HTML5 Boilerplate: a professional front-end template for building fast, robust, and adaptable web apps or sites.
  • Hover.css: a collection of CSS3 powered hover effects.
  • magic: CSS3 Animations with special effects.
  • Animate.css: a cross-browser library of CSS animations.
  • Effeckt.css: performant CSS transitions & animations.