Colección de Recursos CSS (225 enlaces a herramientas)

Colección de Recursos CSS (225 enlaces a herramientas)
Colección de Recursos CSS (225 enlaces a herramientas)
  • Autor de la entrada:
  • Categoría de la entrada:Awesome Listas / Diseño Web
  • Tiempo de lectura:12 minutos de lectura

Este documento es una lista seleccionada de frameworks, guías de estilo y datos interesantes para trabajar con CSS.

Si tiene problemas con algo relacionado con CSS, puedes buscar la respuestas en los siguientes recursos:

🎓 Cursos Gratis de CSS / 📚 Libros Gratis de CSS / 🔍 85 Geniales Recursos CSS Gratuitos

Borradores ✒️

Borradores del editor de especificaciones CSS

Analizadores 🔍

  • CSSOM Modelo de objetos CSS implementado en JavaScript puro.
  • CSSTree Analizador CSS detallado con validador de sintaxis.
  • Gonzales PE – Analizador CSS con soporte para preprocesadores.
  • mensch Analizador CSS decente.
  • ParserLib CSSLint / parser-lib.
  • PostCSS Transformación de estilos con complementos JS.
  • Retrabajo Framework de complementos para el preprocesamiento de CSS en Node.js.
  • Stylecow CSS moderno para todos los navegadores.

Preprocesadores 💊

Escribe CSS más rápido

  • MENOS compatible con versiones anteriores de CSS, y las funciones adicionales que agrega utilizan la sintaxis CSS existente.
  • PostCSS transformación de CSS con complementos JS.
  • Sass lenguaje de extensión CSS maduro, estable y potente de nivel profesional.
  • STYLIS preprocesador CSS ligero.
  • Stylus lenguaje CSS expresivo, robusto y rico en funciones creado para NodeJs.

Frameworks 🎨

  • awsm.css biblioteca CSS simple para marcado semántico HTML.
  • Bonsai un completo marco CSS Utility First por menos de 50 kb.
  • Bootstrap el marco HTML, CSS y JS más popular.
  • Bulma un marco CSS moderno basado en Flexbox. También tiene importación Sass para modificación.
  • Butter Cake un marco CSS moderno y ligero para un desarrollo web más rápido y sencillo.
  • Charts.css marco de visualización de datos CSS.
  • Chota un microestructura adaptable y adaptable (3kb) con utilidades útiles y un sistema de cuadrícula.
  • Cirrus un marco CSS completo y totalmente receptivo con hermosos controles y una estructura simplista.
  • Foundation marco de interfaz de usuario avanzado y receptivo.
  • Gralig una biblioteca CSS modesta y grisácea.
  • Halfmoon un marco frontal receptivo con un modo oscuro incorporado.
  • Hasser CSS un marco CSS ligero (12k, no minificado) pero útil con Grid flexible, Hero y más.
  • inuit.css marco BEM, OOCSS potente, escalable y basado en Sass.
  • material-components-web componentes de UI de diseño de materiales modulares y personalizables para la web.
  • Materialise un marco de interfaz de usuario moderno y receptivo basado en Material Design.
  • Milligramo un marco CSS minimalista.
  • Numl un lenguaje y un sistema de diseño basado en HTML que le permite crear interfaces web de alta calidad receptivas y accesibles con cualquier aspecto.
  • Pure.css un conjunto de módulos CSS pequeños y receptivos que puede usar en cada proyecto web.
  • Interfaz de usuario semántica potente marco que utiliza HTML amigable para los humanos.
  • Short Hand CSS rico en funciones para la nueva década.
  • Spectre.css un marco CSS ligero, receptivo y moderno.
  • Strawberry un conjunto de utilidades comunes de flexbox enfocadas en hacer su vida más fácil y rápida con flexboxes anidados.
  • Tachyons CSS funcional para humanos.
  • Tacit marco CSS para principiantes con cero habilidades en diseño gráfico.
  • Tailwind CSS un marco CSS de utilidad para el desarrollo rápido de la interfaz de usuario.
  • UIkit un marco de interfaz de usuario ligero y modular.
  • Unsemantic cuadrícula fluida para dispositivos móviles, tabletas y computadoras de escritorio.
  • Wing un marco mínimo, ligero y receptivo.

Puede encontrar más marcos en «awesome-css-frameworks»

Kits de herramientas 🔧

  • Bourbon una biblioteca de mezclas simple y liviana para Sass.
  • Susy kit de herramientas de diseño receptivo para Sass.

Estructura CSS

  • RSCSS estándar razonable para la estructura de hojas de estilo CSS.
  • ITCSS una arquitectura CSS sana, escalable y administrada para grandes proyectos de IU.

Restablecer y normalizar

  • Reseter.css un restablecimiento / normalizador de CSS futurista. Que redefine en lugar de preservar.
  • Normalizar un conjunto de reglas CSS que proporcionan una mejor coherencia entre navegadores en el estilo predeterminado de los elementos HTML.
  • Normalize-OpenType agrega funciones OpenType (ligaduras, kerning y más) a Normalize.css.
  • MiniReset.css un pequeño reinicio de CSS moderno.
  • sanitize.css un conjunto de reglas CSS que se adaptan a las mejores prácticas actuales listas para usar.
  • unstyle.css hoja de estilo especializada para eliminar estilos de agentes de usuario, diseñe la web con su línea de base.
  • reset.css – Herramientas CSS: Restablecer CSS.

Desarrollo de CSS en sitios web a gran escala

Directrices de estilo de código 📖

Guías de estilo

Vea más guías de estilo en Recursos de guías de estilo del sitio web

Generadores de guías de estilo 🎰

Convenciones de nomenclatura y metodologías 💡

CSS en JS

Aquí hay una comparación de técnicas CSS en JS

Polyfills CSS

  • polyfill.js una biblioteca para facilitar la creación de polyfill CSS.
  • prefixfreeLibérate del infierno de prefijos CSS.
  • fixed-sticky – Una posición CSS: sticky polyfill.
  • selectivizr una utilidad de JavaScript que emula selectores de atributos y pseudoclases CSS3 en Internet Explorer 6-8.
  • PIE permite que Internet Explorer reconozca y represente varias propiedades de decoración de cajas CSS3.

Otros

  • Proyecto Single Div – One «. Muchas posibilidades.
  • ¿Puedo usar? ? Compatibilidad del navegador con CSS, HTML5 y otras tecnologías web front-end.
  • Editor en vivo para CSS y LESS extensión Magic CSS para Chrome, Firefox y Edge.
  • Puede que no necesite JS alternativas de CSS para los componentes comunes de la interfaz de usuario de JS.
  • RevengeCSS un bookmarklet de CSS que utiliza selectores para encontrar un marcado incorrecto, mostrando feos mensajes de error de color rosa en cómic sans serif dondequiera que escriba HTML incorrecto
  • xpath-to-selector convierte xpath en selector css.

Podcasts 📻

Algo para escuchar mientras se programa.

  • Podcast de CSS Una Kravets y Adam Argyle, defensores de los desarrolladores de Google, dividen con alegría los aspectos complejos de CSS en episodios digeribles que cubren todo, desde la accesibilidad hasta el índice z.
  • Shop Talk Show un podcast en vivo con Chris Coyier y Dave Rupert sobre diseño web, desarrollo y experiencia de usuario.
  • Podcast de guías de estilo una pequeña serie de entrevistas sobre guías de estilo, presentada por Anna Debenham y Brad Frost.
  • The Big Web Show temas como publicación web, dirección de arte, estrategia de contenido, tipografía, tecnología web y más. Es todo lo que importa en la Web.
  • The Web Ahead – Conversaciones con expertos mundiales sobre tecnologías cambiantes y el futuro de la web.
  • Non Breaking Space Show en busca de las personas creativas mejores, más brillantes e inteligentes en el arte, el diseño y el desarrollo digitales.
  • El registro de cambios el lema del registro de cambios lo dice todo: “El código abierto se mueve rápido. Mantenga.» Este podcast, y el blog que lo acompaña, trata de mantenerlo actualizado con lo último en tecnología de código abierto.
  • Sintaxis un podcast de Tasty Treats para desarrolladores web.

Cuentas de Twitter 📡

Cuentas activas a seguir.

  • Animación CSS
  • Andrey Sitnik – Autor de @Autoprefixer, https://easings.net y @PostCSS.
  • Evangelina Ferreira – Diseñadora web. Profesor en @multimedial_utn HTML5 & CSS Freak. Traductor ocasional.
  • Sara Soueidan – Autora de @Codrops CSS Reference y coautora del Smashing Book # 5.
  • Hugo Giraudel – CSS goblin & Sass hacker en @edenspiekermann.
  • Guy Routledge – Desarrollador front-end, Profesor @GA_London, Screencaster en https://www.atozcss.com , snob inmobiliario, Foodie.
  • Heydon Pickering – Consumidor moderado de arroz. También diseñador de UX, autor, editor y programador de @smashingmag.
  • Adam Morse defensor de los usuarios y del código abierto.
  • Donovan Hutchinson – Diseñador, desarrollador, escritor. Ocasionalmente escribe blogs en https://Hop.ie y actualmente está creando @cssanimation.
  • Confirmaciones de CSS las últimas confirmaciones para el repositorio público de Mercurial de @ CSSWG.
  • Scott Jehl – Autor de @responsiblerwd, ahora a la venta en @abookapart.
  • Dudley Storey escritor, profesor y orador de desarrollo web.
  • Zoe M. Gillenwater – Diseñadora / desarrolladora web especializada en CSS, RWD, UX y accesibilidad.
  • Ben Briggs – Estudiante de último año de tecnologías web. node.js, javascript, módulos de código abierto, optimización del lado del cliente, rendimiento web.
  • Paul Lewis – Googler que adora el código y el diseño.
  • Nicolas Gallagher – Ingeniero de software en @twitter.
  • Harry Roberts – Arquitecto consultor de front-end: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, más.
  • Phil Walton – Ingeniero en Google • Defensor del código abierto • Desarrollador • Diseñador • Escritor.
  • Lea Verou – Asistente de investigación @MIT_CSAIL, @CSSWG IE, autora de @OReillyMedia, Ex @ W3C staff.
  • Manoela Ilic – … también conocida como Mary Lou @codrops ༶ CSS y HTML son mis crayones ༶ Interesada en ciencia cognitiva, IA, HCI, diseño de interfaz de usuario y astrofísica ༶ Nómada digital.
  • Una Kravets – Front-end @IBMDesign. Sassvocate, constructor de comunidades y artesano. STEMinist) De código abierto todas las cosas.
  • Chris Coyier – Diseñador @CodePen. Escritor @Real_CSS_Tricks.
  • Nicole Sullivan – friki.
  • Eric Bidelman ingeniero de Google que trabaja en Chrome, componentes web y Polymer.
  • Patrick Hamann – Amante de las montañas, las cervezas artesanales y el descubrimiento de nuevos alimentos.
  • Dave McFarland – Desarrollador web, autor de CSS: The Missing Manual, JavaScript y jQuery.
  • L. David Baron – Desarrollador de Mozilla, diplomático de estándares CSS y W3C.
  • Daniel Glazman – Copresidente del W3C CSS Working Group, emprendedor, ingeniero de software, geek, padre de dos hijos, políglota, amante de los patos. Nah. Los tweets son estrictamente míos.
  • Chris Eppstein ama el amor. Odia el odio. Tiene una familia increíble. Escribe código. Lidera la tecnología de hojas de estilo @LinkedIn.
  • 앗 킨스 탭 – Literalmente la mamá de Jenn Schiffer.
  • Natalie WeizenbaumCodificadora trans. Diseñador principal / desarrollador de @SassCSS, trabajando para @google en @dart_lang.
  • Brad Frost diseñador web, orador, escritor, consultor, músico.
  • Maxime Thirouin vigilante de front-end independiente, desarrollador de UI / UX.
  • Mark Otto – GitHub y Bootstrap. Anteriormente en Twitter. Un empollón enorme.
  • Simon diseñador de UI, doodler CSS.
  • Connor Sears – Diseñador en GitHub.
  • Remy Sharp todo sobre las unidades de tamaño CSS.
  • Jonathan Snook – Diseñador, desarrollador, escritor, orador. Hago cosas en la web. Escribí SMACSS.
  • Rachel Andrew – Desarrolladora web, mitad de @grabaperch CMS, Experta invitada del grupo de trabajo CSS.

Videos 📺

* Buenos videos de estudio de CSS Must Watch Videos. Algunos artículos se citan en AllThingsSmitty / must-watch-css .

Le dije en Twitter . Agradezco sus valiosos esfuerzos. *

2019

  1. Estilo web de próxima generación Una Kravets y Adam Argyle en Chrome Dev Summit 2019.

2016

  1. Reutilización de estilos basada en componentes 📄 transcripción37:24 – Pete Hunt @ CSS conf 2016.
  2. Cuadrícula CSS4: finalmente llega el verdadero diseño 📄 transcripción29:27 – Jen Kramer @ CSS conf 2016.
  3. Houdini: Desmitificando el futuro de CSS36:58 @ Google I / O 2016.

2015

  1. CSS mdo-ular30:06 – Mark Otto @ jQuery Reino Unido.
  2. Arquitectura CSS con SMACSS30:15 – Caleb Meredith @ canal DevTips.
  3. Flujo de trabajo CSS desde cero46:06 – Jonathan Snook @ Generate conf 2015.

Libros 📚

Tutoriales 🎬


ROSEPAC

Curador Digital y Redactor. Creador del Diario Ciberninjas. Asturiano amante de las nuevas tecnologías.