diff --git a/README.md b/README.md index 15747d3..168bece 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,10 @@ Writing blog posts is [default jekyll procedure](https://jekyllrb.com/docs/posts/). - - ## Docs -All docs pages are contained in the `/docs` directory and get a "docs" category as YAML front matter. General documentation is stored directly in `/docs` and get the YAML front matter tag "general". When a page is in a layer subdirectory, it gets a tag with the respective layer name. E.g. `objects.media.md` gets a "objects" tag. If it's an layer overview page, e.g. `objects.md`, it gets the tags "general objects". +All docs pages are contained in the `/docs` directory. --- -Tested with jekyll 3.1.6 +Tested with jekyll 3.7.0 diff --git a/_config.yml b/_config.yml index 0bac111..9e40bcd 100644 --- a/_config.yml +++ b/_config.yml @@ -24,3 +24,10 @@ collections: demo: output: true permalink: /:collection/:path/ + +defaults: + - scope: + path: "" + type: docs + values: + layout: page diff --git a/_demo/objects/block.html b/_demo/objects/block.html index 25fd502..8c6c4a6 100644 --- a/_demo/objects/block.html +++ b/_demo/objects/block.html @@ -1,8 +1,101 @@ --- layout: demo permalink: /demo/block/ +handle: block --- -

.o-block

+

.o-block

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!

+ +
+ + +

.o-block--tiny

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
+ + +
+ + +

.o-block--small

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
+ + +
+ + +

.o-block--large

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
+ + +
+ + +

.o-block--huge

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
+ + +
+ + +

.o-block--flush

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
+ + +
+ + +

.o-block--right

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
+ + +
+ + +

.o-block--left

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
+ + +
+
diff --git a/_demo/objects/block/block--small.html b/_demo/objects/block/block--small.html new file mode 100644 index 0000000..dd1b3fd --- /dev/null +++ b/_demo/objects/block/block--small.html @@ -0,0 +1,16 @@ +--- +layout: demo +permalink: /demo/block--small/ +handle: block--small +--- + +
+ +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quasi, nihil corrupti error, eius est architecto voluptatibus + totam necessitatibus explicabo consequatur impedit natus + maiores adipisci quidem autem nostrum quam eaque quisquam + fugit deleniti ullam, laboriosam, ipsa. +
+
diff --git a/_demo/objects/block/block.html b/_demo/objects/block/block.html new file mode 100644 index 0000000..e373c22 --- /dev/null +++ b/_demo/objects/block/block.html @@ -0,0 +1,13 @@ +--- +layout: demo +permalink: /demo/block/ +handle: block +--- + +

.o-block

+
+ block image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa. +
+
diff --git a/_docs/conventions.md b/_docs/00-getting-started/conventions.md similarity index 89% rename from _docs/conventions.md rename to _docs/00-getting-started/conventions.md index 2893680..e404124 100644 --- a/_docs/conventions.md +++ b/_docs/00-getting-started/conventions.md @@ -1,10 +1,7 @@ --- -layout: page title: "Conventions" -group: getting-started -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Getting Started" +order: 30 --- inuitcss relies on a handful of conventions which might be useful to know about diff --git a/_docs/directory-structure.md b/_docs/00-getting-started/directory-structure.md similarity index 96% rename from _docs/directory-structure.md rename to _docs/00-getting-started/directory-structure.md index 5b3f8be..191fdea 100644 --- a/_docs/directory-structure.md +++ b/_docs/00-getting-started/directory-structure.md @@ -1,10 +1,7 @@ --- -layout: page title: "Directory Structure" -group: getting-started -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Getting Started" +order: 10 --- inuitcss follows a specific folder structure, which you should follow as well in your own CSS directory: diff --git a/_docs/index.md b/_docs/00-getting-started/index.md similarity index 84% rename from _docs/index.md rename to _docs/00-getting-started/index.md index c169e9d..9ec56c3 100644 --- a/_docs/index.md +++ b/_docs/00-getting-started/index.md @@ -1,11 +1,9 @@ --- -layout: page title: "Introduction" -group: getting-started -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Getting Started" permalink: /docs/ +root: true +order: 1 --- Get started with inuitcss. diff --git a/_docs/modifying-inuitcss.md b/_docs/00-getting-started/modifying-inuitcss.md similarity index 95% rename from _docs/modifying-inuitcss.md rename to _docs/00-getting-started/modifying-inuitcss.md index 22bc369..0fb0064 100644 --- a/_docs/modifying-inuitcss.md +++ b/_docs/00-getting-started/modifying-inuitcss.md @@ -1,10 +1,7 @@ --- -layout: page title: "Modifying inuitcss" -group: getting-started -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Getting Started" +order: 20 --- inuitcss is highly configurable, but **should not be edited directly**. The correct way to make changes to inuitcss is to pass in variables **before** you `@import` the specific file. diff --git a/_docs/reading-these-docs.md b/_docs/00-getting-started/reading-these-docs.md similarity index 83% rename from _docs/reading-these-docs.md rename to _docs/00-getting-started/reading-these-docs.md index 2d15022..f662d1d 100644 --- a/_docs/reading-these-docs.md +++ b/_docs/00-getting-started/reading-these-docs.md @@ -1,10 +1,7 @@ --- -layout: page title: "Reading These Docs" -group: getting-started -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Getting Started" +order: 40 --- Anything that is mandatory is written plainly, e.g.: diff --git a/_docs/setup.md b/_docs/00-getting-started/setup.md similarity index 97% rename from _docs/setup.md rename to _docs/00-getting-started/setup.md index b62f492..5d93552 100644 --- a/_docs/setup.md +++ b/_docs/00-getting-started/setup.md @@ -1,10 +1,7 @@ --- -layout: page title: "Setup" -group: getting-started -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Getting Started" +order: 5 --- Once you have got inuitcss into your project using one of the [methods outlined diff --git a/_docs/settings/core.md b/_docs/01-settings/core.md similarity index 96% rename from _docs/settings/core.md rename to _docs/01-settings/core.md index 9f5f6d9..b684ecd 100644 --- a/_docs/settings/core.md +++ b/_docs/01-settings/core.md @@ -1,13 +1,10 @@ --- -layout: page title: "Core" -group: settings -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Settings" filename: "_settings.core.scss" permalink: /docs/settings/core/ requirement: required +order: 1 --- {% include file-info.html %} diff --git a/_docs/tools/clearfix.md b/_docs/02-tools/clearfix.md similarity index 81% rename from _docs/tools/clearfix.md rename to _docs/02-tools/clearfix.md index 5737e29..a697bb1 100644 --- a/_docs/tools/clearfix.md +++ b/_docs/02-tools/clearfix.md @@ -1,12 +1,9 @@ --- -layout: page title: "Clearfix" -group: tools -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Tools" filename: "_tools.clearfix.scss" requirement: required +order: 1 --- {% include file-info.html %} diff --git a/_docs/tools/font-size.md b/_docs/02-tools/font-size.md similarity index 94% rename from _docs/tools/font-size.md rename to _docs/02-tools/font-size.md index cee9c62..f9206df 100644 --- a/_docs/tools/font-size.md +++ b/_docs/02-tools/font-size.md @@ -1,12 +1,9 @@ --- -layout: page title: "Font-size" -group: tools -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Tools" filename: "_tools.font-size.scss" requirement: required +order: 10 --- {% include file-info.html %} diff --git a/_docs/tools/hidden.md b/_docs/02-tools/hidden.md similarity index 71% rename from _docs/tools/hidden.md rename to _docs/02-tools/hidden.md index 022df4d..fb1166b 100644 --- a/_docs/tools/hidden.md +++ b/_docs/02-tools/hidden.md @@ -1,12 +1,9 @@ --- -layout: page title: "Hidden" -group: tools -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Tools" filename: "_tools.hidden.scss" requirement: required +order: 30 --- {% include file-info.html %} diff --git a/_docs/generic/box-sizing.md b/_docs/03-generic/box-sizing.md similarity index 81% rename from _docs/generic/box-sizing.md rename to _docs/03-generic/box-sizing.md index 1de6a1e..af0edf1 100644 --- a/_docs/generic/box-sizing.md +++ b/_docs/03-generic/box-sizing.md @@ -1,12 +1,9 @@ --- -layout: page title: "Box-sizing" -group: generic -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Generic" filename: "_generic.box-sizing.scss" requirement: required +order: 1 --- {% include file-info.html %} diff --git a/_docs/generic/normalize.md b/_docs/03-generic/normalize.md similarity index 69% rename from _docs/generic/normalize.md rename to _docs/03-generic/normalize.md index cd0a0f0..3e399a1 100644 --- a/_docs/generic/normalize.md +++ b/_docs/03-generic/normalize.md @@ -1,12 +1,9 @@ --- -layout: page title: "Normalize.css" -group: generic -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Generic" filename: "_generic.normalize.scss" requirement: recommended +order: 10 --- {% include file-info.html %} diff --git a/_docs/generic/reset.md b/_docs/03-generic/reset.md similarity index 67% rename from _docs/generic/reset.md rename to _docs/03-generic/reset.md index 9441ccc..766296d 100644 --- a/_docs/generic/reset.md +++ b/_docs/03-generic/reset.md @@ -1,12 +1,9 @@ --- -layout: page title: "Reset" -group: generic -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Generic" filename: "_generic.reset.scss" requirement: recommended +order: 20 --- {% include file-info.html %} diff --git a/_docs/generic/shared.md b/_docs/03-generic/shared.md similarity index 69% rename from _docs/generic/shared.md rename to _docs/03-generic/shared.md index b94e2e5..539c765 100644 --- a/_docs/generic/shared.md +++ b/_docs/03-generic/shared.md @@ -1,12 +1,9 @@ --- -layout: page title: "Shared" -group: generic -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Generic" filename: "_generic.shared.scss" requirement: recommended +order: 30 --- {% include file-info.html %} diff --git a/_docs/elements/headings.md b/_docs/04-elements/headings.md similarity index 84% rename from _docs/elements/headings.md rename to _docs/04-elements/headings.md index bf91952..bb4e477 100644 --- a/_docs/elements/headings.md +++ b/_docs/04-elements/headings.md @@ -1,12 +1,9 @@ --- -layout: page title: "Headings" -group: elements -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Elements" filename: "_elements.headings.scss" requirement: optional +order: 10 --- {% include file-info.html %} diff --git a/_docs/elements/images.md b/_docs/04-elements/images.md similarity index 87% rename from _docs/elements/images.md rename to _docs/04-elements/images.md index 0a22b68..92b6a39 100644 --- a/_docs/elements/images.md +++ b/_docs/04-elements/images.md @@ -1,12 +1,9 @@ --- -layout: page title: "Images" -group: elements -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Elements" filename: "_elements.images.scss" requirement: optional +order: 20 --- {% include file-info.html %} diff --git a/_docs/elements/page.md b/_docs/04-elements/page.md similarity index 79% rename from _docs/elements/page.md rename to _docs/04-elements/page.md index 4048dff..3ae57b3 100644 --- a/_docs/elements/page.md +++ b/_docs/04-elements/page.md @@ -1,12 +1,9 @@ --- -layout: page title: "Page" -group: elements -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Elements" filename: "_elements.page.scss" requirement: recommended +order: 1 --- {% include file-info.html %} diff --git a/_docs/elements/tables.md b/_docs/04-elements/tables.md similarity index 67% rename from _docs/elements/tables.md rename to _docs/04-elements/tables.md index b99cab4..a57d111 100644 --- a/_docs/elements/tables.md +++ b/_docs/04-elements/tables.md @@ -1,12 +1,9 @@ --- -layout: page title: "Tables" -group: elements -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Elements" filename: "_elements.tables.scss" requirement: optional +order: 40 --- {% include file-info.html %} diff --git a/_docs/05-objects/block.md b/_docs/05-objects/block.md new file mode 100644 index 0000000..e8056f9 --- /dev/null +++ b/_docs/05-objects/block.md @@ -0,0 +1,13 @@ +--- +title: "Block object" +group: "Objects" +filename: "_objects.block.scss" +requirement: optional +order: 30 +--- + +{% include file-info.html %} + +When you want to stack an image on top of a block of text, this object is what you need. + +{% include demo.html variant="block--small" %} diff --git a/_docs/05-objects/box.md b/_docs/05-objects/box.md new file mode 100644 index 0000000..41541d4 --- /dev/null +++ b/_docs/05-objects/box.md @@ -0,0 +1,9 @@ +--- +title: "Box object" +group: "Objects" +filename: "_objects.box.scss" +requirement: optional +order: 10 +--- + +{% include file-info.html %} diff --git a/_docs/05-objects/crop.md b/_docs/05-objects/crop.md new file mode 100644 index 0000000..d0f081c --- /dev/null +++ b/_docs/05-objects/crop.md @@ -0,0 +1,9 @@ +--- +title: "Crop object" +group: "Objects" +filename: "_objects.crop.scss" +requirement: optional +order: 50 +--- + +{% include file-info.html %} diff --git a/_docs/objects/flag.md b/_docs/05-objects/flag.md similarity index 65% rename from _docs/objects/flag.md rename to _docs/05-objects/flag.md index e03328c..d14e3db 100644 --- a/_docs/objects/flag.md +++ b/_docs/05-objects/flag.md @@ -1,30 +1,13 @@ --- -layout: page title: "Flag object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Objects" filename: "_objects.flag.scss" requirement: optional -demo: "flag" -classes: [ - "o-flag", - "o-flag--tiny", - "o-flag--small", - "o-flag--large", - "o-flag--huge", - "o-flag--flush", - "o-flag--reverse", - "o-flag--top", - "o-flag--bottom" -] +order: 7 --- {% include file-info.html %} -{% include class-list.html %} - The `flag` object module is an object similar in appearance to [the media object](https://github.com/inuitcss/objects.media), but which provides slightly more advanced functionality. @@ -45,5 +28,3 @@ Basic usage of the Flag object uses the required classes: The only valid children of the `.o-flag` node are `.o-flag__img` and `.o-flag__body`. - -{% include demo-iframe.html %} diff --git a/_docs/05-objects/layout.md b/_docs/05-objects/layout.md new file mode 100644 index 0000000..b3930db --- /dev/null +++ b/_docs/05-objects/layout.md @@ -0,0 +1,9 @@ +--- +title: "Layout object" +group: "Objects" +filename: "_objects.layout.scss" +requirement: optional +order: 1 +--- + +{% include file-info.html %} diff --git a/_docs/05-objects/list-bare.md b/_docs/05-objects/list-bare.md new file mode 100644 index 0000000..9d92707 --- /dev/null +++ b/_docs/05-objects/list-bare.md @@ -0,0 +1,9 @@ +--- +title: "List-bare object" +group: "Objects" +filename: "_objects.list-bare.scss" +requirement: optional +order: 3 +--- + +{% include file-info.html %} diff --git a/_docs/05-objects/list-inline.md b/_docs/05-objects/list-inline.md new file mode 100644 index 0000000..838d325 --- /dev/null +++ b/_docs/05-objects/list-inline.md @@ -0,0 +1,9 @@ +--- +title: "List-inline object" +group: "Objects" +filename: "_objects.list-inline.scss" +requirement: optional +order: 4 +--- + +{% include file-info.html %} diff --git a/_docs/objects/media.md b/_docs/05-objects/media.md similarity index 71% rename from _docs/objects/media.md rename to _docs/05-objects/media.md index 5a99c13..39464f7 100644 --- a/_docs/objects/media.md +++ b/_docs/05-objects/media.md @@ -1,22 +1,9 @@ --- -layout: page title: "Media object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Objects" filename: "_objects.media.scss" requirement: optional -demo: "media" -classes: [ - "o-media", - "o-media--tiny", - "o-media--small", - "o-media--large", - "o-media--huge", - "o-media--flush", - "o-media--reverse" -] +order: 6 --- [DEPENDENCIES?] @@ -25,8 +12,6 @@ classes: [ {% include file-info.html %} -{% include class-list.html %} - The Media object is inuitcss’ implementation of [Nicole Sullivan](https://twitter.com/stubbornella)’s media object—the poster child of OOCSS. To find out where it all started, read [Nicole’s blog @@ -46,5 +31,3 @@ Basic usage of the Media object uses the required classes: The only valid children of the `.o-media` node are `.o-media__img` and `.o-media__body`. - -{% include demo-iframe.html %} diff --git a/_docs/05-objects/pack.md b/_docs/05-objects/pack.md new file mode 100644 index 0000000..a78b470 --- /dev/null +++ b/_docs/05-objects/pack.md @@ -0,0 +1,9 @@ +--- +title: "Pack object" +group: "Objects" +filename: "_objects.pack.scss" +requirement: optional +order: 45 +--- + +{% include file-info.html %} diff --git a/_docs/05-objects/ratio.md b/_docs/05-objects/ratio.md new file mode 100644 index 0000000..fd738d8 --- /dev/null +++ b/_docs/05-objects/ratio.md @@ -0,0 +1,9 @@ +--- +title: "Ratio object" +group: "Objects" +filename: "_objects.ratio.scss" +requirement: optional +order: 51 +--- + +{% include file-info.html %} diff --git a/_docs/05-objects/tables.md b/_docs/05-objects/tables.md new file mode 100644 index 0000000..9cca967 --- /dev/null +++ b/_docs/05-objects/tables.md @@ -0,0 +1,9 @@ +--- +title: "Tables object" +group: "Objects" +filename: "_objects.tables.scss" +requirement: optional +order: 60 +--- + +{% include file-info.html %} diff --git a/_docs/05-objects/wrapper.md b/_docs/05-objects/wrapper.md new file mode 100644 index 0000000..46743cb --- /dev/null +++ b/_docs/05-objects/wrapper.md @@ -0,0 +1,9 @@ +--- +title: "Wrapper object" +group: "Objects" +filename: "_objects.wrapper.scss" +requirement: optional +order: 2 +--- + +{% include file-info.html %} diff --git a/_docs/06-components/example.md b/_docs/06-components/example.md new file mode 100644 index 0000000..3ad4d8f --- /dev/null +++ b/_docs/06-components/example.md @@ -0,0 +1,8 @@ +--- +title: "Example" +group: "Components" +filename: "_example.components.buttons.scss" +order: 1 +--- + +{% include file-info.html %} diff --git a/_docs/07-utilities/clearfix.md b/_docs/07-utilities/clearfix.md new file mode 100644 index 0000000..708dbe4 --- /dev/null +++ b/_docs/07-utilities/clearfix.md @@ -0,0 +1,9 @@ +--- +title: "Clearfix" +group: "Utilities" +filename: "_utilities.clearfix.scss" +requirement: optional +order: 30 +--- + +{% include file-info.html %} diff --git a/_docs/07-utilities/headings.md b/_docs/07-utilities/headings.md new file mode 100644 index 0000000..5edc882 --- /dev/null +++ b/_docs/07-utilities/headings.md @@ -0,0 +1,9 @@ +--- +title: "Headings" +group: "Utilities" +filename: "_utilities.headings.scss" +requirement: optional +order: 10 +--- + +{% include file-info.html %} diff --git a/_docs/07-utilities/hide.md b/_docs/07-utilities/hide.md new file mode 100644 index 0000000..526838c --- /dev/null +++ b/_docs/07-utilities/hide.md @@ -0,0 +1,9 @@ +--- +title: "Hide" +group: "Utilities" +filename: "_utilities.hide.scss" +requirement: optional +order: 40 +--- + +{% include file-info.html %} diff --git a/_docs/utilities/print.md b/_docs/07-utilities/print.md similarity index 53% rename from _docs/utilities/print.md rename to _docs/07-utilities/print.md index a6ca6f9..19f29d2 100644 --- a/_docs/utilities/print.md +++ b/_docs/07-utilities/print.md @@ -1,12 +1,9 @@ --- -layout: page title: "Print" -group: utilities -page-class: c-page--docs -has-sub-content: true -sub-content: docs +group: "Utilities" filename: "_utilities.print.scss" requirement: optional +order: 50 --- {% include file-info.html %} diff --git a/_docs/07-utilities/spacing.md b/_docs/07-utilities/spacing.md new file mode 100644 index 0000000..306771a --- /dev/null +++ b/_docs/07-utilities/spacing.md @@ -0,0 +1,9 @@ +--- +title: "Spacing" +group: "Utilities" +filename: "_utilities.spacing.scss" +requirement: optional +order: 5 +--- + +{% include file-info.html %} diff --git a/_docs/07-utilities/widths.md b/_docs/07-utilities/widths.md new file mode 100644 index 0000000..f8e9add --- /dev/null +++ b/_docs/07-utilities/widths.md @@ -0,0 +1,9 @@ +--- +title: "Widths" +group: "Utilities" +filename: "_utilities.widths.scss" +requirement: optional +order: 1 +--- + +{% include file-info.html %} diff --git a/_docs/components/example.md b/_docs/components/example.md deleted file mode 100644 index eb9070b..0000000 --- a/_docs/components/example.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: page -title: "Example" -group: components -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_example.components.buttons.scss" -demo: "components.example" ---- - -{% include file-info.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/components/index.md b/_docs/components/index.md deleted file mode 100644 index 5b62b23..0000000 --- a/_docs/components/index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: page -title: "Components" -group: components -page-class: c-page--docs -has-sub-content: true -sub-content: docs -permalink: /docs/components/ ---- - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum -reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, -quidem illo non id laboriosam, eum recusandae assumenda repellat autem. -Suscipit. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum -beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, -aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat -ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis -quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit -ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime -consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, -iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem -mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus -vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur -deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi -consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet -eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque -perspiciatis vero tempore molestiae possimus recusandae reprehenderit error -alias. diff --git a/_docs/objects/block.md b/_docs/objects/block.md deleted file mode 100644 index e538e96..0000000 --- a/_docs/objects/block.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: page -title: "Block object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.block.scss" -requirement: optional -demo: "block" -classes: [ - "o-block", - "o-block--tiny", - "o-block--small", - "o-block--large", - "o-block--huge", - "o-block--flush", - "o-block--right", - "o-block--left" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/box.md b/_docs/objects/box.md deleted file mode 100644 index d348a2c..0000000 --- a/_docs/objects/box.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: page -title: "Box object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.box.scss" -requirement: optional -demo: "box" -classes: [ - "o-box", - "o-box--tiny", - "o-box--small", - "o-box--large", - "o-box--huge", - "o-box--flush" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/crop.md b/_docs/objects/crop.md deleted file mode 100644 index ed89eae..0000000 --- a/_docs/objects/crop.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: page -title: "Crop object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.crop.scss" -requirement: optional -demo: "crop" -classes: [ - "o-crop", - "o-crop--2:1", - "o-crop--4:3", - "o-crop--16:9", - "o-crop__content--right", - "o-crop__content--bottom", - "o-crop__content--center" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/index.md b/_docs/objects/index.md deleted file mode 100644 index a6136eb..0000000 --- a/_docs/objects/index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: page -title: "Objects" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -permalink: /docs/objects/ ---- - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum -reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, -quidem illo non id laboriosam, eum recusandae assumenda repellat autem. -Suscipit. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum -beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, -aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat -ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis -quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit -ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime -consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, -iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem -mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus -vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur -deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi -consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet -eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque -perspiciatis vero tempore molestiae possimus recusandae reprehenderit error -alias. diff --git a/_docs/objects/layout.md b/_docs/objects/layout.md deleted file mode 100644 index feabd6f..0000000 --- a/_docs/objects/layout.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: page -title: "Layout object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.layout.scss" -requirement: optional -demo: "layout" -classes: [ - "o-layout", - "o-layout--tiny", - "o-layout--small", - "o-layout--large", - "o-layout--huge", - "o-layout--flush" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/list-bare.md b/_docs/objects/list-bare.md deleted file mode 100644 index 9762aa0..0000000 --- a/_docs/objects/list-bare.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: page -title: "List-bare object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.list-bare.scss" -requirement: optional -demo: "list-bare" -classes: [ - "o-list-bare" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/list-inline.md b/_docs/objects/list-inline.md deleted file mode 100644 index ad1ae77..0000000 --- a/_docs/objects/list-inline.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: page -title: "List-inline object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.list-inline.scss" -requirement: optional -demo: "list-inline" -classes: [ - "o-list-inline", - "o-list-inline--delimited" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/pack.md b/_docs/objects/pack.md deleted file mode 100644 index 20e8a97..0000000 --- a/_docs/objects/pack.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: page -title: "Pack object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.pack.scss" -requirement: optional -demo: "pack" -classes: [ - "o-pack", - "o-pack--tiny", - "o-pack--small", - "o-pack--large", - "o-pack--huge", - "o-pack--auto", - "o-pack--middle", - "o-pack--bottom", - "o-pack--rev" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/ratio.md b/_docs/objects/ratio.md deleted file mode 100644 index 3021980..0000000 --- a/_docs/objects/ratio.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: page -title: "Ratio object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.ratio.scss" -requirement: optional -demo: "ratio" -classes: [ - "o-ratio", - "o-ratio--2:1", - "o-ratio--4:3", - "o-ratio--16:9" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/tables.md b/_docs/objects/tables.md deleted file mode 100644 index afcef35..0000000 --- a/_docs/objects/tables.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: page -title: "Tables object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.tables.scss" -requirement: optional -demo: "tables" -classes: [ - "o-table", - "o-table--tiny", - "o-table--small", - "o-table--large", - "o-table--huge", - "o-table--fixed" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/objects/wrapper.md b/_docs/objects/wrapper.md deleted file mode 100644 index 0243433..0000000 --- a/_docs/objects/wrapper.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: page -title: "Wrapper object" -group: objects -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_objects.wrapper.scss" -requirement: optional -demo: "wrapper" -classes: [ - "o-wrapper", - "o-wrapper--tiny", - "o-wrapper--small", - "o-wrapper--large", - "o-wrapper--huge" -] ---- - -{% include file-info.html %} - -{% include class-list.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/utilities/clearfix.md b/_docs/utilities/clearfix.md deleted file mode 100644 index c3b0286..0000000 --- a/_docs/utilities/clearfix.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: page -title: "Clearfix" -group: utilities -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_utilities.clearfix.scss" -requirement: optional -demo: "clearfix" ---- - -{% include file-info.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/utilities/headings.md b/_docs/utilities/headings.md deleted file mode 100644 index b35324d..0000000 --- a/_docs/utilities/headings.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: page -title: "Headings" -group: utilities -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_utilities.headings.scss" -requirement: optional -demo: "headings" ---- - -{% include file-info.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/utilities/hide.md b/_docs/utilities/hide.md deleted file mode 100644 index 5727598..0000000 --- a/_docs/utilities/hide.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: page -title: "Hide" -group: utilities -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_utilities.hide.scss" -requirement: optional -demo: "hide" ---- - -{% include file-info.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/utilities/index.md b/_docs/utilities/index.md deleted file mode 100644 index 551aabf..0000000 --- a/_docs/utilities/index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: page -title: "Utilities" -group: utilities -page-class: c-page--docs -has-sub-content: true -sub-content: docs -permalink: /docs/utilities/ ---- - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum -reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, -quidem illo non id laboriosam, eum recusandae assumenda repellat autem. -Suscipit. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum -beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, -aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat -ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis -quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit -ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime -consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, -iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem -mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus -vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur -deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi -consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet -eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque -perspiciatis vero tempore molestiae possimus recusandae reprehenderit error -alias. diff --git a/_docs/utilities/spacing.md b/_docs/utilities/spacing.md deleted file mode 100644 index 84f30a3..0000000 --- a/_docs/utilities/spacing.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: page -title: "Spacing" -group: utilities -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_utilities.spacing.scss" -requirement: optional -demo: "spacing" ---- - -{% include file-info.html %} - - - -{% include demo-iframe.html %} diff --git a/_docs/utilities/widths.md b/_docs/utilities/widths.md deleted file mode 100644 index d8a7c3d..0000000 --- a/_docs/utilities/widths.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: page -title: "Widths" -group: utilities -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_utilities.widths.scss" -requirement: optional -demo: "widths" ---- - -{% include file-info.html %} - - - -{% include demo-iframe.html %} diff --git a/_includes/class-list.html b/_includes/class-list.html deleted file mode 100644 index e20003e..0000000 --- a/_includes/class-list.html +++ /dev/null @@ -1,6 +0,0 @@ -

Available classes:

- diff --git a/_includes/demo-iframe.html b/_includes/demo-iframe.html deleted file mode 100644 index 512cb7a..0000000 --- a/_includes/demo-iframe.html +++ /dev/null @@ -1,2 +0,0 @@ -

Demo

- diff --git a/_includes/demo.html b/_includes/demo.html new file mode 100644 index 0000000..8e6b4c3 --- /dev/null +++ b/_includes/demo.html @@ -0,0 +1,10 @@ +

{{ include.variant }}

+ + + +{% assign patterns = site.demo | where: "handle", include.variant %} +{% for demo in patterns %} +
+ {% highlight html %}{{ demo.content }}{% endhighlight %} +
+{% endfor %} diff --git a/_includes/footer.html b/_includes/footer.html index 9a3c030..9462a39 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,5 +1,4 @@ -