- Notifications
You must be signed in to change notification settings - Fork0
Extract CSS custom properties and custom-media queries as well as a JavaScript config from Drupal's theme breakpoints
License
factorial-io/drupal-breakpoints-css
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
To eliminate the need for different places for breakpoints and only maintain a single source of truth for those, thisnode_module extracts the breakpoints defined in the currently used Drupal themes breakpoint file and generates groupedcustomProperties and a separatejs object with all necessary parameters.
If the draft@custom-media orPostCSS withCustom Media plugin is already used, media queries can be written withcustomProperties. So any declaration of media queries within stylesheets is omitted and maintainability is increased.
Install as adevDependency withyarn ornpm like:
yarn add --dev @factorial/drupal-breakpoints-css# ornpm install --sav-dev @factorial/drupal-breakpoints-cssIn your themes root folder, besides your already defined breakpoints file from Drupal, add abreakpoints.config.yml configuration file. The following properties are mandatory:
// ./lib/types.d.tsexportinterfaceUserConfig{drupal:{breakpointsPath:string;themeName:string;};prettier?:{configPath:string;};js?:{enabled?:boolean;path?:string;type?:"commonjs"|"module";};css?:{enabled?:boolean;path?:string;element?:string;customMedia?:boolean;customProperty?:boolean;};options?:{mediaQuery?:boolean;resolution?:boolean;minWidth?:boolean;maxWidth?:boolean;};}
You could validate your configuration files with the help ofJSON Schema Store and e.gVisual Studio CodeYAML Extension.
To respect your local Prettier formatting rules please add the path to the configuration file toprettier.path.
Just runyarn drupal-breakpoints-css start ornpm run drupal-breakpoints-css start. Thats it :)
# Durpal breakpoints filetheme_name.s:label:smallmediaQuery:"only screen and (max-width: 47.9375rem)"weight:0multipliers: -1x -2xtheme_name.md:label:mediummediaQuery:"only screen and (min-width: 48rem) and (max-width: 63.9375rem)"weight:2multipliers: -1x -2xtheme_name.lg:label:largemediaQuery:"only screen and (min-width: 64rem) and (max-width: 89.9375rem)"weight:3group:theme_name.groupmultipliers: -1x -2x
/* Generated CSS file */@custom-media --Themename-small-mediaQuery (only screenand (max-width:47.9375rem));@custom-media --Themename-small-resolution (resolution:2x);@custom-media --Themename-small-maxWidth (max-width:47.9375rem);:root {--ThemeName-small-mediaQuery:"only screen and (max-width: 47.9375rem)";--ThemeName-small-resolution:"2x";--ThemeName-small-maxWidth:"47.9375rem";}
// Generated JS fileconstBREAKPOINTS={"ThemeName-small-mediaQuery--raw":"only screen and (max-width: 47.9375rem)","ThemeName-small-resolution--raw":"2x","ThemeName-small-resolution":"resolution: 2x","ThemeName-small-maxWidth--raw":"47.9375rem","ThemeName-small-maxWidth":"max-width: 47.9375rem",};exportdefaultBREAKPOINTS;
ThisScript uses open source software and would not have been possible without the excellent work of theDrupal,Eslint,deepmerge andPrettier teams! Thanks a lot!
About
Extract CSS custom properties and custom-media queries as well as a JavaScript config from Drupal's theme breakpoints
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Contributors2
Uh oh!
There was an error while loading.Please reload this page.