What's everyone's choice of CSS framework and or methodologies for creating bespoke designs fast?

Tom Griffiths — Sun, 05 Jul 2020 08:34:31 +0000

Hi guys. I've been trying to work out the best workflow for creating custom CSS for my projects and it seems there's a lot of conflicting information out there. So I just thought I would ask the Dev community and see what you guys think.

Most of my work is building completely bespoke site designs from a Figma or sketch file, either designed by myself or via a design agency.

I often write my CSS from scratch, since that is what I'm used to and it tends to lead to lightweight, permormant and maintainable CSS. The downside is that it can take a really long time and I often find myself writing out a lot of similar CSS patterns project to project (especially for layout). There is also the problem of testing and responsivity that comes with this ground up approach. Another chunk of time involved in making sure it works cross-browser and across the spectrum of devices. I tend to use BEM as it keeps my CSS organised and very maintainable, but it just can be too slow sometimes.

I've been playing with tailwind. I like that I can get a template together in no time, and that I know it will work on all browsers and that it will be responsive. Definitely a headstart. But I find the long utility class names in the markup ugly, then I often still need to introduce some additional CSS in to tweak it here and there. Which just seems clunky.

I've tried other frameworks to help get a headstart on the CSS too, such as foundation. But then I often end up in specificity battles to get from a "foundation" looking site to make it into the custom design.

I don't mind being slow if it means I get it right. But I just wondered what process you guys use? Got any great workflows for building accurate designs in CSS super fast? Please share your ideas.

What's the industry standard/ best practices for converting a designers design to HTML & CSS.

Tom Griffiths — Sun, 17 May 2020 15:30:11 +0000

Hey guys, so I've been writing code for a while now and pretty comfortable with most things I need to build nice looking sites and UI's, good code practice included.

I've been chatting with a few designers and been introduced to some design agencies that are beginning to ask me to make sites for them from their designs.

Im more than comfortable translating a layout in Figma etc into HTML and CSS. But there's something thats preventing me from going for it. And that's how to handle the design between the provided (designed) breakpoints.

Most designs I have had shared with me have two designs for each page/section. One for mobile, and one larger for say 1440px laptop. What is the best practice for handling how it scales between the two. Obviously I'm going to need media queries, but do you scale the type sizes fluidly between the two and interpret the design and layout changes through the viewport widths between? For me it feels like there is an almost infinite range of possibilities for some scenarios, and I'm sure the designers would be very particular about how it looks. But, surely there must be some kind of industry standard way or expectation at least on what should happen there?

Just wanted some opinions on the best way to go about it. If anyone could shed some light or share an opinion I would be grateful to hear it.

DEV Community: Tom Griffiths

What's everyone's choice of CSS framework and or methodologies for creating bespoke designs fast?

What's the industry standard/ best practices for converting a designers design to HTML & CSS.