Usage

Newlogic UI is a meta-framework built around modern web standards for fast, accessible and modern web applications websites. Built with a backend-driven philosophy, it ensures seamless integration, efficient data handling, and robust performance across various platforms and devices.

Under the hood:

• Vituum - fast prototyping with template Engines in Vite
• Vite - next generation frontend tooling
• Winduum - a small modest CSS component framework for TailwindCSS
• TailwindCSS - rapidly build modern websites without ever leaving your HTML
• Naja - a full-featured JS client-side AJAX library for Nette Framework
• Stimulus - a modest JavaScript framework for the HTML you already have
• Swup - versatile and extensible page transition library for server-rendered websites
• eslint - find and fix problems in your JavaScript code
• stylelint - a mighty CSS linter that helps you avoid errors and enforce conventions

Newlogic Core

The Newlogic Core plugin for Vituum, along with other plugins, ensures a smooth project setup and prototyping experience with support for various template engines.

Directory Structure

All resource files are located in the /src directory. At the subdirectory level we are using well established structure similar to Nuxt or Next.

• components
  • we recommend the following best practices with structure and naming as mentioned at Nuxt
  • furthermore, it's recommended to use groups similar to Next's route groups for better organization
• composables
  • here comes your JavaScript composables, mainly used for reusable functionality you want to use elsewhere, similar to Nuxt
• utils
  • here comes any JavaScript utility functions or stylesheet utility classes you want to use throughout your application, similar to Nuxt

Every style and scripts subdirectory also generates a + file with auto imports via Vituum's imports plugin.

The top-level directory structure is also the same as Vituum's.

assets

Directory for static files such as images, fonts etc. that should be processed with Vite.

data

Directory for your common .json files which can be used in templates globally. The default file included is main.js which includes common variables used in default layout template file such as paths to styles and scripts.

pages

Directory for your pages routes. Pages are defined in .json where you can define any metadata for your page. Each page is also inheriting .json files from data directory.

Common Metadata

• title - your page title
• body - array of components to render on page
• template - path to a layout template

Example

{
  "title": "Newlogic UI",
  "body": [
    {
      "src": "(sections)/Site.latte",
      "heading": "Hello world"
    }
  ]
}

scripts

Directory for your javascript files, modern plain JS should be used.

• components - your components scripts, mainly stimulus controllers
• composables - your composables scripts
• utils - your utils scripts

styles

Directory for your styles, modern plain CSS should be used. It's recommended to use styles only for basic styling and configuration. Everything else should be done with TailwindCSS. We encourage the philosophy of Winduum including data-part attribute.

• base - your base styles
  • theme - more info at winduum/theme
  • breakpoints - more info at winduum/breakpoints
  • config - more info at winduum/config
  • defaults - more info at winduum/defaults
  • keyframes - more info at winduum/keyframes
• components - your components styles
• emails - your emails styles
• utils - your utility styles

templates

Directory for your templates processed by Vituum. Primary used for prototyping or static content.

• components - your components templates
• emails - your emails templates
• layouts - your layout templates, similar to Nuxt
• utils - your utils templates

views

Directory for your templates processed by Nette Framework, or other backend framework. Primary used for production templates. Structure is the same as templates directory.

The idea is to prototype your templates using the templates and pages directories. Once finalized, these templates are copied to the views directory, where they are integrated with real data for a production-ready, backend-driven approach.

After that you can still use templates directory, for prototyping your changes before someone integrates them for production in backend.

Icons

It's recommended to follow practices from Winduum. We are using singular svg file for reusable icons in src/icons.svg.

TailwindCSS

Winduum is used as a base plugin for TailwindCSS. Config can be extended in tailwind.config.js. There are two configs, one for websites and one for emails.

ViteJS

Config can be extended in vite.config.js. You can extend either Newlogic Core or Vite itself.

• npm run dev - run a dev server
• npm run build - build all files to public directory
• npm run build-production - build only styles and scripts to public directory
• npm run build-emails - build only emails to public and views directory
• npm run cleanup - remove all gitignored files except userfiles directory

Eslint

We are using neostandard which is a spiritual successor to the standardjs javascript style guide and rules.

• npm run eslint - show eslint problems
• npm run eslint-fix - fix eslint problems

Stylelint

We are using @stylistic/stylelint-config and stylelint-config-standard rules

• npm run stylelint - show stylelint problems
• npm run stylelint-fix - fix stylelint problems