Provides some basic layout components and generic SASS stylesheets.
ember install ember-skeleton
Requirements
The addon ember-cli-sass
must be installed.
Adds static classes to a component to give it rounded corners, large padding, a border and box shadow effect.
depth
Default is 1, max is 5. Sets the depth of the box shadow based on the Google Material Design spec.borderColorProp
When passed, the component leverages theember-skeleton/theme-color-string
helper to apply a custom border colour, based on theborderColorProp
.themeColorStringHash
Allows you to pass a hash of custom string associations to be used by theember-skeleton/theme-color-string
helper when returning the border colour. In the example below, the classborder-success
will be added ifsomeProp
evaluates to "ok".materialCardHoverEffect
Determines whether or not effects will be applied when the user hovers obver the card.
{{#ember-skeleton/material-card
materialCardHoverEffect=true
borderColorProp=someProp
depth=2
themeColorStringHash=(hash
ok="success"
)
}}
...
{{/ember-skeleton/material-card}}
You can make any component into a material card component by extending the material-card component class.
// component JS
import MaterialCard from 'ember-skeleton/components/ember-skeleton/material-card';
export default MaterialCard.extend({
...
});
When inserting the relevant component there are options.
Accepts a string as the first argument.
Replaces underscores with spaces in the string, and applies one of three casing functions:
titleCase (default)
sentenceCase
lowerCase
{{ember-skeleton/humanise-string "Action_required"}}
// Action Required
{{ember-skeleton/humanise-string "Action_required" "sentenceCase"}}
// Action required
{{ember-skeleton/humanise-string "Action_required" "lowerCase"}}
// action required
{{ember-skeleton/humanise-string "Action_required" "upperCase"}}
// ACTION REQUIRED
import { humaniseString } from 'ember-skeleton/helpers/ember-skeleton/humanise-string';
...
humaniseString(['action_required', 'sentenceCase']);
Receives a string and returns another string, based on the settings in the ember-skeleton service (If they exist) ans the hash passed when calling the helper in a template.
{{ember-skeleton/theme-color-string "present" present="success" absent="danger"}}
// success
{{ember-skeleton/theme-color-string "absent" present="success" absent="danger"}}
// danger
These can be set in app/services/ember-skeleton
in the consuming app, as shown below. Note that you can also override defaultThemeColorString
, which is what the helper will return if the string passed does not match anything in the default settings, nor in the hash passed to the helper.
import Service from '@ember/service';
export default Service.extend({
init() {
this._super(...arguments);
this.themeColorStringDefaults = [{
returnString: 'success',
matchStrings: ['complete', 'active', 'accepted']
},
{
returnString: 'warning',
matchStrings: ['absent']
},
{
returnString: 'danger',
matchStrings: ['failed', 'error', 'revoked', 'rejected']
},
{
returnString: 'gray-medium',
matchStrings: ['pending', 'processing']
}];
},
...
defaultThemeColorString: 'gray-medium',
});
{{ember-skeleton/theme-color-string "complete"}}
// success
{{ember-skeleton/theme-color-string "unmatched-string"}}
// gray-medium
(Because of defaultThemeColorString: 'gray-medium'
)
import { themeColorString } from 'ember-skeleton/helpers/ember-skeleton/theme-color-string';
...
themeColorString(['test'], {test: 'completed'});
Note that if you have defined themeColorStringDefaults
in the emberSkeleton
service of the consuming app, this will not be available to the helper when calling it in JavaScript. To make these available, include them in the hash passed to the helper, with the key defaultAssotiations
.
import { themeColorString } from 'ember-skeleton/helpers/ember-skeleton/theme-color-string';
import { inject as service } from '@ember/service';
...
emberSkeleton: service(),
themeColorString(['test'], {defaultAssociations: this.emberSkeleton.themeColorStringDefaults});
Determines whether the singular or plural version of a word should be used. Accepts a number as the first argument, ad a hash of the singular and plural versions of the work or phrase.
The plural version is option- if not passed, the plural version of the phrase defaults to the singular version with 's' appended.
{{ember-skeleton/custom-inflector 1 singular="mouse" plural="mice"}}
// mouse
{{ember-skeleton/custom-inflector 2 singular="mouse" plural="mice"}}
// mice
import { customInflector } from 'ember-skeleton/helpers/ember-skeleton/custom-inflector';
...
customInflector([number], {singular:"item was", plural:"items were"});
Returns a human readable filesize, after receiving a number of bytes as the only argument.
{{ember-skeleton/readable-file-size 2345345234}}
import { readableFileSize } from 'ember-skeleton/helpers/ember-skeleton/readable-file-size';
...
readableFileSize([23523532345]);
Receives a string to search for as the first argument, and then either a search tem and a replace term (simple search), or an array of search and replace hashes (advanced search). Note that the value of the default
hash will be returned if the string is not found in any of the hashes.
{{ember-skeleton/replace-string "spain" "spain" "europe"}}
// europe
{{ember-skeleton/replace-string "qc_pending"
advanced=(array
(hash
find="spain"
replace="europe"
)
(hash
find="south-africa"
replace="africa"
)
)
}}
Note that you can pass an array as the find
property in your advanced search hashes.
{{ember-skeleton/replace-string "south-africa"
advanced=(array
(hash
find=(array "spain" "italy" "france")
replace="europe"
)
(hash
find=(array "south-africa" "ethiopia" "namibia")
replace="africa"
)
) default="unknown"
}}
// africa
{{ember-skeleton/replace-string "not-a-real-country" "spain" "europe" default="unknown"}}
// unknown
If there are no matches and no default is passed, the original string is returned.
{{ember-skeleton/replace-string "not-a-real-country" "spain" "europe"}}
// not-a-real-country
Includes a sidebar to the left, and a main content section to the right. The content is aligned to the left of the main content section.
Invoked as below. If content header is true, the class content-header
is added to the wrapper div, and the styles add additional padding to the top of the right hand section (The main section) allowing an additional fixed bar to be placed at the top of the section.
{{#ember-skeleton/sidebar-layout/outer-wrapper contentHeader=true}}
...
{{/ember-skeleton/sidebar-layout/outer-wrapper}}
Created a layout with a horizontal panel spanning the full width of the screen. The content is centred within it. Invoked as below.
{{#ember-skeleton/panel-layout/outer-wrapper}}
...
{{/ember-skeleton/panel-layout/outer-wrapper}}
To be used inside either of the they panel or sidebar layouts. Creates what you could think of as the main content area of the page, and implements text styles for "main content" text.
Accepts one argument- the main title to be displayed on the page.
{{#ember-skeleton/panel-layout/outer-wrapper}}
{{#ember-skeleton/content-wrapper title=pageTitle}}
...
{{/ember-skeleton/content-wrapper}}
{{/ember-skeleton/panel-layout/outer-wrapper}}
The styles are implemented using SASS
, and thus the ember-cli-sass
addon is required. Install by running ember install ember-cli-sass
.
There are to stylesheets which need to be imported in app/styles/app.scss
.
@import "ember-skeleton-variables";
@import 'ember-skeleton';
Bootstrap is used heavily, but not completely. The following components are used from Boostrap 4.1. Note that some of the original Boostrap stylesheets have been modified.
There are flexbox related classes defined in ember-skeleton/app/styles/layout/flex-layouts.scss
.
The colour variants defined are extended to set the colour of both the fill and stroke properties. Example classes from the default bootstrap colour variants:
fill-danger
, fill-success
, fill-warning
stroke-danger
, stroke-success
, stroke-warning
Note the following variables:
$svg-foreground-graphic-fill
$svg-foreground-graphic-stroke-color
By adding the class foreground-graphic
to any element inside an svg, the fill and stoke colours will be whatever the corresponding variables are set to (Default is #fff
).
By default the following two sets of classes add a semi transparent css background that produce a semi transprent background. The number represents the opacity as a percentage.
overlay-bg-black-10
overlay-bg-black-20
overlay-bg-black-50
overlay-bg-white-10
overlay-bg-white-20
overlay-bg-white-50
overlay-fill-black-10
overlay-fill-black-20
overlay-fill-black-50
overlay-fill-white-10
overlay-fill-white-20
overlay-fill-white-50
Add new colours by passing a map to the the variable $overlay-colours
$overlay-colours: (
"green": "0,255,0",
"red": "255,0,0"
);
Override the default levels by defining the variable $overlay-levels
. Note that this will override the default levels entirely, so you need to include the defaults if you want to use them.
$overlay-levels: 5, 10;
The above examples would result in the following CSS:
.overlay-bg-green-5 {
background: rgba( 0,255,0 , 0.05 );
}
.overlay-bg-green-10 {
background: rgba( 0,255,0 , 0.1 );
}
.overlay-bg-red-5 {
background: rgba( 255,0,0 , 0.05 );
}
.overlay-bg-red-10 {
background: rgba( 255,0,0 , 0.1 );
}
.overlay-fill-green-5 {
background: rgba( 0,255,0 , 0.05 );
}
.overlay-fill-green-10 {
background: rgba( 0,255,0 , 0.1 );
}
.overlay-fill-red-5 {
background: rgba( 255,0,0 , 0.05 );
}
.overlay-fill-red-10 {
background: rgba( 255,0,0 , 0.1 );
}
The box-shadow
mixin accepts two arguments- the position and opacity.
The default opacity is 0.16.
There are 9 positions available:
top
, bottom
, left
, right
, topInset
, bottomInset
, leftInset
, rightInset
, bottomRight
Add a single shadow with the default opacity.
@include box-shadow(bottomRight);
Multiple shadows can be added to one element, with a custom opacity.
@include box-shadow((leftInset, topInset, bottom), 0.2);
git clone <repository-url>
cd ember-skeleton
npm install
npm run lint:hbs
npm run lint:js
npm run lint:js -- --fix
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"ember try:each
– Runs the test suite against multiple Ember versions
ember serve
- Visit the dummy application at https://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.