A minimalist Sass boilerplate that provides helpful, browser-consistent styling for default HTML elements - buttons, forms, tables, lists, and typography.
Primitive was originally built by Tania Rascia to understand how a responsive CSS framework works from the inside-out, and how to use Sass, the CSS preprocessor.
Primitive makes it incredibly simple to set the foundation for a sustainable styling system. You get the freedom to design your site however you want, with a solid, easy-to-understand underlying framework.
Many websites have been built with Primitive, such as taniarascia.com, Laconia, Cafe Ba-Ba-Reeba!, Shaw's Crab House, Tokio Pub, Krispy Kreme Pacific Northwest, and more.
Note: I need to get this up on a CDN.
- Download the stylesheet.
- Save the stylesheet and link to it in the head of your project.
The beauty of Primitive is the ease with which you can create unique designs in a beautiful, simple system. Simply clone the repo:
git clone git@github.com:taniarascia/primitive.git
And run a Sass watch on the project.
npm run sass
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 templates/template.html
to see some example elements as you make changes.
All documentation can be found at https://taniarascia.github.io/primitive.
- Clean up comments
- Add simple flex grid back in
- Look into autoprefixing
- Improve documentation
- 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.