Pathos316 Posts - Answer Overflow

Pathos316

•Created by Pathos316 on 9/5/2023 in #front-end

Refactoring a Webflow site’s CSS

Hi all! I’ve decided it’s time to refactor the CSS to a site I made with Webflow. Currently, I’ve named the elements using BEM: e.g. there’ll be a class like “.hero_image” that defines things broadly, and then a subclass/“.hero_image .__contact” that defines things more specifically. I’m finding that, over 2 years, that this has led to a lot of DRY (don’t repeat yourself) violations. Currently, there are a lot of aspects like padding, font color, &c., that are consistent across elements that I think could be made their own class and applied where needed. Are there recommended resources out there for how to carry out a CSS refactor and what to look for in terms of anti-patterns/bad practices? Note 1: I’m happy to share snippets of the CSS here as needed. Note 2: I’m considering moving the site to astro.js, in which case I’d likely use sass to create the css, and I’d also be free to use var and similar CSS features currently not in Webflow. For the time being, however, the site will remain in Webflow. Thanks!

1 replies

KPCKevin Powell - Community

•Created by Pathos316 on 8/10/2023 in #front-end

Is it possible to use both Astro.js & Sass/Scss?

Same as title: Can you use Sass (or scss) in conjunction with the astro.js framework? I suspect that the answer is no—or that you could, but there wouldn’t be much point, since you can already write the css in each page with astro—but I wanted to verify.

6 replies

KPCKevin Powell - Community

•Created by Pathos316 on 6/6/2023 in #back-end

Tutorials on how to spot & diagnose javascript bugs?

A Webflow site I’m working on crashed and I’m in contact with their support team to fix. That said, I want to be better prepared to address/preempt this in the future. Are there any really outstanding tutorials you’d all recommend on how diagnose and fix bugs in javascript?

2 replies

KPCKevin Powell - Community

•Created by Pathos316 on 5/29/2023 in #front-end

Heroicons vs Font Awesome re: performance

I’m trying to get my webflow website to over 90% mobile performance on pagespeed.dev, and I’m currently at around 86%. One thought I’ve had is to stop using Font Awesome (which makes a javascript call to load the images) and to use svg images, like Heroicons, instead. My question is: is this change likely to produce the desired increase in performance?

8 replies

KPCKevin Powell - Community

•Created by Pathos316 on 5/17/2023 in #front-end

Seeking best approach to styling dynamic CSS content

I'm designing a website in Webflow. The site has card elements that each have assigned colors that correspond to their "rating". The current colors, however, aren't color-blind friendly. I'd like to add patterns to each card to fix this: zig-zags, Xs, Os, things like that, such that the texture can provide some context. I'd like to code this in CSS using gradient patterns, but I'm not clear on the best approach to accomplish this other than creating the illustrations and loading those in. My hunch is to do something like

.library__cardimage:has(background-color: #d7f6d2) {/*gradient pattern 1 */ }
.library__cardimage:has(background-color: #eef2ff) {/*gradient pattern 2 */ }
.library__cardimage:has(background-color: #ffebce) { /*gradient pattern 3 */ }

.library__cardimage:has(background-color: #d7f6d2) {/*gradient pattern 1 */ }
.library__cardimage:has(background-color: #eef2ff) {/*gradient pattern 2 */ }
.library__cardimage:has(background-color: #ffebce) { /*gradient pattern 3 */ }

But I suspect that this is incorrect for a number of reasons.

7 replies

KPCKevin Powell - Community

•Created by Pathos316 on 4/8/2023 in #ui-ux

Feedback on Prosocial Design Network Library

IRL, I’m one of the cofounders of the Prosocial Design Network. We’re a 501(c)3 that curates evidence based ways social media might be redesigned so as to promote prosocial behaviors. https://www.prosocialdesign.org I’d like feedback on our site. Specifically, I’d like to know: 1. Tell me about a time a new design idea from outside got established in the workplace; how did that come about? 2. What questions do you have while reading about any given intervention that aren’t getting answered? 3. Are there any other aspects of the site that are in anyway vague or unclear? And feel free to voice any other comments and observations you have about the site overall. Thanks!

11 replies

Gaming

Programming