I'm creating my own CSS framework : Is there something wrong with this logic?

Hey!

I’ve been using Bootstrap and a few other CSS frameworks for a while, but I thought I could’ve created my own framework to handle simple jobs. I also started using LESS, so I am making experiments with CSS.

I know that I probably shouldn’t reinvent the wheel.

Is it logical to use a system like below? I want to use a simple templating system that allows me to code faster using LESS.

I created three containers, .middle-container, .big-container and .small-container. But I will only paste middle-container in order to keep my code short.

.middle-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
 border: 1px solid blue;
}

.middle-10 { // ten percent of .middle-container
  width: 10%;
  max-width: 100px;
}

.middle-20 {
  width: 20%;
  max-width: 200px;
}

.middle-30 {
  width: 30%;
  max-width: 300px;
}

.middle-40 {
  width: 40%;
  max-width: 400px;
}

.middle-50 {
  width: 50%;
  max-width: 500px;
}

.middle-60 {
  width: 60%;
  max-width: 600px;
}

.middle-70 {
  width: 70%;
  max-width: 700px;
}

.middle-80 {
  width: 80%;
  max-width: 800px;
}

.middle-90 {
  width: 90%;
  max-width: 900px;
}

.middle-10-10 { // it's 10 percent of the middle-10
  width:10%;
  max-width:10px;
}

.middle-10-20 {
  width:20%;
  max-width:20px;
}

.middle-10-30 {
  width:30%;
  max-width:30px;
}

… so on…

Why bother creating a load of rules you may never use? :slight_smile: (Because that’s what most frameworks do). Frameworks have their place on large projects or in teams but for small sites they just get in the way and add bloat most of the time.

I would rarely code columns in fixed percentages like that anyway as designs seldom fit into them easily. It only takes a few seconds to write rules for horizontal layout so just write them when you need them.

Rather than use floats I prefer css display:table table/cell properties (ie8 +) and most times you can just let the cells take up the space they need (something you can’t do with floats). If you need ten items across then you have 10 cells. No widths needed and no magic percentage numbers needed either.

That’s not to say that you shouldn’t have some default rules to get you going quickly but don’t try to build something that caters for situations you will never use.

1 Like

I am using LESS and I wanted to make things faster with this approach. The website I am coding right now can be a big project in time, I also need to code a few hundred pages. So coding manually won’t help in this situation. (It can be done, but it takes so much time)

Is it still a bad choice?

I would consider using a premade framework, in your case. Bootstrap uses LESS, Foundation, SASS.

2 Likes

No it’s not a bad move!

If your custom grid makes more sense to you than bootstrap’s, foundation’s etc, then go ahead and build your own. Just don’t waste your time building stuff that already exists. You could pick the best components from bootstrap and mix them with your own.

I for example, have found it usefull to sometimes render bootstrap’s grid as a table so I created my own .row-table class. This way I can use the default columns, only they would be displayed as table cells.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.