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

por

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.
  • 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 ?

Tutoriales ?

Relacionado

Zona de pruebas y prácticas de Tailwind CSS

Un campo de juego en línea avanzado para Tailwind CSS, que incluye soporte para cosas como: Personalización de tu archivo tailwind.config.js Extraer clases con @apply Finalización de código con vista previa instantánea Perfecto para aprender cómo funciona el framework de Tailwind CSS y crear un prototipo de una nueva idea o crear una demostración para compartir en línea. PROBAR EL PLAYGROUND DE TAILWIND CSS PLAY

The best Udemy courses in August, only for 9.99 $

Los mejores cursos en inglés y en oferta, hasta el día 27. Los cursos incluidos aquí son todos en inglés. Revisa por aquí, entre los mejores cursos en oferta de Udemy de Agosto en español, si lo que deseas son cursos en español. Si por desgracia, no tienes la oportunidad de acceder a comprar alguno de los excelentes cursos que te mostraré a continuación. Siempre puedes ¡SEGUIR LEYENDO!

Pequeño truco para alinear a la izquierda los elementos de la última fila con Flexbox

Si adoras trabajar con Flexbox, probablemente hayan encontrado en el pasado el problema de los elementos en la última fila que no se comportan del todo bien. Lo que significa que no tienen una alineación a la izquierda. Bueno, hay una manera muy simple de tener una alineación izquierda perfecta con una propiedad html simple: aria-hidden Esta propiedad indicará que tanto el elemento como sus hijos ¡SEGUIR LEYENDO!

Palabras más usadas en cada lenguaje de programación

Nube de palabras más usadas dentro de los lenguajes de programación Javascript, React, CSS, HTML, Java, Python, Lua, PHP, Ruby, C+, Perl, C#, Scala, Go, SQL, Rust, Lisp, Clojure, Kotlin, CMake, Swift, Haskel, Elixir, Objective C, F#, Elm, PureScript, Pascal, R, Erlang, VimL, Groovy. Los datos han sido extraídos de los diferentes repositorios de Github. Nube de Palabras de Javascript Insertar Javascript ⛓ Conocer Palabras Nube ¡SEGUIR LEYENDO!

Nunca ha existido un mejor momento para crear sitios web

Este artículo es una traducción completa de There’s never been a better time to build websites del blog de SimeonGriggs Mi historia del origen del desarrollo web se remonta a hace unos 25 años. En ese entonces pasé mis semanas jugando Red Alert, hasta el fin de semana cuando pude reservar 30 minutos de acceso a Internet en mi biblioteca local. Andaría en bicicleta tomando un ¡SEGUIR LEYENDO!