My Web Manifesto (UIKit + TailwindCSS + Grid)

[Tom.]

Hello everyone,

Recently I spent some time researching how I can update my workflow. I really enjoy working with TailwindCSS however, when it comes to Javascript, I often find myself having to search around to find a good package. Often I find myself having a package for lazy loading, a package for sliders, a package for animation, a package for parallax and a package for ajax. Before you know it, you are worrying about dependicies, conflicts and vunrabilities for many different packages. Since the push is to get rid of jQuery and use native javascript, often each will have their own utility classes, some of which do the same thing. This adds a lot of bulk to the website.

This is what I love about UIKit, it provides plenty of functionality for a small ~130KB unminified. Not many know this, but the UIKit helper classes are exposed via the API too. So it means you will not have to worry about your javascript working cross-browser (https://github.com/uikit/uikit-site/blob/feature/js-utils/docs/pages/javascript-utilities.md).

The perfect thing would be to combine UIKit and TailwindCSS, but the best way to achieve this is up for grabs. I personally use TailwindCSS base and implement components from UIKit. I then use PurgeCSS on the CSS file to make sure anything unused by either UIKit or Tailwind isn't making it to production. I do this using Parcel JS. I have used Webpack and Gulp previously, but I find Parcel is a simple and easy way to get a project started (and it's fast!).

The next thing I've found is UIKit is not always the answer. There are now more than ever better ways of achieving things in browser. Such as CSS Grid, `position: sticky`, and `object-fit` try to use these CSS alternatives where possible. Purge will always make sure that you get the smallest possible file size, so avoid using the uk-grid element where possible and use CSS Grid.

I have setup a github starter template (https://github.com/TomS-/UIKit-TailwindCSS/tree/master) if you want to have a look at it. CSS Grid will introduce intrinsic design (https://www.youtube.com/watch?v=lZ2JX_6SGNI - Great series) Next will be to use WebP, there is plenty going around on the blogs now about this, but this will make a massive improvement to your Google Page Insight rating (https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.tikari.co.uk%2F&tab=desktop).

 

I would love to hear your web manifesto - and ask me anything about mine ?

[wbmnfktr]

I wouldn't call it a manifesto but anyway... let's talk about my workflow.

TL;DR

I build 90% from scratch. Every time. Each and every project.
I don't use frameworks of any flavour.*

* except from some JS stuff - see below

Long version

My boilerplate for new projects:

• SCSS Skeleton (my personal collection of SCSS Magic)
• JS Skeleton (my personal collection of JS Magic)
• HTML/Kit files depending on templates and elements the project needs (inspired by http://bradfrost.com/blog/post/atomic-web-design/)
• just an empty folder would work totally fine as well

Tools I use and need:

• git
• Prepros/CodeKit (or ProCache ?)

Tools that may be added later (if absolutely necessary):

• Lazysizes
• SVGinline
• jQuery for
• Slider scripts (slick, OwlCarousel)
• MixItUp

Tools I never use (because I'm too old for that - I guess)

• Grunt, Gulp, Bower, Webpack, Parcel, ... you get the idea

Benefits

• Projects are portable
• Projects run everywhere
• Every part of project can be changed without affecting other things (most of the time)
• No need for a special setup (at least for the compiled files)
• Small(est) file sizes and therefore fast websites (in most cases)

Downsides

• Working with others means I have to trust them and their capability to write good CSS/SCSS
• You have to think at least twice for each step, every time
• It takes much more time to build everything from scratch 
• It's much more expensive at first
• Clients often don't understand the benefits and sometimes WANT a Bootstrap website ?

FAQ

• What if you work with others?
  As mentioned before I have to trust others that they are capable of writing good CSS/SCSS and therefore I tend to work only with very good people I really trust.
• Is it worth it?
  Yes!
• Why?
  When stuff breaks or needs to be changed, I know where to look, what to change and can do my stuff without the need to take care of any version upgrades, incompatibilities in or with newer version, I don't need a special setup or whatever. AND... if I want to I can still add whatever is needed. Try it the other way around. That's much harder.
• Are there exceptions?
  Of course. Backend stuff, admin interfaces and things like - ProcessWire admin is the perfect example. I wouldn't build something like that from scratch.

 

I guess that's my manifesto.

[wbmnfktr]

Additional side note:

It seems my post confused a few of us. Therefore a few more details about my workflow.

Clarification

The above mentioned workflow does not involve ProcessWire.

This workflow applies only to the part of creating HTML, CSS and JS for a project in its static version. You can call it a prototype, a template library, a loose collection of web-related documents, or however. This step is done way before I fire up ProcessWire (or give the files to another developer in case of Typo3, the CMS we don't name here or whatever).

Each time I start a new client project for a website I already have in some kind a full-featured, defined and approved design - either made in Adobe PS, IS, XD, Sketch, Figma or any tool you can imagine - most of the time it's not my part to be honest.

I can then work out each and every detail, plan out the things that were needed, look for repetitive elements and their modifications and states.

The result of that (my work) needs to get an approval by the designer and the client - afterwards I create a new ProcessWire instance and migrate everything in template files and smaller bits I will need later on. With this overall approach I have had enough time to know how to structure the data and content in ProcessWire which makes things in it super easy and super fast most of the time.

 

Hope this helps.

[bernhard]

On 8/22/2019 at 6:30 PM, Tom. said:

This is what I love about UIKit, it provides plenty of functionality for a small ~130KB unminified. Not many know this, but the UIKit helper classes are exposed via the API too. So it means you will not have to worry about your javascript working cross-browser (https://github.com/uikit/uikit-site/blob/feature/js-utils/docs/pages/javascript-utilities.md).

Just wanted to thank you @Tom. for that brilliant hint! I'm not that experienced in frontend stuff, so basic tasks like slide-toggling a menu can really be a pain for me ? I've always made it easy for myself and just included jQuery for such things...

Today I tried the UIkit JS utils and it's not that hard to do (here I'm using Zepto.js, but that's not a necessity):

var util = UIkit.util;

$(document).on('click', '.tm-burger', function(e) {
  e.preventDefault();
  var $menu = $('#tm-menu-section');
  var element = util.$('#tm-menu-section');
  var duration = 700;

  if($menu.height()) {
    // hide menu
    $menu.height(element.scrollHeight);
    util.Transition.start(element, {
      'height': 0,
      'overflow': 'hidden',
    }, duration, 'ease');
  }
  else {
    // show menu
    $menu.removeAttr('hidden');
    $menu.height(0);
    $menu.css('overflow', 'hidden');

    // trigger window resize to make sure that the menu renders correctly
    $(window).resize();
    
    util.Transition.start(element, {
      'height': element.scrollHeight,
      'overflow': 'show',
    }, duration, 'ease').then(function() {
      $menu.height('auto');
    });
  }
});

The benefit here is that I don't need any dependencies and I can create any transitions that I need and I'm not limited to jQuery's .slideUp() .slideDown() etc. ? 

[horst]

@Tom. Interesting thread!

I do not use any FrontendFramework if I don't have to, (only jQuery). I more and more try to understand the basics and don't want to learn frameworks. Additional to that, I can copy paste the most from @wbmnfktr post, because my setup is as follows: ?

My boilerplate for new projects:

• Starting with one out of 3-4 personal PW-profiles, that are more or less without content, but with special configurations and modules
• my personal SCSS Skeleton
• jQuery and / or some personal JS-snippets

Tools I use and need:

• git
• my own Preprocessor- and Minifier module in PW
• some code and scss snippets bound to the $config->debug state for developing

Tools that may be added on demand:

• Lazysizes
• Slick Slider script
• MixItUp script

Thats my tools that give me freedom from things like grunt, gulp, whatever:

Spoiler

The first one is my preprocessor and minifier pw module that detects every single file change of js, css, less and scss files (and the @import dependencies) automatic on page load. It can process less & scss and can minify css, js, html.

The second one are three little buttons in the top left on frontend pages that can toggle a breakpoint indicator and a hierarchical background color system to identify html elements dimensions and positionings.

 

[AndZyk]

20 hours ago, bernhard said:

Today I tried the UIkit JS utils and it's not that hard to do (here I'm using Zepto.js, but that's not a necessity)

Isn't that basically for whats the toggle of UIkit component is for? ?

1 hour ago, horst said:

I more and more try to understand the basics and don't want to learn frameworks.

Understanding the basics is important. But if you have to build large websites is a solid foundation really handy, so you can focus more on the content than on writing basic components. ?

[bernhard]

2 minutes ago, AndZyk said:

Isn't that basically for whats the toggle of UIkit component is for? ?

No, I thought so as well, but this is really just toggling the visibility. You can then add some animations, but that's not the same as the jQuery slideToggle does:

This is UIkit toggle + animation slide-top (see how the yellow div toggles instantly):

This is a custom transition changing height from 0 to auto smoothly:

[wbmnfktr]

10 minutes ago, AndZyk said:

But if you have to build large websites is a solid foundation really handy, so you can focus more on the content than on writing basic components.

No matter how large a website will become... the main elements will stay the same. Just a different location, order or color.
Most developers don't create (the) content anyway and in an agency or colab you split work most time as well.

It's not totally impossible to maintain a large set of elements - especially when you have a few years of experience in doing and building such things AND have the ability and time to plan things out.

I really like UIKIT and what their dev team has created there but... I still don't want to use it but get why others like it (or Bootstrap or Foundation or ...).

And in my opinion... the best foundation for a large webproject is a blank file. ? 

 

[AndZyk]

6 minutes ago, bernhard said:

No, I thought so as well, but this is really just toggling the visibility. You can then add some animations, but that's not the same as the jQuery slideToggle does:

Ah ok, I thought you didn't knew, that you could add animations to the toggle component. If you wan't another animation other than the animations of the animation component, you could add different classes and animate them with css. ?

https://getuikit.com/docs/toggle#animations

9 minutes ago, wbmnfktr said:

No matter how large a website will become... the main elements will stay the same. Just a different location, order or color.
Most developers don't create (the) content anyway and in an agency or colab you split work most time as well.

Sorry, it was not my intention to turn this thread into another discussion about frameworks. I just wanted to share my opinion, why I like to use them.

But of course this is just my opinion and I also like to start with a blank page. ?

[bernhard]

54 minutes ago, AndZyk said:

Ah ok, I thought you didn't knew, that you could add animations to the toggle component. If you wan't another animation other than the animations of the animation component, you could add different classes and animate them with css. ?

https://getuikit.com/docs/toggle#animations

Did you see my example gifs? Maybe you (or anybody else) can show me how I can SLIDE-toggle the white div here: https://jsfiddle.net/baumrock/1uaLmxo7/7/

BTW: It's also easy to rotate elements with the uikit js framework ? 

util.Transition.start(burger, {
	'transform': 'rotate(270deg)',
}, duration, 'ease');

[AndZyk]

12 hours ago, bernhard said:

Did you see my example gifs? Maybe you (or anybody else) can show me how I can SLIDE-toggle the white div here: https://jsfiddle.net/baumrock/1uaLmxo7/7/

Ok, so in this case the jQuery slideToggle function would be easier, because if you want to animate the height of a div with CSS transitions, you have to know the height first:

https://jsfiddle.net/qc3drkuz/

Rotating something with a CSS transition on the other hand is easy.

However, I just wanted to show, that you can add custom animations to the toggle component. But you could also do this via JavaScript. I prefer to animate with CSS. ?

[bernhard]

51 minutes ago, AndZyk said:

because if you want to animate the height of a div with CSS transitions, you have to know the height first

Thx for the example. Yeah, I need auto height - seems to be possible only via javascript ? 

54 minutes ago, AndZyk said:

Rotating something with a CSS transition on the other hand is easy.

Not for me ? This answer states this solution:

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

So if I wanted to rotate an icon 45 degrees when hovered I'd have to create a class like

.hover-45:hover { transform: rotate(45deg); }

Do I still need those -webkit -moz -o ... versions? Is using javascript for that any bad?

Sorry, we are getting off-topic. So maybe someone can ask my questions and then we'll come back to the web manifesto ? 

[AndZyk]

22 minutes ago, bernhard said:

Not for me ? This answer states this solution:

Here I made a little example with a simple CSS transition: https://jsfiddle.net/x8gwrbys/

22 minutes ago, bernhard said:

Do I still need those -webkit -moz -o ... versions? Is using javascript for that any bad?

I have Autoprefixer in CodeKit for all those prefixes, so I don't have to write any prefix again. I can really recommend it.

But for example transform is now a few years old and well supported, so you don't have to write prefixes for transform anymore.

JavaScript for animating is not bad. But CSS animations have in general a better performance. For small animations there is not much of a difference, but on heavy animations you can really slow down a computer with JavaScript animations in my experience. ?

[gebeer]

On 11/22/2019 at 12:26 AM, horst said:

The first one is my preprocessor and minifier pw module that detects every single file change of js, css, less and scss files (and the @import dependencies) automatic on page load. It can process less & scss and can minify css, js, html

Hello @horst This looks very interesting. Is it available in the module directory? Couldn't find it. I'm currently looking into setting up a site profile that follows atomic design principles. Part of which would be asset management/compilation.