re: What should production CSS look like? Share your layout-to-web workflow VIEW POST


i come from the Marketing side ( Ad agencies ), my experience may differ from yours if you're working directly with clients.

  1. You should always request a Desktop and Mobile layout at a minimum, if there is no way around it, do your best to adjust and make sure people are aware you're a dev and not designer, so expectations are set. Hopefully by then, they will provide you with the additional layout(s). I don't want to go down the rabbit hole how to design for devs because as a dev, you shouldn't be designing.

  2. I tend to lean into how frameworks create their grids, i normally create a sass mixin to output my columns, 12-grid fluid columns. I would suggest to look at Foundation or maybe Bootstrap. If this is a large project maybe import a framework, if this is a small project i would highly suggest to keep a list of handy mixins you can use in various project.

  3. Everyone should develop smallest-screen-first ( mobile-first ), and should start with two breakpoints, 768px and 1024px. Any additional breakpoints will be dictated by the design.

  4. With animations i would suggest to use GSAP, this animation platform tries to leverage css first but defaults to js. Let's be clear, when you refer to animations i am thinking of non-linear animations, something more then just a fade. Simple rollovers, effects should be in css but the fancy stuff should be with something similar to GSAP. You don't want to add unnecessary weight to your page.

  5. I always use Sass, I like using a process to build my Sass. Most of the current frameworks allow you to add linters, in my current project we are using Gulp, created task to clean, compile, and minified my code.

Not every project is the same, so a one solution approach will not work. Before any project you should start by asking yourself, What tools do i need?, you can use Angular, React, Vue, or even Static Generators like NunJucks. Always have a plan before you build.

code of conduct - report abuse