Berry CSS

https://maxsite.org/berry/berry-for-ai.txt
Admin
Berry CSS is a utility-first CSS framework designed for building modern web interfaces. It provides...
Tokens:5,213
Snippets:24
Trust Score:8.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Example Usage with Dark Mode

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Illustrates applying color utility classes for both default and dark mode states. The example shows a paragraph with specific text and background colors for the default state and different colors when the `dark:` modifier is applied.

```html
<p class="t-primary500 bg-gray100 dark:primary200 dark:bg-gray700">Текст</p>
<!--
    цвет текста: primary500
    цвет фона: gray100

    цвет текста в dark-режиме: primary200
    цвет фона в dark-режиме: gray700
 -->
```

--------------------------------

### Example Usage of Color Utility Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Demonstrates how to apply text color, background color, and hover effects using the defined utility classes. The example shows a paragraph with a primary text color, gray background, and a red text color on hover.

```html
<p class="t-primary500 bg-gray100 hover-t-red600">Текст</p>
<!--
    цвет текста: primary500
    цвет текста при наведении: red600
    цвет фона: gray100
 -->
```

--------------------------------

### Combined Text Styling Example

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Demonstrates combining multiple utility classes for a styled text element, including bold, underline, and specific line height.

```html
<h1 class="t-bold t-underline t-center lh150">Styled Heading</h1>
```

--------------------------------

### Berry CSS Icon Styling Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Demonstrates Berry CSS classes for creating circular, square, and rounded icons, as well as pseudo-element classes for arrow icons. Includes examples of combining icon classes with text and other elements, and integrating with external icon libraries like Bootstrap Icons.

```css
/* Base icon styles */
.icon0:before { margin-right: 0 !important; }

/* Common container styles */
.icon-circle, .icon-square, .icon-rounded {
  width: 2em;
  height: 2em;
  display: inline-block;
  text-align: center;
}

/* Specific icon styles */
.icon-circle { border-radius: 50%; }
.icon-rounded { border-radius: var(--icon-rounded-radius, 5px); }

/* Pseudo-elements for arrows */
.icon-arrow-right::after { content: "→"; }
.icon-arrow-left::before { content: "←"; }
.icon-angle-right::after { content: "›"; }
.icon-angle-left::before { content: "‹"; }
```

```html
<!-- Circular icon with text -->
<span class="icon-circle">★</span>

<!-- Right arrow -->
<span class="icon-arrow-right">Next</span>
<!-- Will display as "Next →" -->

<!-- Square icon -->
<span class="icon-square">!</span>
```

```html
<!-- Combining with Bootstrap Icons -->
<a href="#" class="bi-star">Link</a>
<button class="button bi-check">Button</button>

<!-- Equivalent display -->
<h1><i class="bi-balloon"></i> Heading</h1>
<h1 class="bi-balloon">Heading</h1>

<!-- Different color displays -->
<h1 class="r-red600"><i class="bi-balloon t-orange500"></i> Heading</h1>
```

--------------------------------

### Text Alignment and Wrapping

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Classes for text alignment (left, center, right, justify), responsive alignment, text wrapping, no wrapping, ellipsis truncation, and line clamping.

```html
<p class="t-left">Left aligned</p>
<p class="t-center">Center aligned</p>
<p class="t-right">Right aligned</p>
<p class="t-justify">Justified text</p>
<p class="t-center-tablet">Center aligned on tablet and up</p>
<p class="t-nowrap">This text will not wrap.</p>
<p class="t-wrap">This text will wrap normally.</p>
<p class="t-ellipsis">This is a very long text that will be truncated with an ellipsis if it overflows its container.</p>
<p class="t-line-clamp" style="--line-clamp: 2;">This text is intended to be clamped to a maximum of two lines, with an ellipsis appearing if it exceeds that limit.</p>
```

--------------------------------

### Berry CSS Height Utility Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Provides utility classes for setting fixed pixel heights, percentage heights, and viewport unit heights. Includes modifiers for min/max height and responsive adjustments.

```APIDOC
Fixed Pixel Height Utilities:
  - `h{N}px`: Sets `height` to a specific pixel value. N can be: 10, 15, 20, 30, 40, 50, 60, 70, 100, 200, 300, 400, 500.
  - Modifiers:
    - `-min`: Applies `min-height` (e.g., `.h20px-min`).
    - `-max`: Applies `max-height` (e.g., `.h50px-max`).

Additional Height Utilities:
  - `h-auto`: Sets `height: auto`.
  - `h-auto-tablet`: Sets `height: auto` for screens up to 768px width.
  - `h100`: Sets `height: 100%`.

Viewport Height Utilities:
  - `h{N}vh`: Sets `height` using viewport units. N can be: 50, 100.
    - Example: `.h50vh` sets `height: 50vh`.
  - `h{N}vh-min`: Sets `min-height` using viewport units. N can be: 50, 100.
    - Example: `.h100vh-min` sets `min-height: 100vh`.

Examples:
  - `<div class="h100px h200px-max">...</div>`
  - `<div class="h300px-min h-auto-tablet">...</div>`
  - `<div class="h100vh">...</div>`
```

--------------------------------

### Text Transformation and Case

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Classes for converting text to uppercase, lowercase, capitalize, or small caps.

```html
<p class="t-upper">Uppercase text</p>
<p class="t-lower">Lowercase text</p>
<p class="t-capitalize">Capitalized text</p>
<p class="t-small-caps">Small caps text</p>
```

--------------------------------

### Text Styling and Decorations

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Classes for controlling text font weight, italic style, reset, underline styles, strikethrough, and overline.

```html
<p class="t-bold">Bold text</p>
<p class="t-italic">Italic text</p>
<p class="t-underline">Underlined text</p>
<p class="t-strike">Strikethrough text</p>
<p class="t-overline">Overlined text</p>
<p class="t-decoration-dashed">Dashed underline</p>
<p class="t-underline-offset4px">Underline with offset</p>
<p class="t-normal">Reset text styles</p>
```

--------------------------------

### Пример слабого контраста цветов

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

HTML-пример, демонстрирующий использование близких цветов (`primary100` текст на `primary200` фоне) для создания слабого контраста, что может ухудшить читаемость текста.

```html
<div class="t-primary100 bg-primary200 pad15 rounded5">
  Контрастность +100 (близкие цвета)
</div>
```

--------------------------------

### Переопределение Primary палитры через CSS переменные

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Демонстрирует, как можно переопределить текущую цветовую палитру `primary`, используя значения из других предопределенных палитр, например, `red`, через CSS-переменные.

```css
:root {
    --primary-hue: var(--red-hue);
    --primary-sat: var(--red-sat);
}
```

--------------------------------

### Пример высокого контраста цветов

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

HTML-пример, демонстрирующий использование цветов с большой разницей в яркости (`primary100` текст на `primary600` фоне) для обеспечения высокого контраста и хорошей читаемости текста.

```html
<div class="t-primary100 bg-primary600 pad15 rounded5">
  Контрастность +500 (высокий контраст)
</div>
```

--------------------------------

### Font Families

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Classes to apply common font families, including monospace and a selection of 'safe' web fonts.

```html
<p class="t-mono">Monospace text</p>
<p class="t-georgia">Georgia font text</p>
<p class="t-arial">Arial font text</p>
<p class="t-verdana">Verdana font text</p>
```

--------------------------------

### Настройка Primary палитры в Sass

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Пример настройки CSS-переменных для определения оттенка (hue) и насыщенности (saturation) основной цветовой палитры `primary` в Sass. Это позволяет динамически менять цвет темы сайта.

```sass
:root {
    --primary-hue: 123deg; // hue
    --primary-sat: 41%; // saturation
}
```

--------------------------------

### Text and Background Utility Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Defines CSS utility classes for applying text and background colors. Classes follow the pattern `t-{color}` for text color and `bg-{color}` for background color. Hover states are handled with `hover-t-{color}` and `hover-bg-{color}`.

```css
/* Format:
- `t-{color}` → `color: var(--цвет)`
- `bg-{color}` → `background-color: var(--цвет)`
- `hover-t-{color}:hover` → Изменяет цвет текста при наведении.
- `hover-bg-{color}:hover` → Изменяет фон при наведении.
- `color-inherit` → `color: inherit` (может применяться к любым элементам).

Available colors: color1–color9, primary, white, black, gray, red, pink, purple, violet, indigo, blue, cyan, teal, green, lime, yellow, orange, brown.

All colors (except color1-color9, white, black) use brightness gradients from 50 to 950 with a step of 50. Always specify the color as `prefix-{color}{gradation_level}`.

Example: `t-primary600`, `red200`, `blue800`.
```

--------------------------------

### Berry CSS Transition Utility Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Offers classes to control CSS `transition` properties, including duration and timing functions. These can be applied to individual elements or containers to affect nested elements.

```css
/* Durations */
.transition-duration { transition: all 0.5s; }
.transition-duration0 { transition: all 0ms; }
.transition-duration75 { transition: all 75ms; }
.transition-duration100 { transition: all 100ms; }
.transition-duration150 { transition: all 150ms; }
.transition-duration200 { transition: all 200ms; }
.transition-duration300 { transition: all 300ms; }
.transition-duration500 { transition: all 500ms; }
.transition-duration700 { transition: all 700ms; }
.transition-duration1000 { transition: all 1000ms; }

/* Timing Functions */
.transition-ease-linear { transition-timing-function: linear; }
.transition-ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.transition-ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.transition-ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Custom duration for direct element */
.transition-var { transition: all var(--transition-duration, 0.5s); }

/* Custom duration for child elements */
.transition-child-var { transition: all var(--transition-duration, 0.5s); }
```

```html
<!-- 300ms transition with linear easing -->
<div class="transition-duration300 transition-ease-linear">Element</div>

<!-- 0.5s transition with ease-in-out for all elements -->
<section class="transition-duration transition-ease-in-out">
  <p>Text</p>
</section>

<!-- Transition with custom duration -->
<div class="transition-var" style="--transition-duration: 0.2s">Custom</div>
```

--------------------------------

### Advanced Text Properties

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Classes for hyphenation control, text direction (LTR/RTL), and writing modes (vertical/horizontal).

```html
<p class="t-hyphens">Text with hyphenation enabled.</p>
<p class="t-rtl">This text is rendered right-to-left.</p>
<p class="t-writing-vrl">Vertical text (right-to-left).</p>
```

--------------------------------

### Berry CSS Border Utility Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Defines utility classes for managing borders, including color application, hover effects, dark mode variants, custom properties, and border removal. Supports various styles, widths, and partial removals.

```APIDOC
Border Color Utilities:
  - `bor-{color}`: Sets `border-color` using predefined CSS variables (e.g., `var(--red)`).
  - `hover-bor-{color}`: Applies `border-color` on hover.
  - `dark:bor-{color}`: Sets `border-color` for dark mode.
  - `dark:hover-bor-{color}`: Applies `border-color` on hover in dark mode.
  Available colors include `color1` through `color9`, `primary` variants, `white`, `black`, `gray` variants, and semantic colors like `red`, `blue`, etc.

Border Management Utilities:
  - `bordered`: Applies a default border (`border: var(--bordered, var(--primary200) 1px solid)`).
  - `bor-var`: Enables custom border properties via CSS variables:
    - `--bor-style`: Sets border style (default: `solid`).
    - `--bor-width`: Sets border width (default: `1px`).
    - `--bor-color`: Sets border color (default: `var(--primary200)`).
  - `bor-currentColor`: Sets `border-color: currentColor` to inherit text color.

Border Removal Utilities:
  - `bor-none`: Removes all borders (`border-style: none !important`).
  - Partial Removal:
    - `bor-none-t`: Removes top border.
    - `bor-none-r`: Removes right border.
    - `bor-none-b`: Removes bottom border.
    - `bor-none-l`: Removes left border.
    - `bor-none-tb`: Removes top and bottom borders.
    - `bor-none-rl`: Removes right and left borders.
  - `bor-none-tablet`: Removes borders on screens up to 768px width.

Border Style Utilities:
  - `bor-{style}`: Sets border style for all sides (e.g., `bor-solid`, `bor-dotted`, `bor-dashed`, `bor-double`).
  - `bor-{style}-[t|r|b|l|tb|rl]`: Applies style to specific sides (e.g., `bor-dashed-t`).

Border Width Utilities:
  - `bor{N}`: Sets border width from 1px to 5px (e.g., `bor1`, `bor2`, `bor5`).
  - For widths beyond `bor5`, use `bor-var` with `--bor-width`.

Examples:
  - `<div class="bor-red hover-bor-blue">...</div>`
  - `<div class="bor-primary300 dark:primary700">...</div>`
  - `<div class="bordered bor-solid-rl bor2">...</div>`
  - `<div class="bor-dashed bor-none-t bor3">...</div>`
  - `<div class="bor-solid bor-primary500 bor-var" style="--bor-width: 7px">...</div>`
  - `<div class="bordered" style="--bordered: #AA0077 4px solid">...</div>`
```

--------------------------------

### Berry CSS Vertical Alignment Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Provides utility classes for controlling the `vertical-align` CSS property. Includes options for baseline, top, middle, bottom, and text-specific alignments, with support for pseudo-elements.

```css
.va-baseline, .va-baseline:before { vertical-align: baseline; }
.va-top, .va-top:before { vertical-align: top; }
.va-middle, .va-middle:before { vertical-align: middle; }
.va-bottom, .va-bottom:before { vertical-align: bottom; }
.va-text-top, .va-text-top:before { vertical-align: text-top; }
.va-text-bottom, .va-text-bottom:before { vertical-align: text-bottom; }
.va-sub, .va-sub\:before { vertical-align: sub; }
.va-super, .va-super:before { vertical-align: super; }
```

```html
<!-- Center alignment -->
<span class="va-middle">Text</span>

<!-- Aligning an icon using :before pseudo-element -->
<i class="bi-star va-text-top:before"></i>
```

--------------------------------

### Line Height (Interline spacing)

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Classes for setting relative (unitless) and absolute (em) line heights to control vertical spacing between lines of text.

```html
<p class="lh100">Line height 1.0</p>
<p class="lh150">Line height 1.5</p>
<p class="lh200">Line height 2.0</p>
<p class="lh110em">Line height 1.1em</p>
<p class="lh150em">Line height 1.5em</p>
<p class="lh200em">Line height 2.0em</p>
```

--------------------------------

### HSL Color Hue and Saturation Variables

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Defines hue and saturation variables for various color families (e.g., primary, red, blue). These variables are used in conjunction with lightness values to generate a comprehensive range of color shades.

```sass
    --primary-hue: 216deg; // For Material Design
    --primary-sat: 33%;

    --gray-hue: var(--primary-hue);
    --gray-sat: 7%;

    --red-hue: 5deg;
    --red-sat: 60%;

    --brown-hue: 16deg;
    --brown-sat: 31%;

    --orange-hue: 31deg;
    --orange-sat: 75%;

    --yellow-hue: 48deg;
    --yellow-sat: 88%;

    --lime-hue: 57deg;
    --lime-sat: 80%;

    --green-hue: 102deg;
    --green-sat: 34%;

    --teal-hue: 172deg;
    --teal-sat: 30%;

    --cyan-hue: 200deg;
    --cyan-sat: 45%;

    --blue-hue: 218deg;
    --blue-sat: 50%;

    --indigo-hue: 238deg;
    --indigo-sat: 35%;

    --violet-hue: 264deg;
    --violet-sat: 36%;

    --purple-hue: 304deg;
    --purple-sat: 29%;

    --pink-hue: 334deg;
    --pink-sat: 46%;
```

--------------------------------

### HSL Color Scale Generation

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Generates a 50-950 lightness scale for a given color using HSL variables. Each step defines a CSS variable for a specific lightness level (e.g., --ЦВЕТ950, --ЦВЕТ900) and a default variable (--ЦВЕТ) set to the 500 lightness level.

```css
    --ЦВЕТ950: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 9%);
    --ЦВЕТ900: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 13%);
    --ЦВЕТ850: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 17%);
    --ЦВЕТ800: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 21%);
    --ЦВЕТ750: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 26%);
    --ЦВЕТ700: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 31%);
    --ЦВЕТ650: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 36%);
    --ЦВЕТ600: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 41%);
    --ЦВЕТ550: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 46%);
    --ЦВЕТ500: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 50%);
    --ЦВЕТ450: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 54%);
    --ЦВЕТ400: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 59%);
    --ЦВЕТ350: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 65%);
    --ЦВЕТ300: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 70%);
    --ЦВЕТ250: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 75%);
    --ЦВЕТ200: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 81%);
    --ЦВЕТ150: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 86%);
    --ЦВЕТ100: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 91%);
    --ЦВЕТ50:  hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 96%);
    --ЦВЕТ:    var(--ЦВЕТ500);
```

--------------------------------

### Berry CSS Rotation Transformation Classes

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Provides utility classes for applying CSS `transform: rotate()` to elements. These classes allow for quick rotation by 45, 90, or 180 degrees.

```css
.rotate45 { transform: rotate(45deg); }
.rotate90 { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
```

```html
<!-- Rotating text by 90 degrees -->
<span class="rotate90">Text</span>
```

--------------------------------

### Letter Spacing (Kerning)

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Classes to adjust letter spacing for improved readability or aesthetic effect, ranging from tight to wide spacing.

```html
<p class="t-tracking-50">Tight spacing (-0.05em)</p>
<p class="t-tracking0">Normal spacing (0em)</p>
<p class="t-tracking100">Wide spacing (0.1em)</p>
<p class="t-tracking200">Very wide spacing (0.2em)</p>
```

--------------------------------

### Fixed Color Definitions

Source: https://maxsite.org/berry/berry-for-ai.txt/berry-for-ai

Defines a set of fixed color values using hexadecimal notation. These include primary colors like white and black, as well as specific named colors such as color1 through color9.

```css
    --white: #FFFFFF;
    --black: #000000;

    --color1: #1B542C;
    --color2: #026A52;
    --color3: #21888F;
    --color4: #296478;
    --color5: #4D668E;
    --color6: #2B2C7C;
    --color7: #992572;
    --color8: #933D50;
    --color9: #AC323B;
```
Tokens:
Raw