Juniper
The Human Made Web Style Guide and Pattern Library. Head over to the site to see it in action!
Maintained by:
- Matthew Haines-Young, @mattheu
- Samantha Miller, @sambulance
- Peter Wilson, @peterwilsoncc
Usage Instructions
Refer to the documentation for full usage instructions.
Contributing and Development
Set up
Run these commands to get it running locally
git clone --recursive git@github.com:humanmade/hm-pattern-library.git hm-pattern-library.dev
cd hm-pattern-library.dev
- If you do not have gulp installed on your machine, install it globally by running
npm install gulp-cli -g
npm install
- The sass and html can be compiled by running the command
gulp
.
The Human Made pattern library generates flat HTML and does not require a web server to be loaded. Once compiled, the HTML can be opened in your browser via the file system. You can simply access the compiled index file directly at …/dist/index.html
Workflow.
All local development should be done against master. dist
which contains the compiled files is ignored from version control and must be created using the gulp
task. Releases are just the content of dist
and nothing else.
Creating a branch
All contributions should relate to an issues. If the issue does not exist, open an issue in the original repository, this will give your issue a number.
When creating a branch, name your branch [issue-number]-short-summary
.
Submitting a pull request
Before submitting a pull request, you will need to confirm your sass meets our coding standards by running gulp lint-sass
.
When you push your branch, you will be able to submit a pull request. Travis CI runs on the repository and will need to pass on all pull requests.
If Travis CI fails, you can push further commits to the branch to fix the build.
CSS Naming convention
This project follows the BEM CSS naming convention.
Components
Sub-components are indicated with an __
, variants with a --
block
block__child
block__child--variant
In the styles/components directory, components should be placed in a file named for the component, _component.scss
.
Utilities
Utilities are prefixed with util-
, for example util-clearfix
. A utility should be placed in the styles/utilities directory in a file named for the utility, _clearfix.scss
.
Vendor files
Class names in vendor files should not be changed, the files should be placed in the styles/vendor directory and included as any other file would be included. These files do not need to meet our linting standards.
Adding a new Icons
- We need the icon file in SVG format. Ping babi if you need a new one as she can make sure they have consistent height and visual weight.
- The source svg file must have black fill. The gulp script will generate red and white icons by doing a search/replace for
fill="#000000"
- Add the icon to this directory:
src/images/icons/
- Add the icon to the list of icons in the SCSS file.
- Add the icon to the list of icons in the icons documentation HTML file.
Changelog
2.0.1
- Mail icon.
2.0
- Big overhaul for the new HMN.MD design. Version 2.0 breaks backwards compatability with older versions.
- New: Labels, Pagination.
- Simplify, removing search and collapsable nav components, and associated JS>
1.0.5
- Labels & Tag cloud styles
- New alternate variant plus/minus icons. Removes need for 'beige' variations.
- New iconSrc helper function.
- Remove animations from nav to fix overflow hidden bug.
- New icon helper mixin. Also new lock and comment icons.
- Fix some bugs in tables
- Refactor links/buttons to break hard dependency.
1.0.4
- Use component colour variables with brand variables as defaults for easier customizing. Props @missjwo
1.0.3
- Better gulp tasks for icons and logos. Note if you are referencing logo file directly, you will need to update your paths.
1.0.2
- Add styles for WordPress galleries
- Make variables defaults
1.0.1
- Prevent images breaking out of container.
1.0.0
- First stable release