[DeepDive] Styling: CSS Frameworks, Icons, Design Systems, etc

[0xdevalias]

SASS

• https://sass-lang.com/
  • https://sass-lang.com/guide
  • https://sass-lang.com/blog/
  • https://sass-lang.com/blog/the-module-system-is-launched

CSS

Custom Properties (aka: CSS Variables)

• https://developer.mozilla.org/en-US/docs/Web/CSS/--*

  • Custom properties (--*): CSS variables

• https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608
  • https://github.com/danbahrami/react-custom-properties

  • A React component for applying CSS Variables (Custom Properties)

Frameworks

• https://github.com/troxler/awesome-css-frameworks
• https://www.mockplus.com/blog/post/css-framework
  • Bootstrap, Foundation, Pure, Bulma, Semantic UI, UI Kit, Materialize CSS, Milligram, Skeleton, Tailwind CSS, Spectre, Base, Picnic CSS, Mustard UI, Dead Simple Grid, etc

Bootstrap

• https://getbootstrap.com/
  • https://getbootstrap.com/docs/4.2/components/forms/#switches
  • https://stackoverflow.com/questions/55593229/increasing-the-size-of-a-bootstrap-checkbox

Foundation

• https://get.foundation/
  • https://get.foundation/sites/docs/
  • https://get.foundation/sites/docs/switch.html
• https://github.com/foundation/foundation-sites

Bulma

• https://bulma.io/
  • https://github.com/jgthms/bulma
• https://bulma.io/extensions/
  • https://github.com/Wikiki/bulma-extensions
  • https://wikiki.github.io/
  • https://wikiki.github.io/form/switch/
    • https://github.com/Wikiki/bulma-switch/
• https://react-bulma.dev/en
  • https://github.com/couds/react-bulma-components

Icons

• https://icons.getbootstrap.com/
  • https://github.com/twbs/icons
• https://fontawesome.com/
• https://useiconic.com/
  • https://useiconic.com/open
  • https://github.com/iconic/open-iconic

Design Systems

Bugcrowd

• https://bugcrowd.design/
  • https://bugcrowd.design/forms/index.html#switch-input

Unsorted

• https://github.com/necolas/normalize.css
• https://github.com/sindresorhus/modern-normalize
• Select Components
  • https://react-select.com/
  • https://react-select.com/props
  • https://react-select.com/styles
  • https://react-select.com/advanced
  • https://github.com/jedwatson/react-select
• https://downshift.netlify.app/
  • https://github.com/downshift-js/downshift