Viewport Calculator Plugin

The JavaScript plugin efficiently calculates the viewport width, considering both the viewport size and the size of individual elements. This functionality provides a comprehensive solution for accurately determining and managing the dimensions within the viewport for enhanced web development and responsive design.

Example

With styled-components plugin:

import styled from "styled-components"
import { theme } from "../../theme"
import ViewportCalculator from "viewport-calculator"

export const HeaderElement = styled.div`
    margin: 20px;
    padding: 0 150px;
    background-color: black;
    border-radius: 50px;

    @media ${theme.media.laptop} {
        padding: ${ViewportCalculator(15, "laptop")};
    }
    @media ${theme.media.tablet} {
        padding: ${ViewportCalculator(15, "tablet")};
        margin: 10px 20px;
    }
    @media ${theme.media.mobile} {
        padding: ${ViewportCalculator(15, "mobile")};
        margin: 5px;
    }
`

Default Breakpoints

• Desktop: 1280px,
• Laptop: 1024px,
• Tablet: 768,
• Large Mobile: 640px,
• Mobile: 480px

Features

• By default, it uses the most popular breakpoints in the frontend development.
• Simple and minimalist.
• Working with all Javascript Frameworks, CSS Plugins, Preprocessors, etc.

Installation

Yarn:

yarn add viewport-calculator

npm:

npm install viewport-calculator