Efficient Media Query Workflow for CSS files


#1

I’m starting my first Hubspot project and have begun moving all of my styles over from Zeplin to the primary CSS file through the design manager. I am trying to find an efficient way to work with media queries. Typically on projects I would use a structure like so in SASS:

.heading {
  font-size: 12px;

  @include bp-medium {
    font-size: 14px;
  }
]

bp-medium would just be a SASS mixin that outputs the content inside it into a @media screen and (max-width: 768px) {} block.

Is there to do a similar approach within Hubspot templates? I came across macros and these looked like they might almost fit the purpose but Im not sure if those are usable inside the CSS files.

The Boilerplate has the CSS nested as entire sections into breakpoints but this feels like such an old clunky disconnected approach. The alternative would be to write each media query after the first style like so:

.heading {
  font-size: 12px;
}

@media screen and (max-width: 768px) {
  .heading {
    font-size: 14px;
  }
}

but this would become quite cumbersome over the entire file, especially with multiple breakpoints.

Lastly I suppose I could just keep a SASS workflow local on my PC which I could compile and copy/paste into the editor (might be the best option) but it would be nice to have all the files included in the Hubspot project.

Any other suggested approaches or ways people deal with CSS on Hubspot sites are most welcome :slight_smile:

Cheers
Mikey


#2

Mikey, one quick thing you could do is move all your mobile styles to the bottom of your stylesheet. So instead of writing style / media query, style / media query you could simply group them all together by breakpoint.

Also, you might find it easier to move your code from Zeplin to another text editor like Sublime, then into Design Manager. Sometimes it’s a bit easier to format your code outside of HubSpot if you’re doing it large chunks. You could also take advantage of FTP as well if you don’t want to do everything in HubSpot’s IDE.

/ * – Main Styles – */
.heading {font-size:24px;}
.subheading {font-size:14px;}

/* – Mobile Styles – /
/
Large desktop */
@media (min-width: 1200px) { … }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1024px) { … }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

  .heading {font-size:24px;}
  .subheading {font-size:14px;}

}

/* Landscape phones and down */
@media (max-width: 480px) {

  .heading {font-size:18px;}
  .subheading {font-size:12px;}

}


#3

Hi Ken

Thanks for the response.

I actually find having media queries away from their elements to be much less efficient time wise. Having an elements styles across breakpoints in one place allows creating new elements and editing them much faster and clearer.

Thanks for the FTP resource, I didn’t know you could do that! My current workflow is building custom modules on my local in HTML and styling them with SASS, then copying my compiled minified CSS into the design manager. Its allowed me a much more organized set of files to work with and the benefits of things like auto prefixer and variables.

Cheers