Normalize.css, webflow.css Media Queries information

Hello,

I had some specific questions about the exported code from webflow. From what I can tell the media queries information is stored in the webflow.css file toward the bottom. But what is all the gibberish at the top following the @font-face tag? I agree the css and html files are very clean code but the webflow.css and normalize.css appear to be a mess and very hard to edit. Is there a reason for this?

Thanks!

You can use something like http://cssunpacker.com/ to make the files a bit more read/edit-able. These files appear to be the same for every webflow export and contain the necessary rules for cross-browser compatibility and their grid for common classes such as .section, .container etc.

The 3rd file in the export your-named-project.webflow.css is where all your styling magic is stored and also has media queries towards the bottom. Often I need to add a media query or two…or three and maybe massage a few things but I rarely need to edit webflow.css and normalize.css. (except once where the normalize.css wasn’t up to date with the latest normalize release =)

Do you have any idea if the normalize.css file can simply be replaced as new versions are released? I know it would need to be tested prior to making live but are there any edits made by Webflow that would be lost?

I’m not sure but the github how-to states:

“It is recommended that you include the normalize.css file as untouched library code.”

so I would hope it could simply be overwritten to update it but then again, the webflow version states:

“normalize.css v2.0.1, along with Webflow base CSS | MIT License | anishathalye (Anish Athalye) · GitHub

The latest repo version is 3.0.

Hmm I wonder why it’s on github. Does it use open source elements? I had been wondering if there was any way to use webflow offline. Maybe this is a clue? And ideas?

Its on github so the author can share it with the world =)

So, no it’s just the normalize version of a css reset. Webflow bundles in some common components that are both open source and free to the world and proprietary.

I would be really interested in a self hosted offering but I think webflow is really geared to be successful as a SaS offering. If they figure out a way to license and profit off a self hosted version, they can possibly reduce the plan pricing too as this is less costly for them not to have to host the files and pay for our bandwidth too.

This may come in time but for now they need to focus on growth to keep this great thing going.