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

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:

• CSS – MDN – Mozilla
• Reddit (CSS)
• StackOverflow (CSS)

? Cursos Gratis de CSS / ? Libros Gratis de CSS / ? 85 Geniales Recursos CSS Gratuitos

Borradores ✒️

Borradores del editor de especificaciones CSS

• Borradores de CSS Repositorio de borradores del editor de CSS WG.
• Borradores de CSS Houdini Repositorio de Houdini WG Editor.

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

• Arquitectura CSS de Bugsnag por Max Lustre
• CSS en BBC Sport por Shaun Bent
• CSS EN HOOTSUITE por Steve Mynett
• CSS de GitHub por Mark Otto
• Cómo hacemos CSS en Ghost por Paul Davis
• Lonely Planet de Ian Feather
• El CSS de Medium es bastante bueno. por Jacob Thornton
• lista-de-lectura-CSS-escalable
• Refinando la forma en que estructuramos nuestro CSS en Trello por Bobby Grace

Directrices de estilo de código ?

• CSS idiomático de Nicolas Gallagher
• Guía de estilo CSS de Guilherme Rv Coelho
• Directrices CSS de Harry Roberts
• Directrices Sass por Hugo Giraudel
• Guía de códigos de Mark Otto
• Guía de estilo CSS de ThinkUp de ThinkUp
• Guía de estilo HTML / CSS de Google de Google
• Estándares de codificación CSS de WordPress de WorldPress

Guías de estilo

• AUI por Atlassian Design
• Elementos de diseño de lonely planet
• Guía de estilo CSS de Dropbox (S) de Dropbox
• Interfaz de usuario fluida de Microsoft
• Guía de estilo CSS de GitHub de Github
• Guía oficial de Trello CSS por Bobby Grace
• Solid de BuzzFeed
• Patrones de MailChimp
• Sistema de diseño de iluminación de Salesforce
• Guía de estilo de SASS por el equipo de Sass
• Guía de estilo de Starbucks
• Recursos de la guía de estilo del sitio web de personas increíbles

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

Generadores de guías de estilo ?

• Holograma
• mdcss
• Fuente
• styledoc
• styledocco
• estilo abajo
• guía de estilo sc5

Convenciones de nomenclatura y metodologías ?

• OOBEMITSCSS atómico
• BEM
• Point North
• ITCSS
• OOCSS
• Título CSS
• idiomático-css
• Diseño atómico
• SUIT CSS
• CSS de inicio
• Mantenible CSS
• NCSS
• RSCSS

CSS en JS

• Afrodita
• babel-plugin-css-in-js
• Classy
• csjs
• CSS Loader
• JSS
• React con Estilo
• React con Estilos
• styled-jsx
• Styled Components
• Stylin

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.
• prefixfree – Libé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 Weizenbaum – Codificadora 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ón ⌚ 37:24 – Pete Hunt @ CSS conf 2016.
2. Cuadrícula CSS4: finalmente llega el verdadero diseño ? transcripción ⌚ 29:27 – Jen Kramer @ CSS conf 2016.
3. Houdini: Desmitificando el futuro de CSS ⌚ 36:58 @ Google I / O 2016.

2015

1. CSS mdo-ular ⌚ 30:06 – Mark Otto @ jQuery Reino Unido.
2. Arquitectura CSS con SMACSS ⌚ 30:15 – Caleb Meredith @ canal DevTips.
3. Flujo de trabajo CSS desde cero ⌚ 46:06 – Jonathan Snook @ Generate conf 2015.

Libros ?

• Secretos de CSS mejores soluciones para los problemas cotidianos de diseño web
• CSS: The Missing Manual – Realmente útil para hacer avanzar sus habilidades de diseño a un nivel completamente nuevo
• CSS: La guía definitiva, cuarta edición – Presentación visual para la web
• Cada diseño: vuelva a aprender el diseño CSS: resuelva problemas de diseño receptivo utilizando un diseño algorítmico.

Tutoriales ?

• CSS Diner tutorial interactivo gamificado para aprender a seleccionar con CSS.
• CSS Grid PlayGround tutorial sencillo para aprender CSS Grid de Mozilla.
• Trabajar con animaciones inspección de animaciones.
• Recursos CSS seleccionados por la comunidad los principales recursos recomendados.
• 30 segundos de CSS una colección curada de fragmentos de CSS útiles que puede comprender en 30 segundos o menos.
• Organice CSS con una arquitectura modular: OOCSS, BEM, SMACSS – Introducción en profundidad a OOCSS, BEM, SMACSS, con ejemplos.
• Video tutorial de Flexbox curso en video gratuito de Wes Bos para aprender flexbox.
• Video tutorial de CSS Grids – Curso de vídeo gratuito de Wes Bos para aprender CSS Grids.