From 232c869d432f8f27979e9005d4d773497528eba1 Mon Sep 17 00:00:00 2001 From: reverend Date: Fri, 21 Aug 2020 16:50:22 +0200 Subject: [PATCH] More Scaffold and first layouts --- .gitignore | 127 ++++++++++++++++++ components/00_Global/_alignment.scss | 46 +++++++ components/00_Global/_global.scss | 1 + components/00_Layouts/_components.scss | 0 components/01_Layouts/_layouts.scss | 3 + .../01_Layouts/contentCrop/_contentCrop.scss | 41 ++++++ .../contentCrop/contentCrop.config.json | 1 + .../01_Layouts/contentCrop/contentCrop.hbs | 52 +++++++ components/01_Layouts/flexGrid/_flexGrid.scss | 20 +++ .../01_Layouts/flexGrid/flexGrid.config.json | 1 + components/01_Layouts/flexGrid/flexGrid.hbs | 31 +++++ components/01_Layouts/flexRow/_flexRow.scss | 22 +++ .../01_Layouts/flexRow/flexRow.config.json | 1 + components/01_Layouts/flexRow/flexRow.hbs | 12 ++ components/_components.scss | 2 + components/_preview.hbs | 41 ++++++ components/pink.css | 3 + components/rcss.scss | 2 + package.json | 2 +- public/rcss.css | 88 ++++++++++++ 20 files changed, 495 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 components/00_Global/_alignment.scss create mode 100644 components/00_Global/_global.scss delete mode 100644 components/00_Layouts/_components.scss create mode 100644 components/01_Layouts/_layouts.scss create mode 100644 components/01_Layouts/contentCrop/_contentCrop.scss create mode 100644 components/01_Layouts/contentCrop/contentCrop.config.json create mode 100644 components/01_Layouts/contentCrop/contentCrop.hbs create mode 100644 components/01_Layouts/flexGrid/_flexGrid.scss create mode 100644 components/01_Layouts/flexGrid/flexGrid.config.json create mode 100644 components/01_Layouts/flexGrid/flexGrid.hbs create mode 100644 components/01_Layouts/flexRow/_flexRow.scss create mode 100644 components/01_Layouts/flexRow/flexRow.config.json create mode 100644 components/01_Layouts/flexRow/flexRow.hbs create mode 100644 components/_components.scss create mode 100644 components/_preview.hbs create mode 100644 components/pink.css create mode 100644 public/rcss.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..46b45c7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,127 @@ + +# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,node +# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,node + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +package-lock.json + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# Next.js build output +.next + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +### VisualStudioCode ### +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +*.code-workspace + +### VisualStudioCode Patch ### +# Ignore all local history of files +.history + +# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,node diff --git a/components/00_Global/_alignment.scss b/components/00_Global/_alignment.scss new file mode 100644 index 0000000..963bb38 --- /dev/null +++ b/components/00_Global/_alignment.scss @@ -0,0 +1,46 @@ +@mixin align-content { + * { + text-align: unset; + display: flex; + flex-direction: row; + } + + &--fixedSize { + flex: 0 0; + width: min-content; + } + + &--center { + text-align: center; + + * { + justify-content: center; + } + } + + &--left { + text-align: left; + + * { + justify-content: flex-start; + } + } + + &--right { + text-align: right; + + * { + justify-content: flex-end; + } + } +} + +@mixin reset { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + +} \ No newline at end of file diff --git a/components/00_Global/_global.scss b/components/00_Global/_global.scss new file mode 100644 index 0000000..9921564 --- /dev/null +++ b/components/00_Global/_global.scss @@ -0,0 +1 @@ +@import './alignment'; \ No newline at end of file diff --git a/components/00_Layouts/_components.scss b/components/00_Layouts/_components.scss deleted file mode 100644 index e69de29..0000000 diff --git a/components/01_Layouts/_layouts.scss b/components/01_Layouts/_layouts.scss new file mode 100644 index 0000000..3a7067c --- /dev/null +++ b/components/01_Layouts/_layouts.scss @@ -0,0 +1,3 @@ +@import 'flexRow/flexRow'; +@import 'flexGrid/flexGrid'; +@import 'contentCrop/contentCrop'; \ No newline at end of file diff --git a/components/01_Layouts/contentCrop/_contentCrop.scss b/components/01_Layouts/contentCrop/_contentCrop.scss new file mode 100644 index 0000000..054a8ae --- /dev/null +++ b/components/01_Layouts/contentCrop/_contentCrop.scss @@ -0,0 +1,41 @@ +RV-ContentCrop{ + &,* { + overflow: hidden; + word-break: break-all; + } + + img { + width: inherit; + height: inherit; + object-fit: cover; + object-position: center; + } + + &--left { + img { + object-position: left; + } + } + + &--right { + img { + object-position: right; + } + } + + &--top { + img { + object-position: top; + } + } + + &--bottom { + img { + object-position: bottom; + } + } +} + +.RV-ContentCrop__Container { + @extend RV-ContentCrop; +} \ No newline at end of file diff --git a/components/01_Layouts/contentCrop/contentCrop.config.json b/components/01_Layouts/contentCrop/contentCrop.config.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/components/01_Layouts/contentCrop/contentCrop.config.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/components/01_Layouts/contentCrop/contentCrop.hbs b/components/01_Layouts/contentCrop/contentCrop.hbs new file mode 100644 index 0000000..6661a46 --- /dev/null +++ b/components/01_Layouts/contentCrop/contentCrop.hbs @@ -0,0 +1,52 @@ +

Square

+
+ +
+ +
+

You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+
+ +
+
+
+ + +

Landscape

+
+ +
+ +
+

You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+
+ +
+
+
+ +

Portrait

+
+ +
+ +
+

You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+
+ +
+
+
+ +

Full width

+
+ +
+ +
+

You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

+
+ +
+
+
\ No newline at end of file diff --git a/components/01_Layouts/flexGrid/_flexGrid.scss b/components/01_Layouts/flexGrid/_flexGrid.scss new file mode 100644 index 0000000..0ff81b1 --- /dev/null +++ b/components/01_Layouts/flexGrid/_flexGrid.scss @@ -0,0 +1,20 @@ +RV-FlexGrid{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + + &--sameHeight { + grid-auto-rows: 1fr; + } + + &--spacing { + gap: 10px; + } +} + +.RV-FlexGrid__Container { + @extend RV-FlexGrid; + + .RV-FlexGrid__Item { + @include align-content; + } +} diff --git a/components/01_Layouts/flexGrid/flexGrid.config.json b/components/01_Layouts/flexGrid/flexGrid.config.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/components/01_Layouts/flexGrid/flexGrid.config.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/components/01_Layouts/flexGrid/flexGrid.hbs b/components/01_Layouts/flexGrid/flexGrid.hbs new file mode 100644 index 0000000..df6718b --- /dev/null +++ b/components/01_Layouts/flexGrid/flexGrid.hbs @@ -0,0 +1,31 @@ +
+
Heres
+
some
+
totally
+
awesome
+
content
+
for
+
you
+
only
+
for
+
you
+
to
+
enjoy
+
+ +

+ +
+
Heres
+
some
+
totally (right)
+
awesome
+
content
+
for
+
you
(im sneaking in some height)
+
only
+
fixed for
+
you
+
to
+
enjoy
+
diff --git a/components/01_Layouts/flexRow/_flexRow.scss b/components/01_Layouts/flexRow/_flexRow.scss new file mode 100644 index 0000000..b8a2f72 --- /dev/null +++ b/components/01_Layouts/flexRow/_flexRow.scss @@ -0,0 +1,22 @@ +RV-FlexRow { + display: flex; + flex-direction: row; + gap: 10px; + justify-content: space-around; + + &--wrap { + flex-wrap: wrap; + } + + * { + width: 100%; + } +} + +.RV-FlexRow__Container { + @extend RV-FlexRow; + + .RV-FlexRow__Item { + @include align-content; + } +} \ No newline at end of file diff --git a/components/01_Layouts/flexRow/flexRow.config.json b/components/01_Layouts/flexRow/flexRow.config.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/components/01_Layouts/flexRow/flexRow.config.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/components/01_Layouts/flexRow/flexRow.hbs b/components/01_Layouts/flexRow/flexRow.hbs new file mode 100644 index 0000000..673bb38 --- /dev/null +++ b/components/01_Layouts/flexRow/flexRow.hbs @@ -0,0 +1,12 @@ +
+
Im normal
+
Right
+
Center
+
wrapped content left
+
Fixed
+
+

+
+
Im normal
+
Right
+
\ No newline at end of file diff --git a/components/_components.scss b/components/_components.scss new file mode 100644 index 0000000..eaed768 --- /dev/null +++ b/components/_components.scss @@ -0,0 +1,2 @@ +@import '00_Global/global'; +@import '01_Layouts/layouts'; \ No newline at end of file diff --git a/components/_preview.hbs b/components/_preview.hbs new file mode 100644 index 0000000..188594e --- /dev/null +++ b/components/_preview.hbs @@ -0,0 +1,41 @@ + + + + + + Preview + + + + + {{{ yield }}} + + \ No newline at end of file diff --git a/components/pink.css b/components/pink.css new file mode 100644 index 0000000..4b0a043 --- /dev/null +++ b/components/pink.css @@ -0,0 +1,3 @@ +.pink { + background-color: pink; +} \ No newline at end of file diff --git a/components/rcss.scss b/components/rcss.scss index e69de29..8de0204 100644 --- a/components/rcss.scss +++ b/components/rcss.scss @@ -0,0 +1,2 @@ +@import './components'; +@import './pink.css'; \ No newline at end of file diff --git a/package.json b/package.json index 552f61a..caec8ef 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "Lostplaces", "version": "0.1.0", - "dependencies": { + "devDependencies": { "@frctl/fractal": "^1.2.1", "fractal": "0.0.3", "node-sass": "^4.14.1", diff --git a/public/rcss.css b/public/rcss.css new file mode 100644 index 0000000..316f11c --- /dev/null +++ b/public/rcss.css @@ -0,0 +1,88 @@ +@import url(./pink.css); +RV-FlexRow, .RV-FlexRow__Container { + display: flex; + flex-direction: row; + gap: 10px; + justify-content: space-around; } + RV-FlexRow--wrap { + flex-wrap: wrap; } + RV-FlexRow *, .RV-FlexRow__Container * { + width: 100%; } + +.RV-FlexRow__Container .RV-FlexRow__Item * { + text-align: unset; + display: flex; + flex-direction: row; } + +.RV-FlexRow__Container .RV-FlexRow__Item--fixedSize { + flex: 0 0; + width: min-content; } + +.RV-FlexRow__Container .RV-FlexRow__Item--center { + text-align: center; } + .RV-FlexRow__Container .RV-FlexRow__Item--center * { + justify-content: center; } + +.RV-FlexRow__Container .RV-FlexRow__Item--left { + text-align: left; } + .RV-FlexRow__Container .RV-FlexRow__Item--left * { + justify-content: flex-start; } + +.RV-FlexRow__Container .RV-FlexRow__Item--right { + text-align: right; } + .RV-FlexRow__Container .RV-FlexRow__Item--right * { + justify-content: flex-end; } + +RV-FlexGrid, .RV-FlexGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } + RV-FlexGrid--sameHeight { + grid-auto-rows: 1fr; } + RV-FlexGrid--spacing { + gap: 10px; } + +.RV-FlexGrid__Container .RV-FlexGrid__Item * { + text-align: unset; + display: flex; + flex-direction: row; } + +.RV-FlexGrid__Container .RV-FlexGrid__Item--fixedSize { + flex: 0 0; + width: min-content; } + +.RV-FlexGrid__Container .RV-FlexGrid__Item--center { + text-align: center; } + .RV-FlexGrid__Container .RV-FlexGrid__Item--center * { + justify-content: center; } + +.RV-FlexGrid__Container .RV-FlexGrid__Item--left { + text-align: left; } + .RV-FlexGrid__Container .RV-FlexGrid__Item--left * { + justify-content: flex-start; } + +.RV-FlexGrid__Container .RV-FlexGrid__Item--right { + text-align: right; } + .RV-FlexGrid__Container .RV-FlexGrid__Item--right * { + justify-content: flex-end; } + +RV-ContentCrop, .RV-ContentCrop__Container, RV-ContentCrop *, .RV-ContentCrop__Container * { + overflow: hidden; + word-break: break-all; } + +RV-ContentCrop img, .RV-ContentCrop__Container img { + width: inherit; + height: inherit; + object-fit: cover; + object-position: center; } + +RV-ContentCrop--left img { + object-position: left; } + +RV-ContentCrop--right img { + object-position: right; } + +RV-ContentCrop--top img { + object-position: top; } + +RV-ContentCrop--bottom img { + object-position: bottom; }