Things UIKit can do that make it ‘miles above everything else’

Can you maybe give a couple of examples of things UIKit can do that make it ‘miles above everything else’? It looks like a bargain but I worry I’m simply feeding my Stacks addiction!

Give me some examples of what you want to do and I’ll explain how to do it using only the native stacks.

Plus, the projects on uikitter use only thr native stacks.

Hi Rob, if you ask me one example would be the image component: https://uikitstacks.com/documentation/image/

Images are loaded as they reach the viewport, the viewport distance can be customised for both horizontal and vertical axis, it has support for local and warehoused files, support for srcset with custom break points, response behaviour options etc.

Plus it’s the same stack that you can use in the slideshow, slider, card, lightbox and other components, adding to the modularity of the design.

Then there’s the flex component, the ultra-flexible form, the position components and many others.

But one thing I like the most is the modularity: you can use the grid into the form, or an accordion into the form, the image component into other stacks, the detailed parallax component into a slider or slideshow and so on.

3 Likes

Excuse the short reply earlier Rob, I was out ans about on my phone.

If we are listing nice features that I think the rest don’t do… Position stack.

Put an outer container stack on the page (called a Section) and into this put a position stack. In the position stack put any content you want. Then, in the Position stack set where you want the content to appear: Centre, top, left, right, and so on. You can add padding around the content in the stack and also adjust the Z index.

So, taking the UIkitter site as an example: https://www.uikitter.com/

In the About section the text content is inside a grid stack, but that UIkit icon that is really big and floats behind the content on the left hand side, that’s in a Position stack.

And talking of the Grid stack, it’s really simple to get the content to float middle, so as in the About Us section, the title on the left and the text on the right are both vertically centred. You do this by simply adding the class uk-flex-middle to the grid stack.

I mage be wrong, but I don’t think any of the Grid stacks in the big frameworks does that. Outside of S4 none even support classes, let alone come with hundreds of native classes already defined in the css: You just add the class name to the stack and boom, done.

A good example of the position and the grid stack is here: https://www.uikitter.com/demos/skyline/columns/

Change the width of the page and see how the content and the grid behaves, all this is done with simple classes added to the grid. Pay particular attention to the blue grid at the bottom of that page, and how it stacks as the page width changes. I don’t think anything else in a framework does this.

That’s a few things, but there are loads more.

@Jannis This has gone off topic a bit now, maybe could you split this thread, leaving the Black Friday stuff here and starting a new one for the Uikit chat?

I would do it, but I still can’t work out how!

1 Like

This is basic stuff for Source and you don’t need to access any classes. You can even overlap them too if you want. You can set a column to be a fixed size and the other ‘columns’ will adjust their width for each breakpoint and this makes complex layouts a breeze. The 12 column grid dinosaurs can’t do any of this stuff.

I haven’t tried UIKIT, but certainly after using Source exclusively for the last few months for new sites, I have yet to find something that I can’t do with Source and going back to the other 2 Frameworks to maintain older sites has not not been very enjoyable.

2 Likes

Many thanks for all that info Steve. Like Webdeesign, I’ve been using Source (only for about a month or so) and have been really impressed with what you can do with the included Container and Grid stacks.

Tempting as the UIKit price is, I think I’m going to leave it. I already have Foundation and Foundry and my Stacks library currently sits at over 1,000!

Rob

1 Like

Source is brilliant, but my comment was about building entirely within the framework, not using external stacks for various things.

If someone new came to RW, had an understanding of classes etc. And wanted to buy just one framework to build a great site, uikit3 is the one. Imo.

1 Like

Based on what I know about UIKIT, I think you are right. It looks like a toolkit kit full of well thought out sharp tools.

The choices for Weavers today have really opened up in the last few months.

1 Like

Now I’m thinking…£40.00? Got to be worth a punt…8-)

3 Likes

LOL. Stacks magpie ;-)

My love for UIkit3 is well documented nowadays. I’ve been thru all the frameworks and all fell short for me personally. Others love them and find they can build what they want with them, and that’s great, but i never could. I was always having to use third party stacks to do what I wanted. And using a host of third party stacks with a framework is just so inefficient, so it always grated on me.

When I bought UIkit3 at launch I was lucky in that I was at the start of a quiet couple of months, so I dedicated the time to learning it inside out (kinda!). I soon found that it worked the way I wanted to work and since getting it I’ve built about a dozen client sites and not needed to use any third party stacks.

Now, my sites are simple. I don’t do fancy effects or funky designs: Clients use me for clean and simple sites that work, not have the wow factor. So others milage may vary.

Getting the most out of Uikit3 requires a bit of lateral thinking and a willingness to use custom classes.

Lateral thinking because the stacks are all modular. Each stack doesn’t have a million settings to do everything, you build different stacks up together, one inside the other, to achieve what you want. So you need to be able see what you want to do, and understand what stacks you need to combine to do it.

For instance, at the most simple level, if you want to build up a section on the page with some top, bottom and side padding, that changes at the breakpoints, with a colour background. You first use a Section stack to do the top and bottom padding. Into this you put a background stack to set the background (colour or image), into this you put a container to set the content width size and left and right padding. Then into this you put your content.

Why not just have all this in one container stack? Cus you might not want all those features, so the stack will carry settings (which slow RW down) that are not needed. Better to put each function in it’s own stack and build up exactly what you want.

The other bonus of doing it this way is you use the same background stack to add backgrounds to everything, so it’s a simple drag and drop jobbie, not having to change background settings in every stack.

Tav kinda invented (I think) this approach with the concept of child stacks. it woks cus it means you only have the settings for the stuff you actually want, and so edit/preview in RW doesn’t grind to a halt.

There are loads of other reasons I prefer Uikit3 to anything else out there (excluding Tavs stuff), those are just a few.

Uikit3 though I don’t believe is for everyone. many will struggle with it as not a simple drag and drop affair. But for those who are willing to put the effort in, I think, it’s head and shoulders above everything else.

4 Likes

@steveb and @Lucas gave great examples of why I think UIKit3 is the framework of choice for Rapidweaver. I second all of their comments, but would like to emphasize, as @steveb did, the modularity of UIKit3, and how close and true to the UIKit3 framework @Lucas kept the stacks. Just look at the documentation for the UIKit framework (getuikit.com) and the documentation for the UIKit3 stacks (uikitstacks.com), they are pretty much hand to hand. So, when you grasp the classes of the framework you can apply them the UIKit3 stacks, both because @Lucas paid particular attention to keep the stacks true to the framework classes, but also included the means for us to use those classes in the stacks. And, wow, that’s power at our hands. I also would like to re-emphasize the point already mentioned, that you can intermingle the stacks, because of their modular design. You can use stacks that are seemingly unrelated together… you can drop a grid or an image in a form stack, or a form in a grid, put a background in a form. Many permutations are possible. You can put an image or a modal box in a menu. You can really think outside the box… and almost 100% of the time, it works! On the other hand, UIKit3 stacks do play well with 3rd party stacks, and if you like them or need them, you can continue to use them.

I think UIKit3 is worth every penny… and then some.

Cheers,

Ricardo

4 Likes

This is definitely another sales temptation.

It’s nice to hear from @Lucas, @steveb and @Ricardo on how UIKit works and what makes it different to other frameworks.

I’ve recently got Source and very happy with it, I “get” it a bit more than other frameworks I’ve tried and haven’t quite been able to get the results I want. However UIKit looks like it could be another good toolset to have…

8 posts were split to a new topic: The internet without JavaScript