Are there great alternatives to the Foundation responsive framework?

Always found foundation and MODx a terrific combination. Is there a substitute… even a paid version that would be as good or better?

I couldn’t really say how they compare but here’s all the ones I know about:

And, of course, https://getbootstrap.com/

Thank you. I really appreciate the the quick feedback. Was actually just looking at Bootstrap5. I’m doing the lynda.com essential training now to see if it’s something I can quickly jump over to.

1 Like

It’s worth adding Semantic UI is no longer updated, but a community fork called Fomantic UI has replaced it. :slight_smile:

I’m also a big fan of Tailwind, though that’s one of those systems you either love or hate with a passion. The twitter debates about it are wild. It fits how my brain works so I like it.

Did I see someone adding a MODX-friendly Tailwind plugin or Snippet? I’m also looking for an alternative to Foundation.

That would probably be @jako:

https://jako.github.io/MODXTailwind/
https://jako.github.io/TailwindHelper/

He held a talk about Tailwind on the recent MODXpo 2022 as well.

1 Like

This is terrific news. Definitely will try Tailwind.

Tailwind is something I’ve been looking at but I can’t get my head round it at the moment. I think I need to put a day aside to research it properly. When I started with Foundation there was a really useful extra to help get into it.

I didn’t try that, but I think this tool can be usefull, transforming elements from other frameworks to tailwind
Transform every element on any website to Tailwind CSS with Windy (usewindy.com)

1 Like

This has helped me understand a little about how it works…

…but I’m unsure whether the smaller projects I generally work on, can justify its use. I know when I started using Foundation, @designfromwithin built a MODX package that really got me into it. I’d be interested to know what he thinks in regard to using Tailwind on smaller projects as I know he’s a fan of it.

Oh Tailwind is simply fantastic!
I currently use a workflow of:

  • Gulp
  • SASS
  • TailwindCSS
  • TailwindUI
  • BarbaJS
  • GSAP
  • AlpineJS

With MODX supporting Static Resources, I can just edit chunks, templates and plugins in MS Code, simply add classes and have Gulp auto generate the CSS and JS…

It’s fast, powerfull, flexible and the result is truly a Google Pagespeed score of 100!
I don’t use jQuery anymore but AlpineJS so JS is tiny. CSS generated by Gulp and Tailwind is minimal only including actually used classnames.

Here the Gulp file I use now to setup my workflow:

var { src, dest, watch, series, parallel } = require("gulp");
var gulp = require("gulp");
var sass = require("gulp-sass")(require("sass"));
var sourcemaps = require("gulp-sourcemaps");
var autoprefixer = require("gulp-autoprefixer");
var rename = require('gulp-rename');
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var cssnano = require('cssnano');
var tailwindcss = require("tailwindcss");
var webpack = require("webpack-stream");
var minify = require("gulp-minify");

function scripts() {
  return gulp
    .src([
      "src/js/scripts.js"
    ])
    .pipe(
      webpack({
        mode: "production",
        output: {
          filename: "main.js",
        },
        module: {
          rules: [{ test: /\.css$/, use: "css-loader" }],
        },
      })
    )
    .pipe(plumber())
    .pipe(dest("production/"))
    .pipe(dest("modx/assets/components/my_theme/production/"))
    .pipe(minify())
    .pipe(dest("modx/assets/components/my_theme/production/"));
}

function styles() {
  return src("src/css/style.css")
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        outputStyle: "expanded",
        includePaths: ["./node_modules/"],
      })
    )
    .pipe(sourcemaps.write())
    .pipe(postcss([tailwindcss, autoprefixer]))
    .pipe(dest("production/"))
    .pipe(dest("modx/assets/components/my_theme/production/"))
    .pipe(postcss([ 
      cssnano(), 
    ]))
    .pipe(rename({ suffix: ".min" }))
    .pipe(dest("modx/assets/components/my_theme/production/"));
}

function watchFiles() {
  watch(
    ["src/css/*.css", "src/css/**/*.css"],
    { events: "all", ignoreInitial: false },
    series(styles)
  );
  watch(["src/js/*.js", "src/js/**/*.js"], series(scripts));
}

exports.default = watchFiles; // $ gulp
exports.sass = styles; // $ gulp sass
exports.watch = watchFiles; // $ gulp watch

tailwind.config.js:

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "modx/core/components/my_theme/**/*.{html,js}",
    "html/**/*.{html,js}"
  ],
  theme: {
    extend: {
      colors: {
        themeColorPrimary: '#308AAC',
        themeColorPrimaryDarker: '#066480',
        themeColorPrimaryLighter: '#7EBFD8',
        themeColorAccent: '#FF8343',
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

Then just add this to your style.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
1 Like

Thanks for your input Menno. For those of us that aren’t conversant with Gulp and SASS and perhaps feel a bit unsure about using the command line, is there any other possible way of using Tailwind or would you say we’d be better to use Bootstrap? I’m talking about, for sites with say, less than 50 pages that only use 4 or 5 templates.

Wanted to chime back in here. Been without power and internet for a while. Was just going to reach out to Menno, so his ears must have been burning. :slight_smile: Seems like forever ago I was jumping into MODx and foundation and reaching out to Menno for opinions and feed back. I am playing catch up but want to respond back as I get more into this. Thank you so much for the feedback and advice.

1 Like