Cómo se hace
Frameworks CSS
| Framework | Desarolladores | Licencias | Sitios que lo usan | Pros | Cons |
|---|---|---|---|---|---|
| Bootstrap | Mark Otto, Jacob Thornton (desarrolladores de Twitter). - Twitter lo liberó en 2011 |
MIT |
https://www.creative-tim.com/blog/web-design/sites-built-with-twitter-bootstrap/ |
- Prototipado rápido - Grid de 12 columnas - "Mobile first", "responsive" - Gran ecosistema (layouts, temas, paneles, componentes,..) - Gran cantidad de componentes (Barras de navegación, formularios, tarjetas, barras de progreso, alertas,...) |
- Lo utilizan tantos sitios (diseño poco exclusivo) que empezarás a reconocerlos (mira las siguientes páginas) https://getbootstrap.com/docs/4.1/examples/ - Comunidad de usuarios muy grande. Eso es importante porque puedes encontrar mucha información en internet. |
| Materialize CSS | https://materializecss.com/showcase.html http://materialdesignblog.com/best-examples-of-corporate-websites-built-with-material-design/ https://index.woorank.com/en/reviews?technologies=materialize-css |
Material Design es un lenguaje de Diseño creado y desarrollado por Google. - fácil de usar porque viene con mucha documentación - Focalizado en UX (User experience) - Desarrollo rápido - Gran cantidad de componentes - Basada en Material Design de Google (https://material.io/design/introduction) |
- No permite utilizar Flexbox. - Se está volviendo muy común, por lo que habrá muchas páginas que se parezcan (diseño poco exclusivo). |
||
| Semantic UI | Jack Lukic | OpenSource | https://semantic-ui.com/usage/layout.html https://www.oschina.net http://pacyah.c3.imonggo.com https://secure.peakengine.com/Home/Login http://epaper.mundodeportivo.com https://index.woorank.com/en/reviews?technologies=semantic-ui |
- Utiliza nombres de clases semánticos (su nombre nos da pistas de lo que hacen) - Bien documentado - Diseño bonito |
- No es para desarrolladores principiantes que no tengan conocimientos de JavaScript - Tamaños de ficheros muy grandes - Ya no está mantenido |
| UIkit | YOOtheme | MIT | https://getuikit.com/v2/showcase/index.html https://index.woorank.com/en/reviews?technologies=uikit |
||
| Foundation | ZURB | MIT |
https://index.woorank.com/en/reviews?technologies=zurb-foundation |
- Muchas herramientas - Flexibilidad extrema (al contrario que Bootstrap) - Muchísimos componentes |
- Comunidad de usuarios más pequeña que la de Bootstrap. - Complejidad y demasiadas opciones: Para hacer cosas simples, Bootstrap es mejor. Con Foundation nos aparecen tantas opciones que nos podemos perder. |
| Pure-css | Yahoo BSD |
LearnPythonTheHardWay.org InnovAsianSpace.com https://index.woorank.com/en/reviews?criteria=ssl_secured&technologies=pure-css |
- Rápido para cargar - Mobile Friendly - Muy personalizable - Funciona bien con otros frameworks, incluso Bootstrap |
- No tiene tantos estilos como Bootstrap |
información obtenida de:
https://www.csshero.org/css-frameworks-use-comparing-5-popular-css-frameworks/
https://geekflare.com/best-css-frameworks/
https://www.slant.co/topics/3946/~bootstrap-alternatives
- Frameworks vs código puro
Sara Soueidan
Never used any frameworks, never will. Writing CSS from scratch is one of the best pleasures of building front-ends in my opinion.
https://twitter.com/SaraSoueidan/status/898234232195174400?s=20
Rachel Andrew
There is some amazing work out there in terms of polyfills, frameworks and libraries. However you don’t have to use them, and in many cases won’t need to use them
https://www.rachelandrew.co.uk/archives/2012/03/21/stop-solving-problems-you-dont-yet-have/
Ethan Marcotte
all css frameworks seem to expand until they offer web hosting
https://twitter.com/beep/status/591228268918902785?s=20
Portfolio de Ejemplo
| Nombre | Foto | Información personal | Blog y páginas relacionadas | Youtube | ||
|---|---|---|---|---|---|---|
| Sara Soueidan |  |
//www.sarasoueidan.com/about/ I have a Bachelor’s Degree in Computer Sciences; but everything I know of and on the Web today is self-taught |
https://www.sarasoueidan.com/blog/ Non rectangular layouts |
https://twitter.com/SaraSoueidan | ||
| Ethan Marcotte (Responsive Design) |
 |
https://ethanmarcotte.com I’m also the fellow who started that whole “responsive design” thing. |
https://ethanmarcotte.com/books/ | https://twitter.com/beep | ||
| Abby Covert |  |
https://abbycovert.com I make the unclear, be clear. |
https://abbycovert.com/writing/ | https://twitter.com/Abby_the_IA | ||
| Rachel Andrew |  |
https://rachelandrew.co.uk/about/
I am Editor in Chief of Smashing Magazine, a Member of The CSS Working Group, and the W3C representative for Fronteers; |
|
https://twitter.com/rachelandrew | https://www.youtube.com/channel/UCJ0_R6U3ZClQDGpVJNjuPAQ | |
| Chris Coyier |  |
https://chriscoyier.net I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 10 years. |
https://chriscoyier.net/blog/ https://css-tricks.com |
https://twitter.com/chriscoyier | https://www.youtube.com/channel/UCADyUOnhyEoQqrw_RrsGleA | |
| Dan Cederholm |  |
|
https://twitter.com/simplebits | |||
| Jeffrey Zeldman |  |
http://www.zeldman.com/about/>
Jeffrey Zeldman: King of Web Standards (The Web Standards Project) |
https://alistapart.com | https://twitter.com/zeldman https://twitter.com/AListApart |
||
| Simon Collyson |  |
https://colly.com/about I believe strongly that designers should care for the arts and humanities, and draw from a vast array of diverse inputs and experiences. I also think digital tools can be a force for good; that they have much to offer in connecting us to the beauty all around us. |
https://colly.com/articles | https://twitter.com/colly | ||
| Veerle Pieters |  |
https://veerle.duoh.com Nurture your creativity! Please sit back and soak in all the gorgeous visuals I discover as I explore print design, photography, illustration, type, and more. Updated weekly, this rich resource reflects my true nature: I'm a color-lover at heart. All color palettes are downloadable as Adobe Swatch Exchange (.ase) files. |
https://veerle.duoh.com/design | https://twitter.com/vpieters | ||
| Luke Wroblewski |  |
https://www.lukew.com/about/ Luke is currently a Product Director at Google. Earlier he was the CEO and Co-founder of Polar (acquired by Google in 2014) and the Chief Product Officer and Co-Founder of Bagcheck (acquired by Twitter in 2011). |
https://www.lukew.com/ff/ | https://twitter.com/lukew | ||
| Farai Madzima |  |
https://faraimadzima.com 👋🏾 I'm Farai Madzima, a Zimbabwean UX designer, manager, conference organiser, and speaker living in Canada. Interaction designI hang with the logistics experience design leadership team at Shopify, where we’re building next-generation ecommerce tools that make commerce easier for everyone. In a past life, in South Africa, I led the experience design team at Standard Bank Group, Africa's largest bank. |
||||
| Tiffany Eaton |  |
https://tiffanyeaton.com Quote from her article, “Design works around the content. The content is what users need to help achieve their goals and it is what breathes life into the design. Designers, UX writers, and content strategists are the stewards to curating and making that content accessible.” |
https://medium.com/@tiffanyeaton | https://twitter.com/reatiffanyeaton |
||
| Jason Kottke |  |
I love the Web. I discovered it in college in 1994 and have been designing, programming, and writing online like my life depends on it ever since. | https://kottke.org/about/ | https://twitter.com/jkottke1 | ||
| Diana Adrianne Smith |  |
https://diana-adrianne.com/ Quote from her article, “Design works around the content. The content is what users need to help achieve their goals and it is what breathes life into the design. Designers, UX writers, and content strategists are the stewards to curating and making that content accessible.” |
 |
https://twitter.com/cyanharlow?lang=es |