search

Codeinwp / neve

A fast, lightweight, AMP ready WordPress theme built with speed and usability in mind.
https://themeisle.com/themes/neve/
GNU General Public License v2.0
262 stars 84 forks source link

Allow custom breakpoints #2439

Open abaicus opened 3 years ago

abaicus commented 3 years ago

Description:

Allow the user to set custom responsive breakpoints. This can be achieved easily right now using CSS variables.

Alternatives:

Don't allow custom breakpoints definition.

cristian-ungureanu commented 2 years ago

This is the most voted request on Nolt, I think we should implement it.

abaicus commented 2 years ago

@cristian-ungureanu media queries don't support custom properties. This is a thing that I wasn't aware of when I posted this.

A workaround would be to rewrite the CSS on the user's website each time these change, but I doubt it's worth the hassle.

https://www.w3.org/TR/css-variables-1/#using-variables

cristian-ungureanu commented 2 years ago

Starting from this article I got to this plugin.

@abaicus maybe you can have a look over this, maybe we could use it. 🤔

abaicus commented 2 years ago

@cristian-ungureanu

@custom-media directives are in the draft spec for now here 🔗.

PostCSS is a dev tool that runs during the build phase and transforms CSS using JS. The postcss-custom-media plugin does just that. It can be useful in the same way we use SCSS variables 🔗 to not constantly repeat the same numbers and potentially get them wrong between usages.

Here is a CodePen 🔗 that showcases what happens when custom media queries get passed through PostCSS and the postcss-custom-media plugin.

PostCSS Custom Media

stefan-cotitosu commented 1 year ago

+1 https://wordpress.org/support/topic/neve-how-to-change-breakpoint/