Drupal theme using Vite contrib module
Basic theme dev setup for Vite after installing a Drupal Starterkit theme
Tested in Valet and MAMP Pro local environments.
themes/custom/THEME/package.json
{
<?php | |
use Valet\Drivers\Specific\WordPressValetDriver; | |
class LocalValetDriver extends WordPressValetDriver { | |
/** @var string The remote host to proxy requests to */ | |
const REMOTE_HOST = 'https://remotehost.com/'; | |
/** @var string If the request URI starts with this, we want to proxy the request to the remote host */ | |
const URI_PREFIX = '/wp-content/uploads/'; |
Tested in Valet and MAMP Pro local environments.
themes/custom/THEME/package.json
{
Install the following node modules (npm), in the same directory as this readme file, for compiling and linting our code.
npm i -D @babel/core @babel/preset-env autoprefixer babel-loader browser-sync browser-sync-webpack-plugin css-loader mini-css-extract-plugin postcss-loader postcss-pxtorem sass sass-loader standard stylelint stylelint-config-sass-guidelines stylelint-order webpack webpack-cli
# [NPM Check Updates](https://www.npmjs.com/package/npm-check-updates) | |
- Install the tool `npm i -D npm-check-updates` | |
- Update the package.json `npx ncu --upgrade` | |
- Install the new packages npm install |
!.eslintrc.json | |
!README.md | |
node_modules | |
bsync-config.js |
> 0.2% | |
last 2 version | |
Firefox ESR | |
not dead |
Difference Between Pixel (Px) and Point (Pt) Font Sizes in Email Signatures
A point (pt) is equal to 0.352778 millimeters, 0.0138889 inches, or 1.333 pixels.
Points | Pixels |
---|---|
6pt | 8px |
7pt | 9px |
7.5pt | 10px |
8pt | 11px |
Selecting one or several DOM elements to do something with is one of the most basic elements of jQuery. The equivalent to $()
or jQuery()
in JavaScript is querySelector()
or querySelectorAll()
, which, just like with jQuery, you can call with a CSS selector.
// jQuery, select all instances of .box
$(".box");
drush eval "var_dump(Drupal\Component\Utility\Crypt::randomBytesBase64(55))" |
https://css-tricks.com/snippets/css/css-triangle/ | |
.arrow-up { | |
content: ""; | |
border-right: 15px solid transparent; | |
border-bottom: 15px solid black; | |
border-left: 15px solid transparent; | |
width: 0; | |
height: 0; | |
} |