http://wonderweblabs.github.io/curo-material-interface/
Curo Material Interface is an extraction of the wonderweblabs Curo CMS which is used in the client projects (https://curocms.com - soon available). Since we want to reuse the design patterns in other projects, we'll continuously move those implementation in this repo.
Most parts of the implementation are loosely based on the Google Material Design concept (http://www.google.com/design/spec/material-design/introduction.html). Feel free to fork this repo and continue your own interpretation of the google material design concept.
As icon set we use google material design icons (https://github.com/google/material-design-icons).
Installation
Middleman & Rails
gem 'curo-material-interface'
Include styles
We decided to keep things as open as possible - not like other libraries that include many files by default. Instead, you need to care about the inclusion on your own:
@import cmi/libs
// !!! Important
// To use curo material interface fonts and icons,
// you need to provide the font-face loading mixin.
@import ./font_mixin
// config
@import cmi/colors
@import cmi/variables
@import cmi/mixins
@import cmi/extensions
// basic curo material interface files
@import cmi/reset
@import cmi/global
// fonts / typo
@import cmi/roboto
@import cmi/icons
@import cmi/typography
// components
@import cmi/components/navbar
@import cmi/components/buttons
@import cmi/components/flex-modal
@import cmi/components/loading-indicator
@import cmi/components/ripples
@import cmi/components/tabs
@import cmi/form_components/text_field
@import cmi/form_components/checkbox
At "@import ./font_mixin" you need to implement the right font font-face call for middleman or rails for your application:
Rails
@font-face
font-family: "Material-Design-Icons"
src: asset-url("mdi/Material-Design-Icons.eot?-g7cqhn")
src: asset-url("mdi/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), asset-url("mdi/Material-Design-Icons.woff?-g7cqhn") format("woff"), asset-url("mdi/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), asset-url("mdi/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg")
font-weight: normal
font-style: normal
=font-face-helper($family, $fileBaseName, $weight, $style, $svgAppendix: '')
@font-face
font-family: $family
src: asset-url($fileBaseName + '.eot')
src: asset-url($fileBaseName + '.eot?#iefix') format('embedded-opentype'), asset-url($fileBaseName + '.woff') format('woff'), asset-url($fileBaseName + '.ttf') format('truetype'), asset-url($fileBaseName + '.svg#' + $svgAppendix) format('svg')
font-weight: $weight
font-style: $style
Middleman
@font-face
font-family: "Material-Design-Icons"
src: font-url("mdi/Material-Design-Icons.eot?-g7cqhn")
src: font-url("mdi/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), font-url("mdi/Material-Design-Icons.woff?-g7cqhn") format("woff"), font-url("mdi/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), font-url("mdi/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg")
font-weight: normal
font-style: normal
=font-face-helper($family, $fileBaseName, $weight, $style, $svgAppendix: '')
@font-face
font-family: $family
src: font-path($fileBaseName + '.eot')
src: font-path($fileBaseName + '.eot?#iefix') format('embedded-opentype'), font-path($fileBaseName + '.woff') format('woff'), font-path($fileBaseName + '.ttf') format('truetype'), font-path($fileBaseName + '.svg#' + $svgAppendix) format('svg')
font-weight: $weight
font-style: $style
Usage
CMI is completely scoped - meaning that the classes won't work unless you add a container with class="cmi"
somewhere around your implementation. We need that behavior for our cms.
%body
// won't work:
%a.cmi-btn
My Button
// works:
.cmi
%a.cmi-btn
My Button
The easiest way is to assign cmi class to the body tag, if scoping of the implementation is not important for you:
%body.cmi
%a.cmi-btn
My Button