Installation

Install

To install unitone CSS in your project, execute the following command in a terminal.


$ npm install --save-dev @inc2734/unitone-css

Import CSS

To import CSS for unitone CSS, @use in your main SCSS file. In the case of HTML, you can also use <link /> to load CSS.

When you compile with the Dart Sass CLI directly, package specifiers such as @inc2734/unitone-css/... are not resolved automatically. Use either --load-path=node_modules or the Node package importer with pkg:.


@use '@inc2734/unitone-css/src/app';


@use '@inc2734/unitone-css/src/settings';
@use '@inc2734/unitone-css/src/layout-primitives';
@use '@inc2734/unitone-css/src/behaviors';
@use '@inc2734/unitone-css/src/utilities';


@use '@inc2734/unitone-css/src/layout-primitives/vertical-writing';
 
@include vertical-writing.vertical-writing();


<link rel="stylesheet" href="/node_modules/@inc2734/unitone-css/dist/app.css" />

Examples for the Dart Sass CLI:


sass --load-path=node_modules --no-source-map src/css/app/global-styles.scss:dist/css/app/global-styles.css


@use 'pkg:@inc2734/unitone-css/src/settings';
@use 'pkg:@inc2734/unitone-css/src/layout-primitives';
@use 'pkg:@inc2734/unitone-css/src/behaviors';
@use 'pkg:@inc2734/unitone-css/src/utilities';


sass --pkg-importer=node --no-source-map src/css/app/global-styles.scss:dist/css/app/global-styles.css

The old Sass entry paths are still available for compatibility, but they are deprecated and emit warnings during Sass compilation. Migrate to the new paths below.


// Deprecated
@use '@inc2734/unitone-css/src/settings/settings';
@use '@inc2734/unitone-css/src/layout-primitives/layout-primitives';
@use '@inc2734/unitone-css/src/helper/helper';
 
// Recommended
@use '@inc2734/unitone-css/src/settings';
@use '@inc2734/unitone-css/src/layout-primitives';
@use '@inc2734/unitone-css/src/behaviors';
@use '@inc2734/unitone-css/src/utilities';

Import JavaScript

To import JavaScript for unitone CSS, import in your main JavaScript file. In the case of HTML, you can also use <script /> to load JavaScript.


import '@inc2734/unitone-css/app';


import '@inc2734/unitone-css/layout-primitives';
import '@inc2734/unitone-css/behaviors';
import '@inc2734/unitone-css/compatibility';


<script src="/node_modules/@inc2734/unitone-css/dist/app.js" defer></script>

When using server-side rendering frameworks, load this script with the framework’s equivalent of <script defer>. The all-in entry loads the marquee and vertical-writing layout primitive scripts, the divider and stairs behaviors, and the fluid typography compatibility layer. Individual entries such as @inc2734/unitone-css/layout-primitives/vertical-writing/behavior, @inc2734/unitone-css/behaviors/dividers, and @inc2734/unitone-css/compatibility/fluid-typography are also available when you only need a specific entry.

Import React Components

When you use layout primitives as React components, import each component from @inc2734/unitone-css/layout-primitives/<name>/react. These entries include the behaviors required by that component, so no additional behavior import is required for React usage.


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { VerticalWriting } from '@inc2734/unitone-css/layout-primitives/vertical-writing/react';

Using Layout Primitives

The unitone CSS layout primitives can be used with the following code.

For the detailed description of each layout primitives, see the Layout Primitives page.


<div data-unitone-layout="decorator -padding:1">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
</div>