Core Framework vs Easy Custom Code (LESS/CSS/JS) – Live editing

Core Framework is a visual CSS framework and design-token builder. Define colors, typography, spacing, layouts, components, utility classes, and custom styles in one project, then generate the CSS used by your WordPress site. The plugin and all included integrations are free and open source. There is no license activation and no paid feature gate. Features Visual framework and design-token editor Fluid typography and spacing scales Color shade and tint generation Utility classes, components, layouts, and custom stylesheets Project import and export Gutenberg integration Bricks integration Oxygen integration Figma synchronization Integrations Enable the integrations you use from Core Framework → Add-ons. Gutenberg, Bricks, Oxygen, and Figma support are included with the plugin; they are not separate paid add-ons. Marketplace The Core Framework Marketplace sells optional design kits and packs. Those content products are separate from the plugin and are not required to use any Core Framework feature or integration. External services Core Framework works without a Core Framework account or hosted Core Framework backend. It makes an external request only when an administrator explicitly asks for one: The bundled font catalog is local. Selecting or previewing a Google Font requests CSS from https://fonts.googleapis.com. Importing it also downloads font files from https://fonts.gstatic.com, after which WordPress serves the saved font files locally. Requests identify the selected font family and variants; as with any web request, Google receives connection information such as the site’s IP address and user agent. No Google API key or Google account is required. Google Terms of Service: https://policies.google.com/terms Google Privacy Policy: https://policies.google.com/privacy Direct Figma-to-WordPress synchronization connects the Figma plugin directly to the user’s own WordPress site using a connection key created by a site administrator. Project data is not routed through Core Framework servers. Remote project import is optional and runs only when an administrator pastes a shareable project link or project ID and submits it. WordPress then requests that project from https://us-central1-core-framework-6bdc9.cloudfunctions.net/getPreset. The request is made by the server rather than the browser, sends no credentials, and the endpoint is read-only: it returns a project only when its owner has marked it as public. Nothing is sent unless an administrator submits a link, and no account is required to import one. Apart from the requests listed above, the plugin’s administration interface, image previews, project storage, CSS generation, and included integrations do not load assets from Core Framework servers. Core Framework does not contact a licensing server and does not require account activation. Licensing Core Framework’s original source code is licensed under the MIT License. Bundled dependencies retain their own open-source licenses. The release archive includes third-party-notices.txt for adapted source and artwork and third-party-licenses.txt for the complete production dependency inventory.

The Easy Custom Code WordPress Plugin lets you easily customize your WordPress website by adding your own LESS, CSS, and JavaScript code directly via the built-in WP Customizer. With this plugin, there’s no need for a child theme or additional files. Simply insert your custom code, and it will be compiled into a minified CSS file for styles and a JavaScript file for scripts. This lightweight plugin is designed for ease of use, providing a seamless and organized way to manage custom styling and scripts without affecting core theme files. VIDEO (How it works?) FEATURES Easily add custom LESS, CSS, and JavaScript to your site. Manage unlimited external stylesheets and scripts via a modal window. Control JavaScript placement (head or footer) for optimized performance. Insert custom HTML in key areas: Inside the tag. Immediately after the opening tag. Before the closing tag. PRO FEATURES Minified CSS Output – Option to enable automatic minification of compiled CSS. Full-Screen Editor – Maximize the code editor for a distraction-free coding experience. What is LESS? LESS is a CSS preprocessor that allows for variables, nested rules, mixins, and more, making your stylesheets more efficient and maintainable. LESS code: @global_color: #FF0000; @global_font_size: 14px; @secondary_color: #CCC; body { color: @global_color; font-size: @global_font_size; } .container { color: @secondary_color; font-size: @global_font_size * 2; } Outputs the following CSS: body { color: #FF0000; font-size: 14px; } .container { color: #CCC; font-size: 24px; } For full LESS documentation, visit lesscss.org. Demo Try Demo Username: demo Password: demo