@cmchu/web-fit

web-fit

web-fit is a lightweight, responsive design utility designed to adjust elements proportionally to the viewport width, maintaining a consistent layout across different screen sizes. This utility automatically scales elements based on a specified design width while providing an option to exclude certain elements from scaling.

Installation

you're using a module bundler like Webpack or Rollup:

import createdFit from '@cmchu/web-fit';

Usage

Basic Usage

Initialize FitLayout on the root element (default is the entire document):

const fitInstance = createdFit();

Customization

web-fit offers several customizable options:

• dw: The design width you've used in your layout (default is 1920).
• resize: Whether to listen for resize events and reapply the layout (default is true).
• ignore: An array of elements to be excluded from scaling.

const fitInstance = createdFit(document.querySelector('.my-root'), {
  dw: 1600,
  resize: true,
  ignore: ['.header', '.footer']
});

API

createdFit(element:El = document.documentElement, options:Options={})

Parameters

• element (HTMLElement | string): The element to apply FitLayout to. Can be a DOM element or a CSS selector string.
• options (object): Custom options for FitLayout.

Returns

An object containing methods and properties for managing the FitLayout instance:

• init(): Reinitialize FitLayout.
• restore(): Restore original styles and remove FitLayout modifications.
• removeResize(): Remove the resize event listener.
• target (HTMLElement): The target element FitLayout was applied to.
• ignoreEls (HTMLElement[]): List of elements excluded from scaling.

getFitStyle(dw: number)

Generates the necessary class names and style content for the given design width.

Parameters

• dw (number): The design width.

Returns

An object with the following properties:

• className (string): The class name for applying the scaled layout.
• igClassName (string): The class name for ignoring the scaled layout.
• styleContent (string): The style content for the generated CSS.

setElFitClassName(el: HTMLElement, name: string)

Adds a FitLayout class to an element.

Parameters

• el (HTMLElement): The element to modify.
• name (string): The class name to add.

removeElFitClassName(el: HTMLElement, name?: string)

Removes a FitLayout class from an element.

Parameters

• el (HTMLElement): The element to modify.
• name (string, optional): The class name to remove. If not provided, all FitLayout classes will be removed.

getElementByOptions(arg: El): HTMLElement[]

Retrieves elements by selector or direct reference.

Parameters

• arg (HTMLElement | string): An element or a selector string.

Returns

An array of HTMLElements matching the argument.

createFitStyle(name: string, styleContent: string)

Creates or updates a <style> tag with the given style content.

Parameters

• name (string): The name attribute for the style tag.
• styleContent (string): The CSS content to insert into the style tag.

Contributing

Contributions are welcome! Please follow these guidelines when contributing:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and ensure tests pass.
4. Submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.