mortar 4.1.0
mortar is a SASS pattern library that provides a set of globals, elements & obects for your web / app projects.
It is designed to be as lightweight as possible, and tries to make as few decisions on your behalf as possible.
Getting started
- Download latest release.
The codebase is broken down into a group of meaningful objects:
- Globals: Global variabales, mixins, typography and utilities.
- Components: Small reusable components.
- Modules: Features that use components to build sections of a page.
Globals
Globals are objects and styles that can be used anywhere throughout your site without any namespacing.
Components
A component is a small, reusable feature that should work anywhere on it's own.
Modules
Modules are bigger features within your site such as your header, content area or footer.
Modules can be built from the ground up or be built up with a variety of components to form a feature.
Modules are the building blocks from which you put together complete pages.
Code Styleguide
Naming Conventions
Example Component
.c-modal {}
Example Component Part:
.c-modal-body {}
Example Component Modifier:
.c-modal.-open {}
Namespacing Rules
In order to protect your code and avoid unexpected conflicts with other components, modules or external code - you should always namespace your components, modules and pages.
Konstruct uses the following namespaces:
- Globals:
.g-[name] - Components:
.c-[name] - Module:
.m-[name] - Page:
.p-[name]
Protecting Modifiers
Modifiers are always used in the .-[modifier] format, and therefore can run the risk of being polluted by similar modifiers.
To ensure that your modifiers are always protected, you should encapsulate your modifiers to the object you are modifying.
If you want to have a global modifier, you should add it as a global object.
Example Modifier
-
-blue {background: $blue}: will be global. -
.c-box.-blue {background: $blue}will only be valid within the box component.
Found a bug?
Shit happens, be awesome and help me fix it by reporting it!
- https://github.com/konstruct/konstruct.scss/issues
- Fixed it yourself? Why not make a pull request?
Authors
- Adrian Kirsten - @traaidmark - traaidmark.com
Copyright 2016 Adrian Kirsten
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
