Hows it going ?

[TrendyTim]

I see the http://rkit.io/ is offline and its march and no update, i hope everything is ok.

[JKetelaar]

+1

[TrendyTim]

I had high hopes for this, I have used enquire.js before but something inside was thinking/hoping this was going to be even better.

[restive]

@TrendyTim Thanks for being in touch, and my sincere apologies for the long delay in getting back to you.

We've had quite a few challenges with rKit, but the good news is that it's finished [from a development standpoint] and working really great in testing. The bad news is that there is quite a bit of work to do especially with documentation before we can release it, so we're putting that together.

Also, the name of rKit has been changed [to another name we'll be disclosing soon] so that's the reason for the rkit.io issue.

It's coming...just a little slower than initially expected and we apologize for this, but we should have everything buttoned up in another month or so, G-d willing. Trust me on this, it'll be worth the wait.

[TrendyTim]

I look forward to seeing more about it, unfortunately the project i had in mind for this i ended up changing to Vue to build it instead of my previous plan of jsrender, so im using "vue media queries" addin to add some size requirement support, when your finished with the core of it, it would be great to see a Vue wrapper for it too.

I'm still excited to see what you have come up with.

[restive]

Ok. What we're trying to do is build the simplest possible functionality bridge between CSS and JavaScript, and have it be a designer-friendly solution at the same time.

A lot of these frameworks are great if you're a highly skilled developer, but a real pain if you're just OK with HTML, CSS, and jQuery [which most Web designers/developers are...I reckon].

With rKit, you can implement the same 'media queries' functionality with one line, in CSS, like this:

body[rk="if @viewport.width range '560,960' then addClass('v_pseudo_phone,v_pseudo_tablet')"]{}

And then use classes to do whatever you want:

.v_pseudo_phone .some_other_element_1 {background-color: #ff0000;}
.v_pseudo_tablet .some_other_element_2 {background-color: #0000ff;}

Implementation is like less than a minute, and using classes let's you be more surgical [as opposed to the spray and pray media queries approach. Also, rKit is a lot more than just a media queries replacement; it's a full toolkit for modern Web design.

Unfortunately, we're not planning to latch on to any frameworks at this time. Everything we do has to be zero dependency, and a short [learning] distance from CSS and/or JavaScript/jQuery because that's where the majority of Web designers/developers are.

Hopefully, we can add value to your next project 😃

[TrendyTim]

Sounds very cool, will you support @element.width as well, its a glaring omission from CSS, not everything is in a controlled viewport size (if im designing a component that users can put on any page, if its put in a div that restricts the width then media queries become mostly useless)

I totally understand not latching on to a framework, i wouldn't want any dependencies either, hopefully a wrapper will be on the cards one day, though seeing what it does I'm not sure how easy itd be to integrate with those frameworks.

[restive]

Yes, @element.width is one key feature that is included to simplify the ability to implement what is commonly referred to as element queries.

Here's a quick example:

#left-component[rk="if @element.width range '320,480' then addClass('c_left_bp_320,c_left_bp_480')"]{}
#right-component[rk="if @element.width range '240,360' then addClass('c_right_bp_240,c_right_bp_360')"]{}

This is similar to what we did for viewport breakpoints, only this time the basis is specific to the two elements identified by #left-component and #right-component i.e. two individual and independent breakpoints are created and applied to the respective elements [independent of what is going on with the viewport]. So this definitively solves the problem with developing a component to plug into a variable width div. Hope that makes sense.

Regarding the framework dependency situation, I'm not really a big fan of frameworks; I think that 99.99% of all Web projects don't need them. Plus, learning the ins-and-outs is a problem for most people, even those that are experts with HTML and CSS [and probably even JavaScript]. I think most Web designers and developers would be comfortable using our solution: all you need to know is CSS and you are not penalized for not being a JavaScript ninja.

[TrendyTim]

Thats awesome, i love it.

I used to think the same way with regards to frameworks and i still do to some degree, i used jsrender for rendering json into html, and it was fine for that job, but for more complex UIs i use VUE but only as components on a page, i don't write the whole site in it. But its much easier to be reactive when the hard work is already done for you, changing data and having html change automatically is totally awesome.

[restive]

Thanks. We're looking to simplify things a bit and make life easier for Web professionals.

I've only shown you a small part of the overall functionality. There are some built-in features that make it easy to work with local [and remote] data similar to Vue and Angular i.e. create a relationship between a piece of data and your layout/view, and then have your layout/view automatically adapt as that data changes. The only difference is with our solution, you can do that directly in CSS [with a CSS selector], rather than an esoteric reference in JavaScript.

Please give us some more time to get everything sorted out. I'm confident you'll find it simple and useful.

Cheers.

[MozzieMD]

Any news?