# About New UI New UI is a modern, semantic UI framework for building beautiful, accessible sites and apps. ## Templates Beautifully crafted, production-ready, and easy to deploy templates. - [Templates](https://new-ui.com/templates) — Beautifully crafted, production-ready, and easy to deploy templates. - [Blog lite](https://new-ui.com/templates/blog-lite) — A simple, minimal blog template for Astro. - [Coming soon page](https://new-ui.com/templates/coming-soon) — A simple coming soon page for better pre-launch conversions. - [Directory](https://new-ui.com/templates/directory) — Build your directory site. Fast & easy. - [Documentation](https://developers.cloudflare.com/agents/index.md) — A fast, focused documentation site template. - [Job listing](https://new-ui.com/templates/job-listing) — Launch your job listing site in minutes. - [Journal](https://new-ui.com/templates/journal) — An Astro blog template. - [Spec](https://new-ui.com/templates/spec) — A simple template for publishing better spec pages. - [Writer](https://new-ui.com/templates/writer) — A minimal blog template for developers and writers. ## Getting Started - [Installation](https://new-ui.com/docs/getting-started/installation) — A quick guide to getting started with New UI. ## Foundations - [Colors](https://new-ui.com/docs/foundations/colors) — New UI color system. - [Effects](https://new-ui.com/docs/foundations/effects) — New UI layering, elevations and effects styles. - [Spacings](https://new-ui.com/docs/foundations/spacings) — New UI spacings. - [Typography](https://new-ui.com/docs/foundations/typography) — New UI modular typographic scale. - [Reset](https://new-ui.com/docs/foundations/reset) — Modern SCSS, CSS reset. ## Theming - [Configuration](https://new-ui.com/docs/theming/configuration) — Default themes to quickly change the look and feel of your app. ## Installation To set up the project, open your terminal and run the following command: ``` npm i -D @new-ui/foundations ``` #### Import Import the New UI foundations by adding the following line at the top of your SCSS file: ```scss @use '@new-ui/foundations'; // Use `@import` for CSS ``` #### Set the theme Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper element, for example: ```html ``` |--- | Available themes | Value |-|:-|:- | Light (Default) | `light` | Light warm | `light--warm` | Light cold | `light--cold` | Dark (Default) | `dark` | Dark warm | `dark--warm` | Dark cold | `dark--cold` |--- #### Usage guide - All classes associated with the New UI are prefixed with a global namespace followed by a hyphen: `nu-` - In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax. - `c-` for UI components. - `l-` for layout-related styles. - `u-` for utilities. - `is-` and has- for specific states. - `js-` for targeting JavaScript-specific functionality. ---