Cross-Platform Styles

Overview

This project sets up a cross-platform build system for styles using SCSS, PostCSS, and Autoprefixer. It ensures consistent style output across different platforms.

Project Structure

cross-platform-styles/ ├── dist/ ├── node_modules/ ├── src/ │ └── styles/ │ └── main.scss ├── package-lock.json ├── package.json ├── postcss.config.js └── README.md

Copier

Getting Started

Prerequisites

• Node.js and npm installed on your system.

Installation

1. Clone the repository:

   git clone https://github.com/akaday/cross-platform-styles.git
   cd cross-platform-styles

Install the dependencies:

bash

Copier npm install Usage Build Styles To compile SCSS to CSS and process with PostCSS and Autoprefixer:

bash

Copier npm run build Directory Explanation src/styles/main.scss: Your main SCSS file where you define your styles.

dist/: Directory where the compiled and processed CSS files will be output.

Theming with CSS Variables

This project uses CSS variables to manage theming and make styles more adaptable. You can find the variables defined in src/styles/variables.scss.

Linting and Formatting

To lint your styles and catch errors, run:

npm run stylelint

Removing Unused Styles

To remove unused styles and optimize your CSS, run:

npm run purgecss

Testing with Jest and Enzyme

To set up a testing environment for your styles, install Jest and Enzyme:

npm install jest enzyme enzyme-adapter-react-16 --save-dev

Contributing Fork the repository.

Create your feature branch (git checkout -b feature-branch).

Commit your changes (git commit -m 'Add some feature').

Push to the branch (git push origin feature-branch).

Open a Pull Request.

License This project is licensed under the ISC License. See the LICENSE file for details.

Acknowledgements Sass

PostCSS

Autoprefixer

Copier

This README ensures that anyone looking at your project can quickly understand its purpose, structure, and how to get started. Ready to drop it into your project? 🚀