Skip to main content
Home
PNW Drupal Summit 2024

Main navigation

  • Conference
    • Program at a Glance
    • Call for Speakers
    • Schedule
    • Sessions
    • Birds of a Feather
    • Social Events
    • Trainings
    • Location
    • Tickets
  • Sponsors
    • Our Sponsors
    • Become a Sponsor
  • About
    • Code of Conduct
    • History
    • News
    • Scholarships
    • Volunteers
  Watch session recordings 

Breadcrumb

  1. Home
  2. Accepted Sessions, A-Z

Drupal Theming With SDC, Vite, And UnoCSS

Time Slot
Sun 1:30pm to 2:30pm (10/13/24)
Room
MGH 271

Vite is a front end development tool for bundling assets and hot reloading code during development.

Many of us are already using CSS tools like sass, which need to be compiled before deployment.

Javascript has taken over the front end, and now also needs to be compiled to run correctly. That used to mean transpiling ES6 code to make it compatible for browsers, but now involves bundling dependencies in module imports.

As we add more tools, the build slows down. Previous tools like compass and grunt were just ruby and node scripts, but the current generation of tools use compiled binaries in languages like rust and go, so they are much faster. See also Bun, Rollup, Parcel, ESBuild.

Vite compiles code quickly, but it's main advantage over other options is that it runs a server in dev mode that can hot reload in your browser when code changes. The speed lets you load it up with your favorite tools and still see your changes instantly.

UnoCSS is a tailwind engine, with some enhancements for development speed and configuration. 

I have worked with Vite and UnoCSS extensively over the last year, across several projects. I also contributed some patches to the Vite module to make it compatible with SDC components.

In this session, I'll share my vite/unocss setup and explain how to use it with SDC components.

(This could be a training session if we need to fill those slots)

mortona2k
Audience
Intermediate
Session Category
Development and Performance

Our Sponsors

Mount Rainier

A gold star with the word in lowercase print, esteemed, printed next to it on the right.
A purple and blue Drupal drop and the word herodevs.

Mount Baker

Slalom logo
Cellar Door
Forum One: Turn Ideas Into Impact

Mount Adams

Drupal4Gov
ATEN - Work that Matters - Company Logo
Mind Sing logo. Yellow, green, blue, and red blocks stacked at a 45 degree angle to the viewer.
Kanopi Studios
Tag 1 logo.

In Kind Sponsors

Forcontu Drupal Training & Consulting
DrupalEasy
Agaric Technology Collective
University Marketing & Communications | University of Washington

Follow us

Pacific Northwest Drupal Summit
 LinkedIn  Facebook  YouTube  Email List

Media Partners

The Drop Times

©Copyright Pacific Northwest Drupal Summit 2025. All rights reserved.

Powered by Drupal