![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Our css starter pack and folder structure. The purpose of this repo is to have a single source of truth for all css used across, react, wordpress, static, or any future sites. When spinning up a new repo, please make sure it's using the latest version of this scss
folder.
This project runs on Node v18. Install Node 18 to run this project or install NVM and run nvm install v18
. If using NVM, precede your npm run
commands with nvm use
.
Run npm i
before running each NPM script to ensure that the project's dependencies are available and up to date.
To spin up the sass dev environment for this project, run npm run gulp
. This will compile and watch ./test/test.scss
and watch the ./scss
directory for sass changes.
This project uses prettier and stylelint for automatic code formatting and CSS linting. Prettier and stylelint can be run on the whole project at once by running npm run prettier
and npm run stylelint
. This project uses husky
and lint-staged
to automatically run prettier and stylelint on staged files to format files before they are committed. If any errors are thrown from either library during the pre-commit process, git will output the errors and the commit will be blocked until the errors are fixed.
Contributions are welcome! Please either post an issue of a suggestion or open a pull request. Be sure to edit test/index.html
to show clear example of code addition.
Will post more on our responsive theory soon, but for now:
Write all base styles then overwrite as necessary for desktop(landscape). This will result in much less overwriting of code. Mobile media queries should be rare.
body {
padding: 0 5%;
@media (min-width: #{$tp}px) {
padding: 0 15pxv;
}
}
Designs will have both portrait (mobile) designs and (desktop) designs delivered by the design team. In general these will be the sizes
375px
1440px
We will be using the postcss-pxv plugin for viewport unit conversions.
input:
div {
width: 150pxv;
}
output:
div {
width: clamp(
1px,
calc(150vw * (100 / var(--siteBasis))),
calc(150px * var(--siteMax) / var(--siteBasis))
);
}
A fluid typography approach harnessing the power of css custom properties.
Example
.h-xxl {
--fontSize: 38;
@media (min-width: #{$tl}px) {
--fontSize: 50;
}
}
Example with clamp:
.body-m {
--fontSize: 14;
--fontSizeMinClamp: 12;
@media (min-width: #{$tl}px) {
--fontSize: 16;
--fontSizeMinClamp: 14;
}
}
Included are some default spacing values for layouts. These can be overwritten on a project-basis, but we will mostly use these values on all projects.
$spacing-01: 6pxv;
$spacing-02: 12pxv;
$spacing-03: 16pxv;
$spacing-04: 34pxv;
$spacing-05: 32pxv;
$spacing-06: 40pxv;
$spacing-07: 48pxv;
$spacing-08: 64pxv;
$spacing-09: 80pxv;
$spacing-10: 96pxv;
$spacing-11: 120pxv;
$spacing-12: 160pxv;
$spacing-default: $spacing-07;
FAQs
kni css
We found that kni-scss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.