CSS-Class for same margins, paddings and so on?

Kirby 2 Solved ✅
1

Today I have a question about the use of CSS-Classes.

I don’t use a CSS-Framework and will write my own CSS. So, as a newbie I think about the easiest way to write it.

Something I think about is to create one or more CSS-Classes which I use when I need the same margins, paddings and so - e.g. the same margins between h1 and p-Elements on each site.

Will it be useful?

I hope you understand what I mean.

2

It’s probably useful in some cases, but I guess you’d have to override this margin/padding classes a lot.

You wrote you’re still a newbie, but maybe it would make sense to have a look at a preprocessor like Sass/SCSS? You can define variables and reuse them: http://sass-lang.com/guide

That’s how I do it most of the time:

$smallmargin: 20px;
$bigmargin: 45px;

You can even divide/multiple when using the variables anwhere like this:

p {
  margin: $smallmargin/2 0;
}

With a tool like Codekit or Prepros it’s pretty easy to get started with preprocessors.

1 Like
3

Your idea looks a lot like these two CSS projects:

I’ve been contemplating this approach myself. Since we can use snippets or the patterns plugin in Kirby we wouldn’t be duplicating HTML. I always have a hard coming up with class names. I’m looking forward to trying it out on my next project.

1 Like
4

@pedroborges
for even slimmer css you can also check out the “small” basscss library from the same developer:

http://jxnblk.com/gravitons/

I have been using those with extending my css in the same fashion (such as color, buttons etc.) and i am quite happy with it. previously using basscss, but at some point (guess v7) they changed many class names which had to be manually adjusted… thats when i dropped it.

1 Like
5

I got inspired by basscss recently. Now I have come up with a nice way of working with CSS to get organized.

  1. Wrapper
  2. Module
  3. Global

We could call it WMG? :stuck_out_tongue:

<div class="header">
  <div class="module-logo">
    <h4 class="h2">Title</h4>
    <a class="link" href="#">Link</a>
  </div>
</div>

// Wrapper
.header {
  .module-logo { // Force the module to have a margin
    margin-top: 40px;
  }
}

// Module
.module-logo {
  .link {
    background: red;
  }
}

// Global
.h2 {
  font-family: Arial;
  font-size: 32px;
}

I’ll start in another order…

Global

Just like basscss, I use a class that will work on any element to style it, no matter the parents.

Module

No outer margins and paddings allowed here. Module position like float or position absolute are not allowed either. Just the module, in this case the logo.

Wrapper

In this case the wrapper is .header. It’s not a module and it can have styles on itself, but also override styles on the module or add new ones to it. Maybe it needs to set a margin top on the logo module, it can.

In conclusion:

  • Global classes works everywhere but can be overwritten by the module or the wrapper.
  • Modules should not use paddings or margins and not be positioned. They should be reusable in other environments. It can be overwritten by a wrapper or a parent module.
  • Wrappers are like unique ids in a way. They should only be use in a single enviroment. If not, make it a module instead.

Does it make sense? :slight_smile:

6

Thanks for all your suggestions.

I will look at all of them in the next days and will make a decission which one will be the best for me.

I have to say that I’m very happy that I can ask so many things to very friendly people.

Actually my website is in development and it will take some time to be release but I hope to show you some screenshots in the next few weeks.

Greetz

Markus