🎨 Newlogic UI

Lightweight, modern and modular CSS framework with the best principles

• 💡 Modern
• 📦 Modular
• 📏 Responsive
• ✨️ Progressive
• ⚡️ Fast

Příprava projektu pro implementaci

1. nainstalovat node - npm i
2. nainstalovat cms - newlogic init cms
3. vytvořit si db na devlogic.cz a nastavit v config/local.neon
4. spustit docker compose up a vite
5. spustit make prepare
6. spustit make phinx-seed
7. nastavit FTP_SERVER, DB_USERNAME a DB_PASSWORD a vytvořit prostor na devlogic.cz
8. commitnout změny a pushnout

Newlogic UI is component framework with easy syntax for backend integration. Modern approach of CSS properties, enriched with utility classes from TailwindCSS and powered by Winduum.

Javascript implementation is only 28 kB and mainly intended for use on backend rendered websites and applications with PHP framework Nette

⚙️ Under the hood

• Vituum - plugins for Vite, adds support for template engines and more.
• Newlogic Core - starter pack for creating modern web applications. Powered by Vite and Vituum.
• ESM - completely written in modern JS syntax - esnext, ES modules, etc.
• PostCSS - completely written in modern CSS syntax - nesting, variables, etc.
• Tailwind CSS - rich utility classes for everything
• Stimulus - a modest JavaScript framework for the HTML you already have
• Dark mode - creating dark mode was never easier
• Easy syntax - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.

Newlogic UI uses Newlogic Core, which compiles modern JS and CSS syntax via Vite and Vituum. Source code can be used with any other tools or even different environment than NodeJS, e.g. Deno and is written in W3C standards and should be runnable in current or future version of browsers.

🪄 Get started

Creating a new project (with Vituum and Newlogic Core)

$ git clone --depth 1 https://github.com/newlogic-digital/ui.git newlogic-ui-project
$ cd newlogic-ui-project && npm i

$ vite

or

$ vituum build

Or in any other environment

$ npm i @newlogic-digital/ui

/* main.css or individual modules */
@import "@newlogic-digital/ui/src/styles/main.css"

/* main.js or individual modules */
import "@newlogic-digital/ui/src/scripts/main.js"

Requirements

• Node.js LTS (16.x)
• NPM (9.x) or any other package manager

Licence

GNU GPLv3