DOCSEARCHbyAlgolia
Submit Docs

include-media Documentation

repository·master·Indexed 25 days ago

https://github.com/eduardoboucas/include-media

A Sass library providing a natural and simplistic syntax for writing maintainable CSS media queries. Version 2.0.0 supports dart-sass 1.25+ and includes a variety of community-maintained plugins for grid generation, breakpoint exporting to JavaScript, and unit conversion.

Tokens
477
Snippets
0
Records
4
Agent score
33%

What's inside include-media

  1. Overview of include-media

    master
    include-media is a Sass library designed for writing CSS media queries using a natural and simplistic syntax. It aims to provide an elegant and maintainable way to handle breakpoints and media queries within Sass files, addressing limitations found in other mixin libraries regarding complex queries and breakpoint management.

  2. Install include-media

    master

    You can install include-media using various package managers depending on your environment. After installation, you must include the library in your Sass project using an @import statement.

    Compatibility Note: As of version 2.0, include-media only supports sass (dart-sass) 1.25+. It no longer supports lib-sass or ruby-sass.

  3. Explore include-media plugins

    master

    There is a variety of community-maintained plugins that extend the functionality of include-media:

    • include-media-export: Reference include-media breakpoints in JavaScript.
    • include-media-columns: Generate column classes using the BEMIT naming convention, automatically referencing include-media breakpoints.
    • include-media-spread: Calculates the difference between property values and distributes them through your include-media breakpoints.
    • flex_e_ble: Uses breakpoints to create a flexible class naming structure on top of a flex based grid with inline-block fallback for IE8+.
    • include-media-grid: Generates grid classes based on the flex display.
    • im-to-em: A function to convert include-media breakpoints from px to em.
    • include-media-hidden-classes: Generates classes for hiding elements.
    • Fluid-Size: Uses breakpoints to provide the fit size for the device.

  4. Access the include-media distribution directory via includePath

    master
    The include-media package exports a single object containing the includePath property. This property provides the absolute filesystem path to the dist directory within the package, which is useful if you need to reference assets or files located inside the package's distribution folder directly.