Bootstrap vs any other CSS framework

[JeevanisM]

Hey lads,

I heavily rely on BS for any kind of frontend design work, I find it very powerful and dynamic for the purpose. Over these years, I somehow feel that, there is not much I can get from BootStrap, and its more like all of my websites look same because of this BootStrap.  What about you all  ? any BS fans ? or any other CSS framework you love ? why  ?

[3fingers]

I was a fan of Uikit (the same framework used in the PW backend) but nowadays I write all my css by myself, for the same reason you've mentioned above (using a framework is a tempting way to use default styles an call it a day). Even though I've not used the the new kid on the block (Tailwind, which claims to be "unopinionated", but I do not agree with that statement) I just prefer to be organized upfront with my scss partials and be consistent with styles during the prototype/design phase.

[Zeka]

I'm still mostly on Foundation, but use it more like Sass mixins library with custom classes based on BEM naming methodology and js plugins. There are several 'Cons'  - jQuery dependency and uncertainty in further development as the project is maintained and developed by volunteers, there are not so many people from ZURB involved anymore, though there was first community-based release in December.

[gebeer]

Since modern browsers support flex and grid and most CSS3 specs, I also moved from using frameworks like BS to setting up things manually with my own, reusable scss partials and the JS libs that I need for a project. Also trying to move more and more to vanilla JS and kick jQuery. This way I get more streamlined assets. If I need to support old browsers (mainly IE11), I write some specific extra CSS to cater for them if need be.

[elabx]

I like UIKit because it just has all the js thingies bloat that 90% of clients/agencies always want on their sites: slider, slideshow, cover images with <img>, vieport height utilities, etc. What I don't like in the most recent version is that I can't apparently leave out the Js of components I am not using. I've also become very keen on using it with the Less PHP compiler to quickly make edits to the core components (and actually cherry pick the css I want to include, unlike the js)

I've recently used bootstrap on some projects and REALLY like their utilities for padding margins and them being also responsive which is where they have a big upper hand to UIkit I feel. 

[Pixrael]

I use BS all the time and my websites never look the same. I change everything I need, it's very easy to use SASS, and its grid and utilities classes are great. Maybe the sites look the same because you/they leave it with the "out of the box" style and layouts. You simply adjust colors, borders, sizes, spaces, fonts, icons, shadows, pictures, backgrounds, etc. and create designs/layouts in a creative/useful way and that's it. But never ever copy and paste the examples and start throwing code on it... and this will happen with any framework you use. You should always start with a good (useful) design of the page, without thinking about its implementation and then use BS or any other tool to do it as it was designed, as simple as that.
PS: Ah.. I forgot.. I'm a graphic designer LOL

[teppo]

Tailwind user here!

I'd definitely recommend checking Tailwind out. Where it really shines, in my opinion, is any kind of rapid development / fast prototyping: add a bit of (semantic) HTML and sprinkle it with a bunch of classes and you'll have a good looking site in no time. One downside, though, is that when you're building something really big, it can easily get out of hand unless you set some ground rules / constraints for yourself in terms of how many spacing variations, colours, etc. you're going to use.

If you don't, you're going to end up with an end product that looks inconsistent, is a lot of work to maintain/refactor, etc. ?

Quote

Tailwind, which claims to be "unopinionated", but I do not agree with that statement

As a matter of fact Tailwind is unopinionated: the framework doesn't come with any pre-built components, so it's entirely up to you what you build with it. Only features in Tailwind that could be considered somewhat opinionated would be things like the default colour palette, shadow styles, spacings, etc... but you can easily override all that. And for those who actually prefer pre-built components, there's a new (commercial) project just being launched called Tailwind UI, which is essentially a library consisting of hundreds of Tailwind based front-end components ?

(Also: https://tailwindcomponents.com/. That's the free alternative / predecessor to Tailwind UI.)

... although, all that being said: for my personal projects I've mostly preferred vanilla CSS/JS and a BEM(-ish) structure. Nice and simple ?‍♂️

Back in the day I used to be a big fan of Foundation, but nowadays I find that type of framework mostly a nuisance. Basic things like grids are by now (mostly) solved in CSS, so unless you're intending to use the out-of-the-box components provided by the framework to dictate how you build your front-end, I don't see much sense in going that way. To each their own, though; this sort of thing is largely a matter of taste and habit ?

[rafaoski]

I recommend the modern CodyFrame framework, and the main reason is that it has separate elements, i.e. you add to the page what you need as Components, so there is no mess in the code, and the page should load faster, the size of the files will not be huge, yes as in most major CSS frameworks. There are also other reasons, such as the Global Editor ( GLOBALS ), thanks to which your website will not look like hundreds of others based on the same CSS frameworks (you can customize many elements such as colors, typography, buttons, forms ).
Plus many basic Tutorials that you can start with. You can also see this Site Profile, which can be a good start to familiarize yourself with this framework.
 

[dragan]

I only ever use BS or Foundation just for the grid, mixins and helper / utility classes (.visuallyhidden et al) + normalize (S)CSS. There's nothing wrong with it, and I don't understand people who claim that "every site built with BS looks the same" (or that is has to). It's just a tool. It doesn't dictate anything.

As for components, I'm cherry-picking and choose the "best in class" (e.g. PhotoSwipe for lightboxes, Flying Focus) or build my own. An accordion or tab component is a trivial thing to build, and at some point (if you have a very custom design) it's easier than tweaking an existing solution. But of course - it all depends... on budget, deadlines etc.

[arjen]

4 hours ago, teppo said:

As a matter of fact Tailwind is unopinionated: the framework doesn't come with any pre-built components, so it's entirely up to you what you build with it.

Reminds me of a particular CMS ?

4 hours ago, teppo said:

One downside, though, is that when you're building something really big, it can easily get out of hand unless you set some ground rules / constraints for yourself in terms of how many spacing variations, colours, etc. you're going to use.

This is equally true when using BEM-like methods. Even if you are using content-agnostic components (hint) it is very hard to maintain CSS in large projects. Especially in teams where more devs are involved. With the rise and rise of Vue and React this becomes somewhat more manageable if you scope your css to your component, but still...

That being said: I'm currently working on a large project for myself and I am speeding up my development flow faster than I could imagine using Tailwind. And I used to be anti concering utility classes ?.

[rick]

I guess I go about things backwards. ?

I design the front-end based on content and what features are required, then I select the css framework that best suits it. Meaning, I'm lazy, and pick one where I have the least amount of work to do. I mostly use bootstrap, but have been using w3css with the past couple of projects.

[psy]

I used Canvas HTML theme which overlaid Bootstrap then added my own customisations which often overrode the Canvas theme CSS which overrode Bootstrap. The code bloat was stupid.

Going back to pure SCSS/CSS with smarter use of CSS Grid, Flex & media queries. Can now place things where I want depending on screen size/device without unnecessary HTML for purely structural purposes, eg floated divs etc and much less CSS download. The page file size difference is incredible.

Also trying to wean self off jQuery. That may take a little longer especially as PW is so dependent on it.

[pwired]

If you work on a project with a team of coders then for reasons of conformity BS and UIKit come into play.
As a freelancer you have the luxury to code your own css or use a framework without limiting rules and
keeps page loads fast and free from bloat such as:

1) Pocketgrid
   https://arnaudleray.github.io/pocketgrid/

2) Gridy
   https://microcipcip.github.io/gridy/#!/