CODEWITHSUNDEEP
htmlcsstwitter-bootstrapzurb-foundation
Luís Guilherme
Luís Guilherme

Reputation: 2709

CSS Style class-like inheritance workaround

This is a question that I've seen here, but never with this focus.

One cornerstone of modern web development is the separation of design and structure. CSS Zen Garden is a great showcase and evangelist in this path.

However, the new trend is responsiveness, and that cornerstone is being kept to the side. Frameworks like Zurb Foundation and Twitter Bootstrap are fantastic, but they force the programmer to add styling to his structure. If I write column-4 or grid-xs-4 on my HTML code, I am explicitly talking about design there.

Ideally, I would write a CSS file with code like this:

.header-top {
  inherit "small-6 medium-4 columns";
}

That's not possible, not supported.

A possible workaround is add my classes to the framework's CSS files. That is easy, but

  1. Makes me touch framework files, which makes upgrading painful;
  2. The result will probably be astoundingly messy.

The question is: How do I use frameworks like Foundation and Bootstrap, keeping design and structure apart, making full use of their responsive classes?

Upvotes: 0

Views: 280

Answers (1)

lime
lime

Reputation: 7111

If you are willing to reconsider your stance on compiled CSS, i believe Foundation does a lot to try and give you the best of both worlds: a grid you don't need to write yourself while still using semantic classes.

If you scroll down any page on the Foundation Docs there is usually a "Customize with Sass" section that gives you SCSS mixins to give your own classes the same abilities as Foundation's built-in presentational classes.

.header-top {
  @include grid-column(6);
}

Even without provided mixins and a framework like Foundation, SCSS enables you to do extend other classes almost exactly like in your question:

.header-top {
  @extend .small-6;
  @extend .medium-4;
  @extend .columns;
}

In this particular case, I'm not sure if you should @extend the existing classes or @include grid-column together with media queries. I've only used the previous version of Foundation and the docs are still somewhat lacking, but there you have the basic principle. :)

Upvotes: 1

Related Questions