The Heart of Design Systems
Core extensible collection of useful SCSS modules. Not a framework, just a bunch of loose concepts, ideas, and useful SCSS tied together. Like duct tape.
For quick design and prototyping iterations. This shortcut is not a replacement for creativity.
If you reuse design processes and UI patterns over and over, why reinvent the wheel? Save yourself time and create a toolbox of reusable components. Every designer should have their own collection. You may use this for your projects, or use this as a starting point for your own.
The idea is to centralize thought, processes and learning from previous projects for the betterment of future projects. Standardizations, conventions, and checklists will reduce the amount of work, deduplicate thought, and reduce for future projects. Surgeons use checklists to save lives, so let's learn from them.
The style guide is very modular, so only link the SCSS components you need to keep the file size down. Either include the entire thing or select what you want to import. Remember that they depend on each other to work.
@import '_styles/'to automatically import the
index.scssfile which contains all parts, or
- individually import each part like
- import each module separately
Preferred Method: Copy the full
styles folder over to a new project. If the core changes, just make sure to copy over the newest version. Eventually there might be a build task to ensure it stays up to date. This method is preferred, as changes to the core won't affect the build. Copy over whatever JS files you need and/or link to them.
Creating a symlink will give control of editing the core, but changes ripple across projects if they're all symlinked. [right-click to create an alias doesn't work with the compiler] Using the command-line interface, go to your new project's SCSS folder, then:
- Create a direct symlink file:
ln -s ~/path/to/stylecoeur_folder/styles/index.scss _stylecoeur.
Note how the name is changed to
_stylecoeur.scss to conform to SCSS naming standards, but it doesn't really matter.
- Or create a symlink to the folder in CLI. Navigate to the project's stylesheet folder:
ln -s ~/path/to/styles/stylecoeur_folder stylecoeur ln -s /Users/janzheng/Desktop/projects/stylecoeur/styles stylecoeur
I prefer the latter option, because you can now import the folder as a whole:
or pick specific compontents
(Symlinks are simpler than using an npm module, since projects like static sites might not use symlinks)
Middleman Style Guide
The documentation is written in a combination of ERB, Kramdown (variant of Markdown), and HTML, supported by SCSS. Go to the source/ folder and use the following commands. Note that the source example uses a symlink itself.
bundle exec middleman server
then preview on
Compiling the example:
bundle exec middleman build
If you want to deploy Middleman as a straight-up site, you can do that for free on Github.
Deploying to Github uses middleman deploy:
bundle exec middleman build [--clean] bundle exec middleman deploy [--build-before]
activate :deploy do |deploy| deploy.deploy_method = :git # Optional Settings # deploy.remote = 'custom-remote' # remote name or git url, default: origin # deploy.branch = 'custom-branch' # default: gh-pages # deploy.strategy = :submodule # commit strategy: can be :force_push or :submodule, default: :force_push # deploy.commit_message = 'custom-message' # commit message (can be empty), default: Automated commit at `timestamp` by middleman-deploy `version` end