Which classname variant should i use in my framework?

Dev Zone Web Development
1

Sup, im currently developing my own front-end framework (which probably gonna look like Bootstrap to you, but its way better - at least its grid) and i need opinion on one thing. I'm thinking abour renaming "bootstrap-like" classnames to something else, since i don't need backwards compatibility anymore - we were moving from Bootstrap grid (which used floats) to my own, which is done using flexbox = way more options to align / position / resize columns

Currently used:

.col-xs-
.col-sm-
.col-md-
.col-lg-
.col-xl-
.col-hd-
.col-2k

preview in html: class="col-xs-12 col-sm-8 col-lg-6 col-xl-4"

new variants:

.col-xs-
.col-s-
.col-m-
.col-l-
.col-xl-
.col-xxl-
.col-xxxl-

preview in html: class="col-xs-12 col-s-8 col-l-6 col-xl-4"

shorter version:

.c-xs-
.c-s-
.c-m-
.c-l-
.c-xl-
.c-xxl-
.c-xxxl-

preview in html: class="c-xs-12 c-s-8 c-l-6 c-xl-4"

i know .col-xxxl- is bit overkill, but i can't use "3xl" or anything with number as first letter, cuz CSS doesnt like it, and some components are using classnames like .xs-block .md-inline to set different variants per breakpoint

I may end up renaming just HD and 2K to XXL and XXXL, so it coresponds with clothes sizes and not defininig any actual size in its name since you can modify grid breakpoints in config and use 2K for completely different resolutions (less or more than "2K")

You can check it here:

Or add your opinion directly to issue:

damn this is a long post

1 Like
2

Just curious why are you re-inventing the wheel ?

3

@Ion , probably because the "popular wheels" come with Boeing 747 attached to it.

Popular frameworks are aimed at three types of people:

  • ones who need to make something as fast as possible and then forget about it
  • ones who loo for framework to cover their own lack of skill
  • enterprise development (think Java and .Net)
1 Like
4

Suppose if you want to believe that it's fair enough.

5

as said above, popular frameworks are too big, dont offer what i need and my is (at least for me) way more customizable. I can simply put true/false in config to disable one whole part of code which i don't need for specific project, change grid breakpoints on 2 lines and more stuff :)

It's still work progress tho, but even with current state, it gives me massive advantage while coding responsive websites espetially thanks to my grid thats using flexbox instead of oldschool "float" which gives me way more option to align or even change order for columns inside, float can't do any of it and you would have to do it with javascript or absolute positioning

6

Answering the original question:

columns are something you use to construct a grid. So I would probably follow similar naming scheme as bootstrap in this regard: .col-10, .col-2 and so on. Just pick the number, which you will be using as "total" (go with either 12 or 24, IMHO).

The sized like .thing-xxl should be saved for stuff, that depends on the font size.

7

Fair enough i suppose, but whats stopping you from just creating a Flexbox module instead of creating a whole framework ?

8

Have you, @Ion, actually explored the code of frameworks like Bootstrap of Foundation?

1 Like
9

ye i already have grid ready - some demos here: http://lui2.less-ui.net/ (possibly outdated)

just thinking about renaming few breakpoints to something else, originally i had .col-2k and even .col-4k problem is, when you have let's say responsive table with 2 variants, "block" and "table", so you would use class="xs-block 2k-table" and problem is, browsers dont really like classnames, that begins with numbers (which is kinda sad :D), so i just needed some idea / opinion, if i should go with .col-xxl or even col-xxxl

10

Yes I have surprisingly enough I just don't believe in creating whole frameworks just to resolve small problems.

11

Just go with what's more natural for you, benefit of making a framework is you get to choose what's easy for you.

12
  • easier to understand your own code rather than trying to learn someone elses
  • learning new stuff
  • do whatever you want with it
  • code what you actually need

:)

some people may prefer stuff thats already there, cuz they gonna get help online if they have a problem.
I'll code my own way through it :P

and we use it at work in our company's system

13
  • Bootstrap is slowly moving to Sass, we use Less
14

Short class names like "c-xs-12" are nice until other people get involved. Col is still short, and is quicker to understand if another developer takes over later, as it's a common abbreviation.

3 Likes
15

Well thats definitely one reason to migrate just I always find that creating custom code rarely provides many benefits (in regards to time programming etc) vs already pre-baked solutions. Personally I feel if there is something you can use that nearly does you job, do that, and just modify it to work the way you need. But as a learning experience I bet it would be very helpful especially if you plan to expand on it later, any ideas on what you might add in the future ?

Ha all i would suggest is before it goes live put it into heavy testing (preferably unit testing) as there will always be somewhere in your code that has an error, and it can be very easy to miss errors depending on the size of the code. Amount of times I have thanked the gods for code review is crazy (even though I hate it being done).

16

ye i will probably stick to "col", talked about it with co-worked, checked other frameworks and "everybody uses col" :D

17

it is already live on a lot of websites :P

18

Ah ok well hopefully nothing breaks :), just always follow the golden rule when it comes to users. If there is a stupid way of doing things they will find that way and use it every time :P. Everytime I create something nice and clever there is always some idiot who uses your system incorrectly :P.

2 Likes
19

just dont test it in IE8 ok? :D :P

20

But every user LOVES IE :P you'll laugh but worked at a company a few years back and I swear half of them were using IE wanted to cry myself to sleep. I had a policy at work that if you used IE I would not support you in anyway (funny thing was it was approved by the directors, funny how quickly they change there minds when money is involved).

1 Like