Good morning! I began to study uikit and immediately the question arose: how to correctly rewrite the css styles of the framework to your needs?

Here I have uikit.less, in which all the other less framework files are connected:

// LESS related @import "core/variables.less"; // Defaults @import "core/base.less"; // Layout @import "core/grid.less"; @import "core/panel.less"; @import "core/block.less"; @import "core/article.less"; @import "core/comment.less"; @import "core/cover.less"; // Navs @import "core/nav.less"; @import "core/navbar.less"; @import "core/subnav.less"; @import "core/breadcrumb.less"; @import "core/pagination.less"; @import "core/tab.less"; @import "core/thumbnav.less"; // Elements @import "core/list.less"; @import "core/description-list.less"; @import "core/table.less"; @import "core/form.less"; // Common @import "core/button.less"; @import "core/icon.less"; @import "core/close.less"; @import "core/badge.less"; @import "core/alert.less"; @import "core/thumbnail.less"; @import "core/overlay.less"; @import "core/column.less"; @import "core/animation.less"; // JavaScript @import "core/dropdown.less"; @import "core/modal.less"; @import "core/offcanvas.less"; @import "core/switcher.less"; // Need to be loaded last @import "core/text.less"; @import "core/utility.less"; @import "core/flex.less"; @import "core/contrast.less"; @import "core/print.less";

After that, using winless, I compile uikit.less into a folder with css styles and connect in the main css file:

 /* Theme Name: Version: Author: */ @import "css/uikit.css";

Actually, according to uikit, there is little information in Russian, but I read on the toaster about the bootstrap and they write there that it is not desirable to touch the core of the framework itself. It turns out that you can not edit the components? And if you write styles to the main css file on top of the framework styles, you get code duplication.

How do you type using the framework that you advise in my case? thank

    2 answers 2

    If you don’t need to use this framework, then it’s better to write your styles from scratch, and logically split them into separate .css files right away, and it will be more convenient for you, and the readability will improve, and it’s easier to debug if that. You can dig into the bones of the framework and try to change .css in a ready-made solution, but you risk breaking everything very badly. It may make sense to take some parts from the framework and create your own styles separately, if you don’t want to carry the entire frame.

    • Just a hunt to speed up the layout process. - Rodion Polyakov

    I personally use UIKit customizer