A front-end design toolkit built with Sass for developing responsive web apps. Primitive also provides helpful, browser-consistent styling for default HTML elements - buttons, forms, tables, lists, and typography.
- Download the stylesheet or use the CDN URL: https://unpkg.com/primitive-ui/dist/css/main.css.
- Save the stylesheet and link to it in the head of your project.
<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css" />
It's all set to go and your HTML elements will be given sensible default styling.
The beauty of Primitive is the ease with which you can create unique designs in a beautiful, simple system.
# Clone the repo
git clone https://github.com/taniarascia/primitive.git
# Watch for file changes
npm run sass:watch
# Build a minified production build
npm run sass:build
Now you can begin modifying variables in variables.scss
. This file will define your colors, typography, sizes, breakpoints, buttons, borders, and more. Define all your variables here to keep your project organized.
You can view dist/test.html
or docs/template.html
to see some example elements as you make changes.
If you use would prefer to use Gulp for compiling, the option is available.
- Watch modifications and recompile:
yarn gulp-watch
/npm run gulp-watch
- Build CSS:
yarn gulp-css
/npm run gulp-css
- Dave Gamache for building Skeleton CSS, the original inspiration for building Primitive and understanding responsive CSS.
Please feel free to fork, comment, critique, or submit a pull request.
This project is open source and available under the MIT License.