Extract CSS custom properties and a JavaScript config from Drupal's theme breakpoints

Overview

Drupal breakpoints to CSS

Drupal Logo

To eliminate the need for different places for breakpoints and only maintain a single source of truth for those, this node_module extracts the breakpoints defined in the currently used drupal themes breakpoint file and generates grouped customProperties and a separate js object with all necessary parameters.

If the draft @custom-media (See: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media) or PostCSS (See: https://github.com/postcss/postcss) Custom-media (See: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media) plugin is already used, media queries can be written with customProperties. So any declaration of media queries within stylesheets is omitted and maintainability is increased.

Installation

Install as a devDependency with yarn or npm like:

yarn add --dev `@factorial-io/drupal-breakpoints-css`
# or
npm install --save `@factorial-io/drupal-breakpoints-css`

Configuration

In your themes root folder, besides your already defined breakpoints file from drupal, add a .breakpoints.yml configuration file. The following properties are mandatory:

/**
 * @type {object}
 * @property {object} paths - Relativ to the themes root folder ...
 * @property {string} paths.breakpoints - ...path to drupals breakpoint file
 * @property {string} paths.css - ...path to your final css file
 * @property {string} paths.js - ...path to your final js file
 * @property {string} themeName - Drupals custom theme name
 * @property {string} extractTo
 * @property {boolean} js - (default true), should generate js file?
 * @property {boolean} css - (default true), should generate css file?
 */

Usage

Just run yarn drupal-breakpoints-css start or npm run drupal-breakpoints-css start. Thats it :)

Examples

# Durpal breakpoints file
theme_name.s:
  label: small
  mediaQuery: "only screen and (max-width: 47.9375rem)"
  weight: 0
  multipliers:
    - 1x
    - 2x
theme_name.md:
  label: medium
  mediaQuery: "only screen and (min-width: 48rem) and (max-width: 63.9375rem)"
  weight: 2
  multipliers:
    - 1x
    - 2x
theme_name.lg:
  label: large
  mediaQuery: "only screen and (min-width: 64rem) and (max-width: 89.9375rem)"
  weight: 3
  group: theme_name.group
  multipliers:
    - 1x
    - 2x
/* Generated css file */
html {
  --ThemeName-small-query: "only screen and (max-width: 47.9375rem)";
  --ThemeName-small-resolution: "2x";
  --ThemeName-small-maxWidth: "47.9375rem";
  --ThemeName-medium-query: "only screen and (min-width: 48rem) and (max-width: 63.9375rem)";
  --ThemeName-medium-resolution: "2x";
  --ThemeName-medium-minWidth: "48rem";
  --ThemeName-medium-maxWidth: "63.9375rem";
  --ThemeName-Group-large-query: "only screen and (min-width: 64rem) and (max-width: 89.9375rem)";
  --ThemeName-Group-large-resolution: "2x";
  --ThemeName-Group-large-minWidth: "64rem";
  --ThemeName-Group-large-maxWidth: "89.9375rem";
}
// Generated js file
const BREAKPOINTS = {
  "ThemeName-small-query": "only screen and (max-width: 47.9375rem)",
  "ThemeName-small-resolution": "2x",
  "ThemeName-small-maxWidth": "47.9375rem",
  "ThemeName-medium-query":
    "only screen and (min-width: 48rem) and (max-width: 63.9375rem)",
  "ThemeName-medium-resolution": "2x",
  "ThemeName-medium-minWidth": "48rem",
  "ThemeName-medium-maxWidth": "63.9375rem",
  "ThemeName-Group-large-query":
    "only screen and (min-width: 64rem) and (max-width: 89.9375rem)",
  "ThemeName-Group-large-resolution": "2x",
  "ThemeName-Group-large-minWidth": "64rem",
  "ThemeName-Group-large-maxWidth": "89.9375rem",
};
export default BREAKPOINTS;

Acknowledgements

This Script uses open source software and would not have been possible without the excellent work of the Drupal, Eslint, Prettier and debug-js teams! Thanks a lot!

Sponsored by

Factorial

You might also like...

Download Notion pages as markdown and image files, preserving hierarchy and enabling workflow properties. Works with Docusaurus.

Download Notion pages as markdown and image files, preserving hierarchy and enabling workflow properties. Works with Docusaurus.

notion-pull notion-pull lets you use Notion as your editor for markdown-based static site generators like Docusaurus. Using Notion instead of raw mark

Jan 7, 2023

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

Oct 23, 2022

Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mathematical properties.

Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mathematical properties.

Math-Calc Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mat

Dec 25, 2021

This simple extension can automatically load NBN availability information for properties on realestate.com.au & domain.com.au including technology type, maximum line speed, and co-existance status if available.

This simple extension can automatically load NBN availability information for properties on realestate.com.au & domain.com.au including technology type, maximum line speed, and co-existance status if available.

NBN Availability Check Chrome Extension This simple extension can automatically load NBN availability information for properties on realestate.com.au

Aug 17, 2022

A package to toggle properties of your HTML tags.

A package to toggle properties of your HTML tags.

Toggler A package(atleast the code) to toggle properties of tags. I mostly use toggle classes while making a switch theme method, button interaction e

Jan 9, 2022

A simple element template chooser for properties-panel = 1

A simple element template chooser for properties-panel >= 1

A simple element template chooser for properties-panel = 1

May 30, 2022

🧩 TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types such as number or boolean (not Value Objects)

🧩 TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types such as number or boolean (not Value Objects)

🧩 TypeScript Primitives type TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types

Dec 7, 2022

The frontend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

The frontend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

The frontend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

Jun 2, 2022

The backend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

The backend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

My first full stack application with the concept of a personal wallet that allows you to create a personal account to keep track of your entire statement by adding incoming and outgoing transactions, as well as calculating the total balance and being able to edit and delete old transactions.

Jun 23, 2022
Comments
  • Feature!/append min/max width

    Feature!/append min/max width

    Its easier to have the full string for media-queries available so this PR exports the customProperties/customMedias with min-width / max-width or resolution.

    opened by dnnsjrng 0
  • feature(prettier): optionally respect local prettier rules

    feature(prettier): optionally respect local prettier rules

    ⚠️ Watchout: This branch is based on https://github.com/factorial-io/drupal-breakpoints-css/tree/feature/apply-prettier-config

    Solves #5

    • Add userConfig option to specify prettier config path
    • resolveConfig and merge config to prettier.format
    • upgrade class methods to async methods (honestly this doesn't make any difference but it feels better :D)
    • add missing jsdoc comments
    • rename readYamlFile -> readAndParseYamlConfiguration for better readability
    enhancement 
    opened by dnnsjrng 0
Releases(v0.3.1)
  • v0.3.1(Nov 10, 2022)

    What's Changed

    • fix!: wrong mediaFeature spelling by @dnnsjrng in https://github.com/factorial-io/drupal-breakpoints-css/pull/14
    • fix: unquoted custom properties by @mvsde in https://github.com/factorial-io/drupal-breakpoints-css/pull/13

    New Contributors

    • @mvsde made their first contribution in https://github.com/factorial-io/drupal-breakpoints-css/pull/13

    Full Changelog: https://github.com/factorial-io/drupal-breakpoints-css/compare/v0.3.0...v0.3.1

    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Nov 4, 2022)

    What's Changed

    • Feature!/append min/max width by @dnnsjrng in https://github.com/factorial-io/drupal-breakpoints-css/pull/11
    • fix!/custom property output by @dnnsjrng in https://github.com/factorial-io/drupal-breakpoints-css/pull/12

    Full Changelog: https://github.com/factorial-io/drupal-breakpoints-css/compare/v0.2.0...v0.3.0

    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Nov 4, 2022)

    What's Changed

    • feature: custom media export option by @dnnsjrng in https://github.com/factorial-io/drupal-breakpoints-css/pull/10

    Full Changelog: https://github.com/factorial-io/drupal-breakpoints-css/compare/v0.1.2...v0.2.0

    Source code(tar.gz)
    Source code(zip)
  • v0.1.2(Sep 21, 2022)

    What's Changed

    • hotfix/fix resolution non global argument by @dnnsjrng in https://github.com/factorial-io/drupal-breakpoints-css/pull/9

    Full Changelog: https://github.com/factorial-io/drupal-breakpoints-css/compare/v.0.1.1...v0.1.2

    Source code(tar.gz)
    Source code(zip)
  • v0.1.1(Sep 19, 2022)

    What's Changed

    • fix(schema): update schema to align with latest configuration types by @dnnsjrng in https://github.com/factorial-io/drupal-breakpoints-css/pull/8

    Full Changelog: https://github.com/factorial-io/drupal-breakpoints-css/compare/v0.1.0...v.0.1.1

    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Sep 19, 2022)

Owner
Factorial
Thoughtful Technologies
Factorial
My XFCE dotties - The GTK theme as well as the kvantume theme used here are forks of the Matcha GTK/kvantum theme

DOTFILES OF MY XFCE SETUP The GTK theme as well as the kvantume theme used here

Mehedi Rahman Mahi 201 Dec 31, 2022
Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

null 103 Dec 30, 2022
Kuldeep 2 Jun 21, 2022
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

prashanth s 1 Dec 24, 2021
In this project, I built a to-do list app, which is inspired by the minimalist website. Build withHTML/CSS & JavaScript best practices: Correct use of tags, elements, properties and syntax.

Webpack Exercise In this project, I built a to-do list app, which is inspired by the minimalist website. Built With HTML/CSS & JavaScript best practic

Vanessa Oliveros 3 Oct 11, 2022
Logseq-craft-theme - Craft Theme for Logseq

Craft for Logseq Almost all creativity requires purposeful play. A Craft insprir

Alexander Rink 33 Oct 26, 2022
A complete media query framework for CSS, to apply specific properties in specific screen

A complete media query framework for CSS, to apply specific properties in specific screen Note: Size of every media query is `50px, 100px, 150px, 200p

Rohit Chouhan 6 Aug 23, 2022
logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

null 44 Dec 7, 2022
A table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, row context menus, dark theme, and more.

Mantine DataTable A "dark-theme aware" table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagina

Ionut-Cristian Florescu 331 Jan 4, 2023