UIkit3 for RW just released

Hey Markus I’ll make a page with websites made with Uikit, could I use a screenshot of your website too? If not no problemas, cool.

1 Like

@steveb

Here is a demo how Poster Stack would look like in UIkit 3. Really pleasant with what I see there.

https://posterdemo.instacks.com/uikit/

2 Likes

Good to know. I’m sorely tempted to get it to give it a whirl, regardless of the breakpoint thing.

Superman’s got nothing on me! ;-)

4 Likes

Sounds like Batman vs. Superman.

1 Like

I don’t think you need control over all breakpoints to be able to set those values, but you do need 3 of the framework breakpoints to be accessible where applicable. However, you really need control over TopBar/NavBar navigation to set the point in pixels, where the desktop navigation changes into the Mobile hamburger navigation. If you don’t have this facility, then the navigation may not be a solution which can mean that the whole framework can’t be used or you need to be creative and use a 3rd party navigation.

1 Like

I was looking at buying UIkit…BUT if the updates after 12 months aren’t included except for another $69 payment then I think it works out to be very pricy.

Is this correct Lucas?
@Lucas

Any updates to the stacks will need to be purchased after 12 months or is it just NEW stacks and content added after the 12 months that will not be included?

Thanks Scott

Hey Scott, yes that’s correct. You know this is a hard one, some say it’s pricy, some it’s fine. But I understand the 1 year updates/support can be a deal breaker for some people.

One alternative would be to keep the prices, remove the limits and sell the projects separately, part from the big Tests project that is important to be included in the package.

🤔

Guys I’ve decided to change the purchase plans, after many requests. Purchase now includes unlimited updates and support plus the big Tests Project. Other pre-built projects are now available as optionals.

8 Likes

Although academic at this point, I would like to insert my 2 cents worth into this topic. Blocs3 is $99 for version 3 (and like a lot of people, I like Blocs too), which is the cost for whatever time until version 4 comes out, or whatever is deemed a major upgrade, then there is an upgrade cost. I feel that UIkit3 initial model was a good one, as it guaranteed the incentive for Lucas to continue to provide regular updates and upgrades, while giving the user the option to remain using the software ‘as is’ forever, if he/she did not want or need updates. UIkit as it was, was more like a ‘rolling update’ model.

2 Likes

I love what Lucas have done with UIkit3, and I was lucky enough to beta test it since October 2018. Lucas devoted a lot of time and attention to delivering a very high quality software. Unlike other framework stacks, UIkit3 stacks tries to put you very close to the framework itself, it is highly modular, just like the framework itself… and very, very fast, responsive and flexible. It’s fast not only as a published site , but also the preview in RW. One of the things that you notice in UIkit3, is the fact that you can, within the stacks, add custom classes and ID’s if you have the expertise and/or desire to do. But please, don’t get me wrong, you need not have any knowledge of HTML or CSS to use UIkit3. So, if you are hesitating, don’t! You will love UIkit3 flexibility and modularity. Please check the following sites using UIkit3: https://marielaforge.com and https://mangobistro.com … cheers!

5 Likes

Curiosity got the better of me today so I bought UIkit and am having a play with it.

Bit of an issue with getting it to play nicely with what I consider to be a must-have third-party stack, but I’m sure with some emails to the right people that can be sorted (or maybe I’m just setting things up wrong: I tend to jump straight in without reading the instructions!) but I just wanted to post one initial comment about something I asked up there…

Menus and setting the breakpoint.

This I reckon is crucial, to be able to manually control the breakpoint for the menu going from desktop to mobile (for want of better descriptions). Lucas said this is not manually controlled but set by pre-defined breakpoints.

This is true. UIkit seems to have three breakpoints that you can adjust: Tablet, laptop and desktop. But, what you can do is select at which of these the menu changes from desktop to mobile. Which is good IMO. It’s not the finite control I’d like, but it’s better than some frameworks out there.

I know that @Webdeersign will be interested to hear that.

Worth mentioning at the mo that the stock menus with UIkit don’t “change layout” at this breakpoint like most menu stacks. Instead, you build two different menus: One for desktop and one for mobile. Then select the breakpoint at which one disappears and the other appears.

it’s a much better way to do things than the regular “one menu stack that changes design/layout” at the breakpoint, but it does require a bit more work, building two not one menu. But you get far more control.

Anyway, I’m back to having a play, just wanted to mention that as it was initially one of the reasons I ruled out getting UIkit.

5 Likes

Sorry Sections and many other stacks will not work as every single div is being forced to overflow:visible by the theme JS. This will break lots of stacks that set some of their content to overflow hidden in CSS. Surely only the stacks wrapper divs need this.

Chroma works OK though :-)

Had a few hours to play the other night with UIkit, and now embarked on a build.

It’s a freebie site I’m doing for a local dog charity and I’m using it very much as a practice piece to get my head around UIkit.

If anyone is interested you’re welcome to watch progress here: https://ci-clientservices.com/clientdev/corran/

I can’t really judge UIkit yet: I’m so familiar with my usual build tools (mostly BWD) that to throw something together takes no time at all. Whereas with UIkit I’m starting from scratch and having to work out the UIkit classes to do pretty simple stuff that most other stacks do in settings. Like vertically centre content in a container (uk-flex uk-flex-center), centre align a button (uk-align-center) and so on.

But, this use of classes over settings was what attracted me to UIkit: The thing that slows down preview in RW is settings options, the more you have the slower preview takes (or so I was told!). So I figured if settings are kept to a minimum and everything is done with classes, preview should be super fast. At least that was my theory anyway!

So far previewing that site above is super fast, instant almost, but then there is not much on the page, so time will tell.

The site above is built entirely with UIkit stacks, except one: Scribe. I can’t go back to using header and text stacks. UIkit does have a weird habit of adding lots of bottom margin to headers (20px by default), that while you can over-ride in the native stacks, you have to over-ride for non-native text stacks (like Scribe) manually using CSS.

I don’t really understand why this is so, maybe @Lucas can explain? Either way, it’s dead easy to adjust using this I reduced it by default to 5px)…

 h1, h2, h3, h4, h5, h6 {
    margin: 0 0 5px 0;
}

Anyway, that’s about it for now. So far I’m enjoying the learning curve with UIkit, and while it’s a bit frustrating at times (finding classes etc.) so far it’s all good.

Happy to answer any questions anyone has about UIkit and what I’ve learnt so far.

EDIT: As kinda mentioned above I’ve been struggling a bit with some layouts, turns out I was missing a vital stack: Flex Stack. I needed to reboot the machine to get it to appear. With this stack everything is now super easy.

4 Likes

Right, that play/freebie site is done. It’s super simple, but a great place to start with UIkit.

And on the subject of UIkit, after I discovered the missing stack, Flex Stack, everything got a whole lot easier, less frustrating and much quicker. In general, I like it, and I think I’ll get to like it a lot.

I’m used to having control the the nth degree and my regular stacks give me as much control as I want. Using a framework and sticking to just the frameworks stacks is always going to be a compromise, but the reward is simplicity and speed.

For my simpler sites I could easily get used to using UIkit and it’s stacks exclusively. Other than a markdown stack like Scribe, it’s got pretty much everything you need and great control with the Flex Stack and the UIkit classes. For my more complex projects I’ll stick to my usual arsenal, but having the option is nice.

Worth mentioning that I’ve so far only used the basic UIkit stacks, but even then it’s a great self-contained framework.

3 Likes

Nicely done Steve. Indeed the Flex stack is nice, UIkit playing well with flexbox. Tell me if I can add a screenshot to the gallery at some point: https://uikitstacks.com/gallery/

Not sure it’s really worthy of inclusion in a gallery, it’s a bit basic, but you’re welcome if you want. I’d wait though til the site is off my dev server and live, which’ll be next week sometime. I’ll drop you a link once done.

Little update to this thread for anyone following/interested.

I’m slowly putting together a demo project with UIkit, using only UIkit stacks. If it ends up OK I’ll be releasing it. My reason for posting it here is not to promote it but to give an example of the speed of UIkit in edit/preview.

This page…

http://ci-clientservices.com/clientdev/uikit/

Which is slowly building into a pretty big/complex one, flicks between edit and preview almost instantly, if I had to time it (I’ve tried) it’s 1.5-2 secs. In the RW world, that’s fast. There is only one other framework that can match, in fact beat this, called Core, but it’s not available, so not really a true comparison.

I’ve not done a like for like comparison yet with the other main frameworks, only fired together something vaguely similar, and typically it’s a 15sec edit/preview time, so a bit of a workflow killer.

IMO, Core aside, UIkit will become the benchmark for speed for RW in time. I do think it’s a more serious tool than the rest out there, as to get the most out of it you have to learn to use classes, but the payback, for the more serious weaver is a huge improvement in preview times, which means a much faster workflow.

By the way, I’ve purposely gone OTT with all the animation on that page, partly in an attempt to slow it down. Not sure how much will make it to the final version, if a final version gets made.

3 Likes

Just ran some speed tests on that page: Surprising.

I suspect most of that page size is images, cus as yet I’ve not processed them!

Bear in mind I’m a bit clueless about a lot of this, so someone with a better understanding of page weights and speeds might be along soon to rip me apart!

4 Likes