Help and mentoring

Are you stuck with some code? Post your issues in here and someone will be along to help.

2 Likes

What’s the best way to manage and document/audit CSS as you work? I design in the browser and finding on large sites that things can start to sprawl… at fault is (maybe) my tendency to experiment and then scale back to “essentials” but also dealing with unknown and developing client content. Appreciate any tips or ideas.

Very good question.

When I design in the browser, I tend to do the design process as rough as possible, writing pretty janky CSS, because in my head, in the main design phase, I’m making prototypes. Only after this main phase, I’ll start writing production CSS in components.

In terms of documentation: I’m a big design systems advocate, so even a small component library, using something like Fractal or Storybook would be really helpful.

1 Like

Hey @hankchizljaw, I recently used both SCSS and NPM Scripts on a project for the first time and I feel like I’ve taken a big step forward in terms of having a professional workflow. I basically have a bunch of dev dependencies like node-sass etc that turn my compile my SCSS into CSS and a bunch of other stuff such as compression etc. I really want to try Goron out but I’m not 100% sure how to start using it. Would I install as a dev dependency and then slot it into my build process - after node-sass has compiled my SCSS? Thanks in advance bud

"devDependencies": {
"autoprefixer": "^9.7.6",
"concat": "^1.0.3",
"node-sass": "^4.13.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.0"

},
“scripts”: {
“watch:sass”: “node-sass sass/main.scss css/main.css -w”,
“devserver”: “live-server”,
“start”: “npm-run-all --parallel devserver watch:sass”,

"compile:sass": "node-sass sass/main.scss css/main.comp.css",
"concat:css": "concat -o css/main.concat.css css/icon-font.css css/main.css",
"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/main.concat.css -o css/main.prefix.css",
"compress:css": "node-sass css/main.prefix.css css/main.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"

},

I’ll be honest, I wouldn’t recommend using Goron right now. It’s very much pre-alpha and severely lacking documentation and stability!

Maybe look at the way my Eleventy starter kit, Hylia uses tokens with Sass? https://github.com/hankchizljaw/hylia/blob/master/package.json#L32

Ha ha Appreciate the honesty @hankchizljaw! So it looks to me like I’d need to create a json file similar to tokens.json and include a package called json-to-scss which would turn my json into SCSS so would become the first step in my build process? Sounds do-able even for a noob like me!

1 Like

Yeh that’s essentially what Hylia does. The reason the JSON lives in _data is that allows it to be content managed.

In the Sass, I generate utility classes with the variables and maps that json-to-scss creates :+1:

Yeah I saw that in the Theme Settings. Cool feature! Thanks @hankchizljaw!

1 Like