How to use UI kits?

Hello.

Can I actually use some kits like Flat UI and add its CSS files to Webflow to just use its elements and classes?

Can I import CSS so Webflow will add new classes based on it?

I once tried to add Bootstrap css from a cdn service and it worked pretty well. Name your classes accordingly and it works. The downside is that it only work on published sites, you don’t see the bootstrap styles in designer mode.

Did this http://mtrl-design.webflow.io with this
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.css

:smile:

Did you add these js and css files via custom code in site settings?

Is it possible to do so via embedded code?

I was thinking about this some time last year and created a UI KIT solely in Webflow. You can check it out here: Leafee UI KIt

I found it easier than plugging in an external framework that you can only really notice after publishing. Hope this inspires you or helps you find a solution. This is a longer process but saves you more time in future. I have created a few UI Kits in Webflow that I will be releasing soon.

1 Like

I only added the css, not js, like this in custom code area in settings:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.css">

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.