Jump to content
Tom.

My Web Manifesto (UIKit + TailwindCSS + Grid)

Recommended Posts

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 🙂

  • Like 13

Share this post


Link to post
Share on other sites

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.

  • Like 7

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...