DOCSEARCHbyAlgolia
Submit Docs

Neu-Axentix Framework

website·Indexed 32 days ago

https://neu.useaxentix.com/docs

A framework for building websites using neumorphism, flat, and standard shadows. Version 2.0.0 includes a theme builder for custom colors and an extension of the Axentix framework.

Tokens
1.3K
Snippets
8
Records
11
Agent score
52%

What's inside Neu-Axentix

  1. Overview of Neu-Axentix Neumorphism Framework

    Neu-Axentix (v2.0.0) is a framework designed to simplify the implementation of neumorphism shadows in website development. It is an independent extension of the Axentix framework, meaning it can be used on its own, but it includes overloads of Axentix classes to ensure compatibility across different use cases.

  2. Understand Neu-Axentix prerequisites

    Neu-Axentix is an extension of the Axentix framework. While it can be used independently, it is highly recommended to use both together because Neu-Axentix overloads the CSS of Axentix components.

  3. Create and export custom color themes with Neu-Axentix Builder

    The Neu-Axentix Builder allows you to define custom theme colors and assign them specific class names. Once configured, the builder generates a CSS file that enables the use of these custom colors in conjunction with Neu-Axentix neumorphic shadow classes. The workflow consists of picking colors via the palette or picker, assigning class names, and downloading the resulting CSS theme file.

  4. Apply neumorphism shadow styles

    To create neumorphic components in neu-axentix, you must first apply a neumorphism theme color class to a parent element before adding a shadow class to its children. Available shadow styles include:

    • Flat shadow: neu-flat
    • Pressed shadow: neu-pressed
    • Bordered shadow: neu-bordered
    • Concave shadow: neu-concave
    <!-- Parent must have a theme color class -->
<div class="neu-theme-color">
  <div class="neu-flat">Flat Element</div>
  <div class="neu-pressed">Pressed Element</div>
  <div class="neu-bordered">Bordered Element</div>
  <div class="neu-concave">Concave Element</div>
</div>

  5. Apply neumorphism theme colors

    To apply a color theme, use the neu-{color} class on an element. The default available themes are dark and light. When using shadows, the theme color class must be applied to a parent element before shadow classes can be applied to its children.
    <!-- Example of a dark theme parent with a concave shadow child -->
<div class="neu-dark">
  <div class="neu-concave">
    I'm a dark theme concave item.
  </div>
</div>

  6. Install Neu-Axentix via direct download

    Neu-Axentix can be installed by downloading the minified or unminified CSS and JS files. No jQuery dependency is required for the JavaScript functionalities. You can download the pre-compiled assets or the full source repository to develop with integration tools using npm install.
    # After downloading the source repository
npm install

  7. Nest and override theme colors

    You can change the theme color of a specific section of your page by adding a different neu-{color} class to an element, even if a different theme color has already been set on a parent element.
    <div class="neu-light">
  <!-- This child overrides the parent light theme with a dark theme -->
  <div class="neu-dark">
    I'm a dark theme part inside a light theme element.
  </div>
</div>

  8. Adjust neumorphism shadow size

    You can modify the scale of neumorphic shadows by adding size modifier classes. Use .neu-small for a subtle effect or .neu-large for a more pronounced shadow. It is recommended to increase spacing around elements using .neu-large due to the shadow's extent.
    <div class="neu-flat neu-small">Small Flat Shadow</div>
<div class="neu-flat neu-large">Large Flat Shadow</div>

  9. Implement dynamic neumorphism shadow interactions

    Dynamic shadows allow an element to switch its shadow class based on user interaction using data-neu-* attributes. The attribute value should be the CSS class of the shadow to switch to (e.g., .neu-pressed).

    AttributeTriggerBehavior
    data-neu-clickMouse DownSwitches class while mouse is pressed; resets on release.
    data-neu-clickedClickToggles class on click; toggles back on second click.
    data-neu-hoverMouse OverSwitches class while hovered; resets when mouse leaves.
    data-neu-focusFocusSwitches class while element is focused; resets on blur.
    <!-- Switches from neu-flat to neu-pressed while holding click -->
<button class="neu-flat" data-neu-click=".neu-pressed">Click me!</button>

<!-- Toggles between neu-flat and neu-pressed on each click -->
<button class="neu-flat" data-neu-clicked=".neu-pressed">Toggle me!</button>

<!-- Switches to neu-pressed on hover -->
<button class="neu-flat" data-neu-hover=".neu-pressed">Hover me!</button>

<!-- Switches to neu-pressed when input is focused -->
<input class="neu-flat" data-neu-focus=".neu-pressed" />

  10. Lighten or darken theme colors

    To adjust the brightness of a theme color, add the neu-bg-lighten or neu-bg-darken class to the element that has the neu-{color} class.
    <!-- Lighten a light theme -->
<div class="neu-light neu-bg-lighten">
  My background is lighten.
</div>

<!-- Darken a light theme -->
<div class="neu-light neu-bg-darken">
  My background is darken.
</div>

  11. Use theme colors as backgrounds

    If you want to use a theme color strictly as a background without the full neumorphism theme context, use the neu-bg-{color} class. The neu-bg-lighten and neu-bg-darken modifiers are also compatible with these classes.
    <!-- Simple dark background -->
<div class="neu-bg-dark">
  I'm a dark element.
</div>

<!-- Darkened dark background -->
<div class="neu-bg-dark neu-bg-darken">
  I'm a dark darken element.
</div>