Quark

Simply put, a SASS starter framework.

Table of contents

1. Intro
2. Description
3. Instructions
4. How to use
5. License
6. Docs (coming soon)

Intro

This framework is all about the structure and layout only. It does not contain any presentation styles. Design in itself is a unique and creative process. When you want your product to stand out, you rarely design it to look like something that already exists. Thus, an assumption about the presentation styles of your components would be redundant. I don't want you to overwrite stuff just because by default, they don't look like they should. I think it's far better to write them from scratch.

Description

The main goal of the framework is to be as unobtrusive as possible. It's just the foundation you build on top of. As simple as that.

A quark (/ˈkwɔːrk/ or /ˈkwɑːrk/) is an elementary particle and a fundamental constituent of matter (more details here). Quarks combine to form composite particles called hadrons, the most stable of which are protons and neutrons, the components of atomic nuclei. At the moment, quarks are the smallest particles known to man. They are the foundation of everything. Just like Quark aims to be for your products.

The framework takes scalability into consideration, being thought as a solution for large scale applications/websites. It provides an intuitive folder structure, a clear organization of the underlying logic that builds the framework and separation of concerns when it comes to the bits and pieces that connect. This should provide sanity when dealing with large CSS codebases (nothing is for sure, though :D).

Composability is the next thing. Styles are broken down into named folders with specific responsibilities in mind. They are included so that the specificity of your styles grows towards the end of your stylesheet in a linear and predictable fashion. Composition is left in the hands of the developer. Quark provides SRP (Single Responsibility Principle) classes that do one thing and one thing only. Composition then becomes a lego game, where you embed the classes you need on the right elements. This makes a great case for reusability as well as a faster development cycle (at the cost of embedding two, three extra classes in your HTML, which I always think it's worth it).

Quark doesn't care about your app styles. Yeah, I know this is the second time I'm saying this. Just wanted to make sure. Actually, the framework tries to provide as few visuals as possible. It just helps with the underlying structure and layout. Visuals are usually something very specific and it makes little sense to provide defaults that will be then overwritten by developers. The way something looks should be your decision.

Instructions

1. Clone the repository
2. Run npm install
3. Run npm start (this will automatically watch for changes and recompile)
4. Extra: npm run build rebuilds the styles, production ready (minified, concatenated, etc.)

You can check http://localhost:8080 in the browser for some quick examples.

How to use

Probably the safest is to include the compiled version in your project (find it under dist/quark.css). However, Quark also enforces structure due to how things are organized inside the framework (layered approach). Although this is a personal preference and by no means the one and only way to organize your CSS/SASS, you might take a look and decide whether it's worth sticking with it or not. If it is, a better approach would be to copy the structure in your project and build on top of that (this enforces consistency in your codebase).

Another idea would be to require only what you need from the framework. This is great because it allows fine control over your imports and can potentially reduce the footprint of the included styles to a bare minimum. However, you're tied to using some CSS loader in your build process - browserify-css or webpack css-loader.

License

This software is released under the terms of MIT license.