@design.estate/dees-domtools

tools to simplify complex css structures

Install

To install @design.estate/dees-domtools, simply use npm:

npm install --save @design.estate/dees-domtools

Ensure your project supports TypeScript and ESM syntax for the best development experience.

Usage

This documentation aims to give you comprehensive guidance on how to utilize @design.estate/dees-domtools in your web projects to simplify complex CSS structures. Whether you're building a sophisticated web application or need a more manageable way to handle your CSS, this toolkit offers a variety of features designed to enhance and streamline your workflow. Throughout this guide, we'll cover the installation process, key features, examples, and best practices when working with @design.estate/dees-domtools.

Before diving into the examples, please ensure that you've completed the installation step as described above.

Key Features

• CSS Simplification: Tools and utilities designed to abstract and simplify the handling of complex CSS structures.
• Responsive Design Helpers: Tools for managing responsive designs more easily, with utilities for breakpoints, and adaptable grids.
• Element Utilities: Simplified interactions with DOM elements, including dynamic style manipulations and more.
• Theme Management: Simplify the process of theme toggling (dark mode/light mode) in your applications.
• Keyboard Event Handling: Utilities for managing keyboard events, facilitating better interaction handling.
• External Resources Management: Easily manage external CSS and JavaScript resources within your project.

Getting Started

To get started with @design.estate/dees-domtools, you first need to import the modules you intend to use in your project. Here's a simple example to illustrate how to import and use the package:

import { DomTools, elementBasic, breakpoints, css } from '@design.estate/dees-domtools';

// Setting up DomTools for your application
const domToolsInstance = await DomTools.setupDomTools();

// Example: Using elementBasic utilities
elementBasic.setup();

Simplifying CSS with CSS Utilities

The package offers a variety of CSS utilities that simplify the handling of complex CSS structures. Here's how you can use them in your project:

import { css } from '@design.estate/dees-domtools';

// Example: Creating a CSS grid with a specified number of columns and gap size
const gridStyles = css.cssGridColumns(3, 10); // 3 columns with a 10px gap

Managing Responsive Design

Responsive design is critical for modern web development. @design.estate/dees-domtools provides utilities to make it easier to manage responsive designs and breakpoints.

import { breakpoints } from '@design.estate/dees-domtools';

// Example: Applying styles for different viewport sizes
const tabletStyles = breakpoints.cssForTablet(myCssStyles);
const phoneStyles = breakpoints.cssForPhone(myCssStyles);

Theme Management

Managing themes (such as toggling between dark and light mode) is simplified with the built-in theme management tools.

// Toggle between light and dark themes
domToolsInstance.themeManager.toggleDarkBright();

Handling Keyboard Events

Keyboard event handling is made easy with the utilities provided by the toolkit. This can be particularly useful for adding keyboard navigation and shortcuts.

import { Keyboard } from '@design.estate/dees-domtools';

// Initialize keyboard handling
const keyboard = new Keyboard(document.body);

// Bind an event to a specific key combination
keyboard.on([Keyboard.Key.Ctrl, Keyboard.Key.S]).subscribe(() => {
  console.log('Ctrl+S was pressed');
});

Best Practices

• Organize Your CSS: Use the provided CSS utilities to structure your styles in a way that makes them easy to maintain and scale.
• Embrace Responsiveness: Leverage the responsive design helpers to ensure your application looks great on any device.
• Consistent Theme Handling: Utilize the theme management tools to provide a seamless experience for your users, allowing them to choose their preferred theme.

By integrating @design.estate/dees-domtools into your project, you can leverage a comprehensive suite of utilities designed to simplify complex CSS structures and enhance your web development workflow.

License and Legal Information

This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the license file within this repository.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.

Company Information

Task Venture Capital GmbH
Registered at District court Bremen HRB 35230 HB, Germany

For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.

By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.