Frameworks, choice hell

[SamC]

Been looking over some frameworks, wanted to try a few today but what an utter nightmare. I mean how hard does this need to be? A site only looks one way, the only CSS needed is the stuff that's used, to make it look that one way. Having 10 options for a simple card is great, but I'll only use one, and I guess the code for the other 9 is still there, slowing down my site for no reason. This article springs to mind when looking over these things:

http://www.lifehack.org/articles/communication/are-you-suffering-from-the-curse-knowledge.html

I reckon when a developer goes into a cafe and orders a cup of tea, they don't get a cup of tea. They get a cup of hot water, 4 types of teabag, 3 spoons, 2 types of sugar and 3 types of milk. Then they make a framework in order to put these things together.

Maybe I need to look into a more minimal framework  this one looks interesting:

https://chalarangelo.github.io/mini.css/

[abdus]

mini.css at 7KB gzipped is not much different than Foundation framework at 12KB gzipped or Foundation at 19KB gzipped, both of which are a lot more feature packed.

This one is much smaller at 2KB gzipped that you can just inject it into HTML and not worry about extra bloat. Great if you're building something small and dont want to override much.

https://milligram.github.io/

 

[microcipcip]

It is very difficult to choose a framework, that's why I never use one .  I just use SASS with normalize.css, bourbon bitter and a grid system I've built. This requires more work at first, but you avoid the bloat.

[tpr]

It's a neverending question, you should choose one (or not choose any) and stick with that, until you find more attractive one

Personally I use a grid mixin and use custom CSS for everything. I can't say this is the best way, that always depends on the situation. For a larger project with multiple devs I would probably use a framework.

[SamC]

Thanks for the suggestions, still looking through them. Achieved approx. ZERO today so far. Not even got one up and running.

I currently just import http://include-media.com/ and normalize.scss then the rest of the sass is just stuff I've made up over the years. I used to use neat grid for a number of sites and it was pretty simple but they are sticking with floats so I'm moving on, My own personal site has no grid at all, I just used flexbox wherever items needed to be arranged in a certain way.

I do this:

// gulpfile.js
'use-strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

var paths = {
    sass: 'sass/',
    css: 'css/'
};

gulp.task('sass', function() {
    return gulp.src(paths.sass + 'styles.scss')
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        //.pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest(paths.css));
});

gulp.task('sass:watch', function() {
    gulp.watch(paths.sass + '**.scss', ['sass']);
});

...and styles.scss

/* Imports */
@import "variables";
@import "tools";
@import "mixins";
@import "layout";
@import "effects";
@import "buttons";
@import "lists";
@import "tables";
@import "forms";
@import "typography";
@import "media";
@import "modal";
@import "menus";

// any custom code
.images-grid {
    .image {
        img {
            transition: all 0.3s ease-in-out;
            
            &:hover {
                @include transition("shrink");
            }
        }        
    }
}

It's dead simple, I start with the same boilerplate each time and edit it rather than override anything. I'm free to uses classes I want, then just style them out.

I mean, something like this:

https://css-tricks.com/designing-a-product-page-layout-with-flexbox/

...it's simple to do with custom sass. How would you even do stuff like this in a framework with pre-defined classes? It just seems so restricting.

 

[benbyf]

or write some CSS and don't rely on frameworks

[SamC]

31 minutes ago, benbyf said:

or write some CSS and don't rely on frameworks

After todays events, I tend to agree with this. Last time I let the internet convince me about stuff I already know about 

[Sergio]

I really think that using frameworks for medium to complex projects can help a lot, reducing significantly the time required when dealing with browser issues. I can't see a REALLY good reason, from a technical and a business point-of-view, not to use one as nowadays as almost all of them have generally good documentation, are battle-tested in all major browser versions. I really don't want to remember you how it was like in the days of testing a site over and over again in Netscape and IE. 

When I'm planning a project I decide which framework to choose based on these questions:

1. Will the project have many different pages layouts?

2. The client's brand require a custom design? Meaning, will the developer spend a lot of time creating a layout that's specific for the project, or the project can have a more default layout (based on the framework's  default styles/components)

3. How much time/budget do I have to work on the project?

4. In the future, will be other people maintaining the project of just me? And if so, are we going to be thankful as I used a framework with good docs or should I expect a desire to break my (own) knees with a baseball bat? 

The choices can be, for instance:

Zurb Foundation – for projects that require a lot of different pages down the road and a lot of customization. And I always use the Foundation Stack to have maximum control of the settings. Foundation is, like they said, the most advanced framework out there.

Twitter Bootstrap – If I'm creating something with Laravel and it's an internal project, tool, or just a prototype, as the Laravel community have a lot of things already done using Bootstrap that can help.

UIKIT – If the project can benefit from its more opinionated designed elements, meaning: can I stick with the defaults and do just a little customization and call it a day? 

---

Unless your project really needs to have the smaller CSS/JS footprint possible, like if you are targeting some users with crappy 2G connections and/or old browsers, you can go with a framework like the above. I used a lot of Foundation's CSS components on ricardo-vargas.com and the CSS is less than 30kb gzipped.

---

For personal projects, I usually search around and give smaller frameworks like Tachyons, Kube, Bulma a try as it's fun! 

[szabesz]

Guys, if you have a lot of time to spare, you can kill some by checking out this list:

https://github.com/neiesc/ListOfMinimalistFrameworks

 

[SamC]

Interesting points @Sérgio. That website is very impressive too, thanks for sharing. I haven't gotten into anything as large scale as that yet so I'm guessing I don't see the need for a framework. With that said, I don't think this quest is fully over 

8 minutes ago, szabesz said:

Guys, if you have a lot of time to spare, you can kill some by checking out this list:

https://github.com/neiesc/ListOfMinimalistFrameworks

 

Don't! I just can't cope with it. Although it is slightly addicting in a weird way.

[FrancisChung]

@Sérgio, you post made me think that it would be really great if there was a website where you answered some (or many?) multiple questions about your project and it would recommend a combo of frameworks based on your answers, as well as some alternatives.

Of course, it may not be the best combination in all scenarios but it would save you a ton of time researching or thinking about it.

And of course, Processwire would always be the recommended CMS of choice hehe.

[Sergio]

2 hours ago, FrancisChung said:

@Sérgio, you post made me think that it would be really great if there was a website where you answered some (or many?) multiple questions about your project and it would recommend a combo of frameworks based on your answers, as well as some alternatives.

Of course, it may not be the best combination in all scenarios but it would save you a ton of time researching or thinking about it.

And of course, Processwire would always be the recommended CMS of choice hehe.

 

@FrancisChung, it sounds like a good idea, but I think I saw something like that before but couldn't find it. Although I've found a quiz on how to choose a JS framework, many questions can be adapted to create a new quiz using https://www.qzzr.com as well.

Take a look: https://code.tutsplus.com/articles/quiz-choose-the-right-front-end-javascript-framework-for-your-project--cms-27739

And, maybe you haven't seen these two comparisons:

https://www.vermilion.com/responsive-comparison/

http://usablica.github.io/front-end-frameworks/compare.html

They can help a lot.

[SamC]

At first I didn't understand foundation, then my lightbulb moment happened this morning. Then I built a demo page responsive flexbox layout in about 30mins using both the provided classes, then with the mixins provided instead to cut the HTML classes bloat. Then I was like this looking at my old small boilerplate css:

Gotta love making stuff for the web