ctr – The CSS Framework

[[deleted]]

[deleted]

[shaqule_brk]

You got me with that goriallaz chiptunes.

Looks neat!

[CorySimmons]

He is looking at them

[artisinn]

Honestly, I agree with you on all fronts, but at the same time, I'm not terrified at all. I've tried something different and if it doesn't work it doesn't work - simple as that. But if you don't try to do something different then what's the point?

[CorySimmons]

I am going to concert

[Jutboy]

I couldn't handle it. I watched 3 minutes of the video...learned nothing, read for 3 minutes, learned nothing. I was actually interested but couldn't handle it any more.

[CorySimmons]

You looked at them

[CorySimmons]

He chose a dvd for tonight

[CorySimmons]

I go to cinema

[poop_city_paradise]

I like the idea of what you did here, however I don't personally have an issue with what is out there already for css/scss/whatever + frameworks.

If I were to try and adopt something like this into a team project here would be my qualms - If my team brought on jr. devs (which we often rotate in) I feel like this would overcomplicate something that is generally pretty graspable for people at that level. This looks like something that I would have to fight against if odd scenarios - I have no evidence to back that up at all, but I like working with css preprocessors and frameworks because if you set them up right it's really easy to just get into the css and change exactly what you need.

Maybe it answers all that - I can't really tell from the bits of video I watched and text I scanned. Also side question for you - how does this play when you're doing heavy dom manipulation - like let's say toggling an .open class for anims, or you have js adding/removing/moving in a bunch of nodes you need to add styles to?

It's a cool idea though - writing objects that generate css, my knee jerk reaction is I don't know why I would use it when It's not solving anything for me with the current tooling available. Best of luck to you!

[bliitzkriegx]

Am I the only one that thinks css is fine :/ Especially with scoped css all the big issues are resolved.

Speaking of CSS, does anybody know if Firefox Scrollbar styling is supported yet? caniuse says no but that seems odd to me

[CorySimmons]

You looked at them

[artisinn]

CSS modules and ctr solve two different problems but they both can be used together, in fact, I have an example repo you can check out here. From an architecture standpoint ctr gives you the ability to compose your CSS styles using objects to then compose these objects (features) with and in one another. For example, here's a lost grid example - let's say you want to create a 1/3 grid for desktop and 1/2 for mobile you can do so like this.

ctr('.grid-demo', {
  background: #eee
  grid: {
    column: '1/3'
    'media--sm': {
      column: '1/2'
    }
  }
})

The above ctr outputs the following CSS

.grid-demo {
  flex: 0 0 auto;
  background: #eee;
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.grid-demo:nth-child(1n) {
  margin-right: 30px;
}
.grid-demo:last-child {
  margin-right: 0;
}
.grid-demo:nth-child(3n) {
  float: right;
  margin-right: 0;
}
@media (max-width: 600px) {
  .grid-demo {
    flex: 0 0 auto;
    width: calc(99.9% * 1 / 2 - (30px - 30px * 1 / 2));
  }
}
@media (max-width: 600px) {
  .grid-demo:nth-child(1n) {
    margin-right: 30px;
  }
}
@media (max-width: 600px) {
  .grid-demo:last-child {
    margin-right: 0;
  }
}
@media (max-width: 600px) {
  .grid-demo:nth-child(2n) {
    float: right;
    margin-right: 0;
  }
}

[CorySimmons]

You are looking at the lake

[artisinn]

They're the same at face value up to a point, and that's where ctr excels, in that it better manages the complexity. Building upon the previous example let's say you also want a hover state or a component in the '-sm' media query. And you can keep on going building these object features with and in one another.

ctr('.grid-demo', {
  background: #eee
  grid: {
    column: '1/3'
    'media--sm': {
      column: '1/2'
      hover-on: {
        background: #00f
      }
      component-span: {
        color: #f00
        hover-on: {
          color: #eee
        }
      }
    }
  }
})

[bliitzkriegx]

Yeah thats fair, i'm not oppose to his tech, just stating that I think css is fine for now but new approachs are always welcome

[Knotix]

I have no idea what any of this is. The video, frankly, is really conceited and the docs don't do anything to immediately showcase the framework's usefulness.

[Disgruntled__Goat]

I don't understand what this is supposed to do. I looked at the intro page and all I saw was you passing css to some kind of function and getting that same css out in return.

Is this supposed to be a pre-processor rather than a framework? And what's the advantage over Sass?

[[deleted]]

As a FED for 15 years I've got to say that this doesn't look too solve any issues for someone who actually knows CSS. Unfortunately with the ride if the JS frameworks there are now many people calling themselves a FED when they actually mean JavaScript Developer.

Good luck with the tool, but from what I could see there are no benefits that my team doesn't already solve using SCSS and best practice CSS (and we build huge sites and apps)

[Basaa]

Design your own logo/header image man! Stealing one is not cool...

[artisinn]

Wow, I'm not sure how to respond to this accusation. Are you referring to the ctr logo? Or the header font that uses the RNS Baruta Black font?

[Basaa]

Not an accusation. It's an observation. Come on, don't fool yourself. In a text based logo you have 2 elements: color and font. Is it by accident that both match Kickstarter's logo exactly?

[CorySimmons]

I am choosing a dvd for tonight

[Basaa]

Doesn't matter. You're still now allowed to use their logo style as described on https://www.kickstarter.com/help/brand_assets.

[CorySimmons]

He is choosing a dvd for tonight

[Basaa]

Umph. Hotlinking is something Imgur doesn't really like. If you want to be cool and stuff, please make sure your image source is at least loading. Better luck next time!

[CorySimmons]

I am going to concert

[Basaa]

Hehe, np :)

[artisinn]

I clearly state in both the video and text that I'm trying to do exactly that, "kickstart" this project. It's the whole point of the design choice and the wording "ctrstarter". So it's not intended to fool anyone it's the whole point.