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. 
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. 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
why do you find it terrific? I use foundation in alot of projects. I have also used tailwinds, but I am used to doing everything in sass so right now I am still 2 ways about tailwinds.
I must say, it’s terrific to see that the MODx forum is more robust than ever. I took a look and it seems like tailwind way reduce css for you existing, built project, so that the overall size is smaller. I’m not used to working on my computer though, and it seemed as though one must install via command line and then post final project online when completed. Again, I might be misunderstanding, and not sure whether Tailwind is something to use when building a site from scratch. I have been away from development for a few years, and it’s certainly proving a bit tricky to get back on the horse. I kind of wonder if Tailwind might be a bit overkill for the small project I am building.
If it’s really, really simple and small you’re looking for, then you might also like Pico CSS.
I’m using Fomantic UI for most of my projects, but to be frank, I’m growing tired of the whole Javascript tool stack required to build your asset files (applies to most other frameworks too). One does not simply… run npm update on a 1 year old project. With Pico, you have no NPM, no depencies… Not even any JS.
And another benefit is that it doesn’t need classes by default. It styles the HTML elements directly. Ideal if you’re planning to use Markdown files as content, by converting them to HTML.
2 Likes
having used Bootstrap for a few Modx sites, it’s really easy to implement if you are using the cdn, and will give you a great starting point if you are focusing on the development side and want a safe uniformed looking site.
however, may get a bit cumbersome if you decide that you want more of a custom design, you will have to start looking into the sass files.
Tailwind sounds interesting, gives you much more flexibility on design (at the expense that your html will look ugly) but I have not found a large enough project to use it on,
1 Like
Thanks for all the input on here. As mentioned above, on smaller sites working locally with SASS is overkill (for me anyway) and alternatives seem to use the command line which again just isn’t ‘on my radar’ and not worth getting into for smaller sites. Foundation worked beautifully to begin with because you could set up and download a customised build in straight CSS - that’s what really got me into it.