marshmellowcss
Easy intuitive utility-first CSS framework for rapidly building custom user interfaces.
Status
Explore Marshmellow docs »
Table of contents
Quick start
Several quick start options are available:
- Download the latest release
- Clone the repo:
git clone https://github.com/marshmellowcss/marshmellowcss.git - Install with npm:
npm install marshmellowcss - Install with yarn:
yarn add marshmellowcss - Install with Composer:
composer require marshmellowcss/marshmellowcss:5.1.3
1. Install Marshmellow CSS
Install marshmellow via npm, and create your marshmellow.config.js file.
#Terminal
> npm install -D marshmellow
> npx marshmellow init2. Configure your template paths
Add the paths to all of your template files in your
mellow.config.jsfile (ormarshmellow.config.jsfile. Allows unused rules to be removed from dist at compile.)
//mellow.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}3. Add the Marshmellow directives to your CSS
Add the
@marshmellowdirectives for each of Marshmellow's layers to your main CSS file.
#src/input.css
@marshmellow base;
@marshmellow components;
@marshmellow utilities;4. Start the Marshmellow CLI build process
Run the CLI tool to scan your template files for classes and build your CSS.
#Terminal
> npx marshmellowcss -i ./src/input.css -o ./dist/output.css --watch
- Start using Marshemmlow in your HTML
Add your compiled CSS fileto the
<head>and start using Marshmellow's utility classes to style your content.
#src/index.html
Add your compiled CSS
Read the Getting started page for information on the framework contents, templates, examples, and more.
What to read next
Get familiar with some of the core concepts that make Marshmellow CSS different from writing traditional CSS.
- Utility-First fundamentals
Using a utility-first workflow to build complex components from a contrained set of primitive utilies
- Customizing the Framework
Customize the framework to match your brand and extend it with your own custom styles
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Marshmellow CSS on GitHub
For casual chit-chat with others using the framework:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent