3 ms·

Do you use a library for Material Design theme? Any books or tutorials that you considered very helpful to tackle the UI side of the development? (front-end, c

Do you use a library for Material Design theme? Any books or tutorials that you considered very helpful to tackle the UI side of the development? (front-end, chrome extension, etc)

SeanAnderson 12y ago
Nope! No library for material design. I wrote all my CSS from scratch and have never done any major UI development before this. It was a huge learning experience for me! Seriously, I used to really suck at UI: http://imgur.com/a/CH2T2 http://imgur.com/a/CH2T2 The most challenging aspect of designing a browser extension is that you really get the raw end of both worlds. It's not a mobile device. No thumbs at the bottom of the screen, no swiping, etc. However, it's not a website, either, so not a lot of screen real-estate to work with. References included: - http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti... (99% of ideas from here) - https://www.polymer-project.org/components/paper-elements/demo.html#paper-checkbox https://www.polymer-project.org/components/paper-elements/de... - http://materializecss.com/ http://materializecss.com/ - http://fezvrasta.github.io/bootstrap-material-design/ http://fezvrasta.github.io/bootstrap-material-design/ - https://dribbble.com/shots/1795733-Spotify-Material-Design-Concept/attachments/295885 https://dribbble.com/shots/1795733-Spotify-Material-Design-C... The icon set I used can be found on GitHub, provided by Google: http://google.github.io/material-design-icons/ http://google.github.io/material-design-icons/ I did some custom modifications to the icons to size them properly for my extension using InkScape, https://inkscape.org/en/ https://inkscape.org/en/, and the PixelSnap plugin, https://code.google.com/p/pixelsnap/ https://code.google.com/p/pixelsnap/
- edwinnathaniel 12y ago
  Hey Sean, Awesome work + learning experience. Thank you very much for sharing. By the way, your v1 screenshot looks like you have some experience in HTML/CSS/JS. I'm literally a big zero when it comes to UI. I know JS/HTML and can hack my way around CSS but most of the time these kind of works are not from scratch.
  - SeanAnderson 12y ago
    Well, CSS is pretty crazy and a lot of the rules don't make sense until you have a full grasp of it. You're only going to get that by hacking at it. https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06 https://medium.com/@fat/mediums-css-is-actually-pretty-fucki... I used this article to really refine my coding practices for CSS. I basically re-wrote all of Streamus' CSS from the ground up using this guideline and then tweeted @fat with questions when I got stuck. Not sure if that helps!

Do you use a library for Material Design theme? Any books or tutorials that you considered very helpful to tackle the UI side of the development? (front-end, chrome extension, etc)

SeanAnderson 12y ago

Nope! No library for material design. I wrote all my CSS from scratch and have never done any major UI development before this. It was a huge learning experience for me! Seriously, I used to really suck at UI: http://imgur.com/a/CH2T2 http://imgur.com/a/CH2T2 The most challenging aspect of designing a browser extension is that you really get the raw end of both worlds. It's not a mobile device. No thumbs at the bottom of the screen, no swiping, etc. However, it's not a website, either, so not a lot of screen real-estate to work with. References included: - http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti... (99% of ideas from here) - https://www.polymer-project.org/components/paper-elements/demo.html#paper-checkbox https://www.polymer-project.org/components/paper-elements/de... - http://materializecss.com/ http://materializecss.com/ - http://fezvrasta.github.io/bootstrap-material-design/ http://fezvrasta.github.io/bootstrap-material-design/ - https://dribbble.com/shots/1795733-Spotify-Material-Design-Concept/attachments/295885 https://dribbble.com/shots/1795733-Spotify-Material-Design-C... The icon set I used can be found on GitHub, provided by Google: http://google.github.io/material-design-icons/ http://google.github.io/material-design-icons/ I did some custom modifications to the icons to size them properly for my extension using InkScape, https://inkscape.org/en/ https://inkscape.org/en/, and the PixelSnap plugin, https://code.google.com/p/pixelsnap/ https://code.google.com/p/pixelsnap/

edwinnathaniel 12y ago
Hey Sean, Awesome work + learning experience. Thank you very much for sharing. By the way, your v1 screenshot looks like you have some experience in HTML/CSS/JS. I'm literally a big zero when it comes to UI. I know JS/HTML and can hack my way around CSS but most of the time these kind of works are not from scratch.
- SeanAnderson 12y ago
  Well, CSS is pretty crazy and a lot of the rules don't make sense until you have a full grasp of it. You're only going to get that by hacking at it. https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06 https://medium.com/@fat/mediums-css-is-actually-pretty-fucki... I used this article to really refine my coding practices for CSS. I basically re-wrote all of Streamus' CSS from the ground up using this guideline and then tweeted @fat with questions when I got stuck. Not sure if that helps!