5 ms·

Besides Bootstrap what frameworks and or tools are the hipsters using for designing & building web apps & sites instead?

misframer 9y ago
I started using Pure. https://purecss.io/ https://purecss.io/
forlorn 9y ago
Tachyons is pure joy! http://tachyons.io/ http://tachyons.io/
kohanz 9y ago
https://bulma.io/ https://bulma.io/ (just on a side-project so far)
- glownshow 9y ago
  i love bulma as Well. it is a no brainer css framework
jannejava 9y ago
Tailwind: https://tailwindcss.com https://tailwindcss.com Bulma: https://bulma.io https://bulma.io
graedus 9y ago
I don't think it rates as "hipster", but Foundation works fine. https://foundation.zurb.com/ https://foundation.zurb.com/
- glownshow 9y ago
  Check out bulma, you wont regret.
  - Raphmedia 9y ago
    What does it offer that Zurb's Foundation don't? I quickly went through their docs and saw nothing new or magic.
    - glownshow 9y ago
      Class names and modifiers are easy to memorize. Small size. Check bulma.io expo. You will see the lovely pages made with bulma
    - k__ 9y ago
      maybe it's smaller?
gbugniot 9y ago
Brutalist design http://brutalistwebsites.com http://brutalistwebsites.com
- mrisoli 9y ago
  I've seen Brutalist design being mentioned a few times here and it always shows this website gallery, I am no specialist, so I wonder, is this what brutalist design really is? Quick Google search explains that brutalist architecture is about creating modular elements representing specific functionality often sacrificing aesthetics. A lot of the sites on that gallery are ugly just for being ugly, they have no functionality and use different types of animations or constructs to just make something unconventional from common website aesthetics, I get why, but it feels like the word brutalist was borrowed here and is applied in a very different way.
  - tzahola 9y ago
    This is not brutalism. It’s more like dada.
  - brador 9y ago
    Brutalism is features before design. A cement tower block is an example in architecture. http://skimfeed.com http://skimfeed.com is an example of a website that follows brutalist ideals. Early craigslist and early search engines are good examples too.
    - mrisoli 9y ago
      I agree and this is what I consider to be brutalist web design, but that site(the top search result for 'brutalist websites', 'brutalist design', 'brutalist web' and so on) has a bunch of weird designs(such as http://www.xtragear.services/ http://www.xtragear.services/ ), which is the source of my confusion.
- tzahola 9y ago
  These look like they were made by a Starbucks barista with a graphic design “degree” and 100k in debt. In other words, ugly and pretentious. Yeah I know, I don’t get it.
atonse 9y ago
I like a lot of these but personally bootstrap has inertia going for it. I have a dozen projects that use Bootstrap and it just feels like a lot of work to change that paradigm now for one solitary project. 22 year old me: "Man you sound old."
paxy 9y ago
"Frameworks and tools" is a very broad category. Check out React, Angular and Vue if you're looking beyond design/CSS.
statico 9y ago
I've tried MiniCSS[1] (which styles your default HTML without adding too many classes and has themes) and MUI[2] (Material UI styles). Both are decent, but I keep falling back to Bootstrap v4 because Bootstrap just gets a lot of sizing and padding right. With other frameworks I'm constantly adding new rules just to add a bit of padding and margin here and there, but Bootstrap 4 gets a lot of it right by default. Plus it now has a lot of useful utility classes for small padding increments (e.g. `.mb-3` for `margin-bottom: 1.5rem` and `.px-2` for horizontal padding of 1rem). With Bootstrap 4, a previous project required only 10-ish lines of global CSS[3]. Sure, it looks and feels like a Bootstrap project, but that was fine for the purpose of the app, and Bootstrap 4 looks fresh enough that I don't feel like the design is outdated. FWIW, I've also had a lot of luck recently with Material-UI[4], a set of React components that implement the Material UI aesthetic. My current project feels like it could fit in with any Google app from G Suite. [1]: https://minicss.org/ https://minicss.org/ [2]: https://www.muicss.com/ https://www.muicss.com/ [3]: https://github.com/statico/aspen/blob/master/pages/index.js#L118-L136 https://github.com/statico/aspen/blob/master/pages/index.js#... [4]: https://material-ui-next.com/ https://material-ui-next.com/
Jaepa 9y ago
I'm a fan of spectre(https://picturepan2.github.io/spectre/getting-started.html https://picturepan2.github.io/spectre/getting-started.html). There is also: - UiKit - https://getuikit.com https://getuikit.com - Bulma - https://bulma.io/ https://bulma.io/ - Sematic - https://semantic-ui.com/ https://semantic-ui.com/ NOTE: I'm not a front end person, have used a couple of these for various personal projects.
- temuze 9y ago
  Worth mentioning that Semantic has some first-rate React bindings: https://react.semantic-ui.com/ https://react.semantic-ui.com/ They're really a joy to work with. My one beef with Semantic is that it could be easier to make themes. I know that someone is currently working on a theme generator site like Bootstrap and hopefully that will be a nice step forward.
  - mjmein 9y ago
    I was just looking at semantic-ui-react, and it looked great. But then I tested their examples on my mobile phone and it looked really bad. It just seemed that it wasn't responsive at all, which really surprised me.
proyb2 9y ago
https://codepen.io https://codepen.io to search for tips and tricks which you probably never knew you could do more than Bootstrap, Tailwind, Bulma, etc.
achairapart 9y ago
Basscss[0] + some add-ons[1], everything you need in ~5Kb. [0]: http://basscss.com/ http://basscss.com/ [1]: https://github.com/basscss/addons https://github.com/basscss/addons
pookeh 9y ago
There's also AntD: https://ant.design/ https://ant.design/ Check the links at the bottom of that site for more addons (such as this: http://motion.ant.design/ http://motion.ant.design/)
tabeth 9y ago
I really like Tachyons. Not being tied down to global styles is so nice. The downside though, is that anytime you make something you have to redo all the styles. I find this not to be a huge deal, though since you can just turn them into components.
atoko 9y ago
I’m finding the wix style guide very useful, because it provides baytle tested components for atomic elements (buttons, dropdowns, checkboxes) without imposing an overreaching design on you. (But still provides layout components) https://github.com/wix/wix-style-react https://github.com/wix/wix-style-react

misframer 9y ago

I started using Pure. https://purecss.io/ https://purecss.io/

forlorn 9y ago

Tachyons is pure joy! http://tachyons.io/ http://tachyons.io/

kohanz 9y ago

https://bulma.io/ https://bulma.io/ (just on a side-project so far)

glownshow 9y ago
i love bulma as Well. it is a no brainer css framework

jannejava 9y ago

Tailwind: https://tailwindcss.com https://tailwindcss.com Bulma: https://bulma.io https://bulma.io

graedus 9y ago

I don't think it rates as "hipster", but Foundation works fine. https://foundation.zurb.com/ https://foundation.zurb.com/

glownshow 9y ago
Check out bulma, you wont regret.
- Raphmedia 9y ago
  What does it offer that Zurb's Foundation don't? I quickly went through their docs and saw nothing new or magic.
  - glownshow 9y ago
    Class names and modifiers are easy to memorize. Small size. Check bulma.io expo. You will see the lovely pages made with bulma
  - k__ 9y ago
    maybe it's smaller?

gbugniot 9y ago

Brutalist design http://brutalistwebsites.com http://brutalistwebsites.com

mrisoli 9y ago
I've seen Brutalist design being mentioned a few times here and it always shows this website gallery, I am no specialist, so I wonder, is this what brutalist design really is? Quick Google search explains that brutalist architecture is about creating modular elements representing specific functionality often sacrificing aesthetics. A lot of the sites on that gallery are ugly just for being ugly, they have no functionality and use different types of animations or constructs to just make something unconventional from common website aesthetics, I get why, but it feels like the word brutalist was borrowed here and is applied in a very different way.
- tzahola 9y ago
  This is not brutalism. It’s more like dada.
- brador 9y ago
  Brutalism is features before design. A cement tower block is an example in architecture. http://skimfeed.com http://skimfeed.com is an example of a website that follows brutalist ideals. Early craigslist and early search engines are good examples too.
  - mrisoli 9y ago
    I agree and this is what I consider to be brutalist web design, but that site(the top search result for 'brutalist websites', 'brutalist design', 'brutalist web' and so on) has a bunch of weird designs(such as http://www.xtragear.services/ http://www.xtragear.services/ ), which is the source of my confusion.
tzahola 9y ago
These look like they were made by a Starbucks barista with a graphic design “degree” and 100k in debt. In other words, ugly and pretentious. Yeah I know, I don’t get it.

atonse 9y ago

I like a lot of these but personally bootstrap has inertia going for it. I have a dozen projects that use Bootstrap and it just feels like a lot of work to change that paradigm now for one solitary project. 22 year old me: "Man you sound old."

paxy 9y ago

"Frameworks and tools" is a very broad category. Check out React, Angular and Vue if you're looking beyond design/CSS.

statico 9y ago

I've tried MiniCSS[1] (which styles your default HTML without adding too many classes and has themes) and MUI[2] (Material UI styles). Both are decent, but I keep falling back to Bootstrap v4 because Bootstrap just gets a lot of sizing and padding right. With other frameworks I'm constantly adding new rules just to add a bit of padding and margin here and there, but Bootstrap 4 gets a lot of it right by default. Plus it now has a lot of useful utility classes for small padding increments (e.g. `.mb-3` for `margin-bottom: 1.5rem` and `.px-2` for horizontal padding of 1rem). With Bootstrap 4, a previous project required only 10-ish lines of global CSS[3]. Sure, it looks and feels like a Bootstrap project, but that was fine for the purpose of the app, and Bootstrap 4 looks fresh enough that I don't feel like the design is outdated. FWIW, I've also had a lot of luck recently with Material-UI[4], a set of React components that implement the Material UI aesthetic. My current project feels like it could fit in with any Google app from G Suite. [1]: https://minicss.org/ https://minicss.org/ [2]: https://www.muicss.com/ https://www.muicss.com/ [3]: https://github.com/statico/aspen/blob/master/pages/index.js#L118-L136 https://github.com/statico/aspen/blob/master/pages/index.js#... [4]: https://material-ui-next.com/ https://material-ui-next.com/

Jaepa 9y ago

I'm a fan of spectre(https://picturepan2.github.io/spectre/getting-started.html https://picturepan2.github.io/spectre/getting-started.html). There is also: - UiKit - https://getuikit.com https://getuikit.com - Bulma - https://bulma.io/ https://bulma.io/ - Sematic - https://semantic-ui.com/ https://semantic-ui.com/ NOTE: I'm not a front end person, have used a couple of these for various personal projects.

temuze 9y ago
Worth mentioning that Semantic has some first-rate React bindings: https://react.semantic-ui.com/ https://react.semantic-ui.com/ They're really a joy to work with. My one beef with Semantic is that it could be easier to make themes. I know that someone is currently working on a theme generator site like Bootstrap and hopefully that will be a nice step forward.
- mjmein 9y ago
  I was just looking at semantic-ui-react, and it looked great. But then I tested their examples on my mobile phone and it looked really bad. It just seemed that it wasn't responsive at all, which really surprised me.

proyb2 9y ago

https://codepen.io https://codepen.io to search for tips and tricks which you probably never knew you could do more than Bootstrap, Tailwind, Bulma, etc.

achairapart 9y ago

Basscss[0] + some add-ons[1], everything you need in ~5Kb. [0]: http://basscss.com/ http://basscss.com/ [1]: https://github.com/basscss/addons https://github.com/basscss/addons

pookeh 9y ago

There's also AntD: https://ant.design/ https://ant.design/ Check the links at the bottom of that site for more addons (such as this: http://motion.ant.design/ http://motion.ant.design/)

tabeth 9y ago

I really like Tachyons. Not being tied down to global styles is so nice. The downside though, is that anytime you make something you have to redo all the styles. I find this not to be a huge deal, though since you can just turn them into components.

atoko 9y ago

I’m finding the wix style guide very useful, because it provides baytle tested components for atomic elements (buttons, dropdowns, checkboxes) without imposing an overreaching design on you. (But still provides layout components) https://github.com/wix/wix-style-react https://github.com/wix/wix-style-react