Ember-cli-inuitcss
A quick start to use inuitcss/itcss in an ember-cli app.
Installation
ember install ember-cli-inuitcss
Changelog
1.0.2
- [BUGFIX] Fix wrong imports in blueprint. Thanks to @kennstenicht for the PR.
- [ENHANCEMENT] Use npm instead of bower. You can now remove the
inuitcss
andsass-mq
dependencies frombower.json
. Thanks to @kennstenicht for the PR.
Usage >= 1.0.0
You can use the app.scss
the addon provides or just use what you need.
The app.scss
the addon provides:
// SETTINGS
@import "inuitcss/settings/settings.core";
@import "settings/_example.settings.config";
@import "settings/_example.settings.global";
// TOOLS
@import "inuitcss/tools/tools.font-size";
@import "inuitcss/tools/tools.clearfix";
@import "inuitcss/tools/tools.hidden";
@import "sass-mq/mq";
// GENERIC
@import "inuitcss/generic/generic.box-sizing";
@import "inuitcss/generic/generic.normalize";
@import "inuitcss/generic/generic.reset";
@import "inuitcss/generic/generic.shared";
// ELEMENTS
@import "inuitcss/elements/elements.page";
@import "inuitcss/elements/elements.images";
@import "inuitcss/elements/elements.headings";
@import "inuitcss/elements/elements.tables";
// OBJECTS
@import "inuitcss/objects/objects.block";
@import "inuitcss/objects/objects.box";
@import "inuitcss/objects/objects.crop";
@import "inuitcss/objects/objects.flag";
@import "inuitcss/objects/objects.layout";
@import "inuitcss/objects/objects.list-bare";
@import "inuitcss/objects/objects.list-inline";
@import "inuitcss/objects/objects.media";
@import "inuitcss/objects/objects.pack";
@import "inuitcss/objects/objects.ratio";
@import "inuitcss/objects/objects.table";
@import "inuitcss/objects/objects.wrapper";
// COMPONENTS
// @import "components.your-component";
// UTILITIES
@import "inuitcss/utilities/utilities.clearfix";
@import "inuitcss/utilities/utilities.headings";
@import "inuitcss/utilities/utilities.hide";
@import "inuitcss/utilities/utilities.print";
@import "inuitcss/utilities/utilities.responsive-spacings";
@import "inuitcss/utilities/utilities.spacings";
@import "inuitcss/utilities/utilities.widths";
Usage <= 0.1.2
You can use the app.scss
the addon provides or just use what you need.
The app.scss
the addon provides:
// Inuit settings
// https://github.com/inuitcss/settings.defaults
$inuit-base-font-size: 12px;
$inuit-base-line-height: 18px;
$inuit-base-text-color: #333;
$inuit-base-background-color: #fff;
@import "inuit-defaults/settings.defaults";
// Your settings
// @import "settings.colors";
// https://github.com/inuitcss/settings.responsive
@import "inuit-responsive-settings/settings.responsive";
// Inuit tools
// https://github.com/inuitcss/tools.functions
@import "inuit-functions/tools.functions";
// https://github.com/inuitcss/tools.mixins
@import "inuit-mixins/tools.mixins";
// https://github.com/inuitcss/tools.responsive
@import "inuit-responsive-tools/tools.responsive";
// https://github.com/inuitcss/tools.widths
@import "inuit-tools-widths/tools.widths";
// Inuit generics
@import "inuit-normalize/generic.normalize";
@import "inuit-reset/generic.reset";
@import "inuit-box-sizing/generic.box-sizing";
@import "inuit-shared/generic.shared";
// Inuit base
// https://github.com/inuitcss/base.page
@import "inuit-page/base.page";
// https://github.com/inuitcss/base.headings
@import "inuit-headings/base.headings";
@import "inuit-lists/base.lists";
@import "inuit-images/base.images";
@import "inuit-paragraphs/base.paragraphs";
// Your base like
// @import "base.links";
// Inuit objects
// http://csswizardry.com/csswizardry-grids/
// https://github.com/csswizardry/csswizardry-grids
// https://github.com/inuitcss/objects.layout
@import "inuit-layout/objects.layout";
// see a full list of objects on github: https://github.com/inuitcss/?utf8=%E2%9C%93&query=objects
// Your components
// @import "components.page-head";
// Inuit trumps
@import "inuit-clearfix/trumps.clearfix";
@import "inuit-headings-trumps/trumps.headings";
$inuit-enable-paddings: true;
@import "inuit-spacing/trumps.spacing";
@import "inuit-spacing-responsive/trumps.spacing-responsive";
@import "inuit-widths/trumps.widths";
@import "inuit-widths-responsive/trumps.widths-responsive";
// Your trumps
// @import "trumps.widths";
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
Publishing
ember release
npm publish