https://github.com/automattic/jetpack-base-styles

[READ ONLY] Base SCSS utilities and variables for Jetpack. This repository is a mirror, for issue tracking and development head to: https://github.com/automattic/jetpack
https://github.com/automattic/jetpack-base-styles

jetpack npm-module npm-package wordpress

Last synced: 2 days ago
JSON representation

[READ ONLY] Base SCSS utilities and variables for Jetpack. This repository is a mirror, for issue tracking and development head to: https://github.com/automattic/jetpack

• Host: GitHub
• URL: https://github.com/automattic/jetpack-base-styles
• Owner: Automattic
• License: other
• Created: 2021-08-16T06:55:39.000Z (about 3 years ago)
• Default Branch: trunk
• Last Pushed: 2024-09-26T10:44:54.000Z (7 days ago)
• Last Synced: 2024-09-26T15:11:34.420Z (7 days ago)
• Topics: jetpack, npm-module, npm-package, wordpress
• Language: SCSS
• Homepage: https://github.com/Automattic/Jetpack/
• Size: 158 KB
• Stars: 2
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# Base Styles

Base SCSS utilities and variables for Jetpack.

## Installation

Install the module

```bash

npm install @automattic/jetpack-base-styles --save-dev

```

## Use

### SCSS utilities and variables

In your application's SCSS file, include styles like so:

```scss

@import 'node_modules/@automattic/jetpack-base-styles/colors';

@import 'node_modules/@automattic/jetpack-base-styles/variables';

@import 'node_modules/@automattic/jetpack-base-styles/mixins';

@import 'node_modules/@automattic/jetpack-base-styles/breakpoints';

@import 'node_modules/@automattic/jetpack-base-styles/animations';

@import 'node_modules/@automattic/jetpack-base-styles/z-index';

@import 'node_modules/@automattic/jetpack-base-styles/default-custom-properties';

```

If you use [Webpack](https://webpack.js.org/) for your SCSS pipeline, you can omit `node_modules/`:

```scss

@import '@automattic/jetpack-base-styles/colors';

```

To make that work with [`sass`](https://www.npmjs.com/package/sass) or [`node-sass`](https://www.npmjs.com/package/node-sass) NPM modules without Webpack, you'd have to use [includePaths option](https://sass-lang.com/documentation/js-api#includepaths):

```json

{

	"includePaths": [ "node_modules" ]

}

```