More Scaffold and first layouts
This commit is contained in:
parent
fab49a09fb
commit
232c869d43
127
.gitignore
vendored
Normal file
127
.gitignore
vendored
Normal file
@ -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
|
||||
46
components/00_Global/_alignment.scss
Normal file
46
components/00_Global/_alignment.scss
Normal file
@ -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;
|
||||
|
||||
}
|
||||
1
components/00_Global/_global.scss
Normal file
1
components/00_Global/_global.scss
Normal file
@ -0,0 +1 @@
|
||||
@import './alignment';
|
||||
3
components/01_Layouts/_layouts.scss
Normal file
3
components/01_Layouts/_layouts.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'flexRow/flexRow';
|
||||
@import 'flexGrid/flexGrid';
|
||||
@import 'contentCrop/contentCrop';
|
||||
41
components/01_Layouts/contentCrop/_contentCrop.scss
Normal file
41
components/01_Layouts/contentCrop/_contentCrop.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
{}
|
||||
52
components/01_Layouts/contentCrop/contentCrop.hbs
Normal file
52
components/01_Layouts/contentCrop/contentCrop.hbs
Normal file
@ -0,0 +1,52 @@
|
||||
<h2>Square</h2>
|
||||
<div class="square RV-ContentCrop__Container">
|
||||
<img src="https://chaos.social/system/cache/media_attachments/files/104/671/839/925/195/715/original/e4f70d2ece69c688.png?1598017940"/>
|
||||
</div>
|
||||
|
||||
<div class="square RV-ContentCrop__Container">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="square RV-ContentCrop__Container">
|
||||
<div class="portrait red"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Landscape</h2>
|
||||
<div class="landscape RV-ContentCrop__Container">
|
||||
<img src="https://chaos.social/system/cache/media_attachments/files/104/671/839/925/195/715/original/e4f70d2ece69c688.png?1598017940"/>
|
||||
</div>
|
||||
|
||||
<div class="landscape RV-ContentCrop__Container">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="landscape RV-ContentCrop__Container">
|
||||
<div class="portrait red"></div>
|
||||
</div>
|
||||
|
||||
<h2>Portrait</h2>
|
||||
<div class="portrait RV-ContentCrop__Container">
|
||||
<img src="https://chaos.social/system/cache/media_attachments/files/104/671/839/925/195/715/original/e4f70d2ece69c688.png?1598017940"/>
|
||||
</div>
|
||||
|
||||
<div class="portrait RV-ContentCrop__Container">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="portrait RV-ContentCrop__Container">
|
||||
<div class="landscape red"></div>
|
||||
</div>
|
||||
|
||||
<h2>Full width</h2>
|
||||
<div class="full-width RV-ContentCrop__Container">
|
||||
<img src="https://chaos.social/system/cache/media_attachments/files/104/671/839/925/195/715/original/e4f70d2ece69c688.png?1598017940"/>
|
||||
</div>
|
||||
|
||||
<div class="ull-width RV-ContentCrop__Container">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="full-width RV-ContentCrop__Container">
|
||||
<div class="portrait red"></div>
|
||||
</div>
|
||||
20
components/01_Layouts/flexGrid/_flexGrid.scss
Normal file
20
components/01_Layouts/flexGrid/_flexGrid.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
1
components/01_Layouts/flexGrid/flexGrid.config.json
Normal file
1
components/01_Layouts/flexGrid/flexGrid.config.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
31
components/01_Layouts/flexGrid/flexGrid.hbs
Normal file
31
components/01_Layouts/flexGrid/flexGrid.hbs
Normal file
@ -0,0 +1,31 @@
|
||||
<div class="RV-FlexGrid__Container">
|
||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
||||
<div class="green RV-FlexGrid__Item">some</div>
|
||||
<div class="red RV-FlexGrid__Item">totally</div>
|
||||
<div class="green RV-FlexGrid__Item">awesome</div>
|
||||
<div class="red RV-FlexGrid__Item">content</div>
|
||||
<div class="green RV-FlexGrid__Item">for</div>
|
||||
<div class="red RV-FlexGrid__Item">you</div>
|
||||
<div class="green RV-FlexGrid__Item">only</div>
|
||||
<div class="red RV-FlexGrid__Item">for</div>
|
||||
<div class="green RV-FlexGrid__Item">you</div>
|
||||
<div class="red RV-FlexGrid__Item">to</div>
|
||||
<div class="green RV-FlexGrid__Item">enjoy</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--sameHeight">
|
||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
||||
<div class="green RV-FlexGrid__Item">some</div>
|
||||
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div>
|
||||
<div class="green RV-FlexGrid__Item RV-FlexGrid__Item--center">awesome</div>
|
||||
<div class="red RV-FlexGrid__Item">content</div>
|
||||
<div class="green RV-FlexGrid__Item">for</div>
|
||||
<div class="red RV-FlexGrid__Item">you <br>(im sneaking in some height)</div>
|
||||
<div class="green RV-FlexGrid__Item">only</div>
|
||||
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--fixedSize">fixed for</div>
|
||||
<div class="green RV-FlexGrid__Item">you</div>
|
||||
<div class="red RV-FlexGrid__Item">to</div>
|
||||
<div class="green RV-FlexGrid__Item">enjoy</div>
|
||||
</div>
|
||||
22
components/01_Layouts/flexRow/_flexRow.scss
Normal file
22
components/01_Layouts/flexRow/_flexRow.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
1
components/01_Layouts/flexRow/flexRow.config.json
Normal file
1
components/01_Layouts/flexRow/flexRow.config.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
12
components/01_Layouts/flexRow/flexRow.hbs
Normal file
12
components/01_Layouts/flexRow/flexRow.hbs
Normal file
@ -0,0 +1,12 @@
|
||||
<div class="RV-FlexRow__Container">
|
||||
<div class="red RV-FlexRow__Item">Im normal</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--left"><span>wrapped content left</span></div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
|
||||
</div>
|
||||
<br></br>
|
||||
<div class="RV-FlexRow__Container">
|
||||
<div class="red RV-FlexRow__Item">Im normal</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div>
|
||||
</div>
|
||||
2
components/_components.scss
Normal file
2
components/_components.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import '00_Global/global';
|
||||
@import '01_Layouts/layouts';
|
||||
41
components/_preview.hbs
Normal file
41
components/_preview.hbs
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="{{ path '/rcss.css' }}">
|
||||
<title>Preview</title>
|
||||
|
||||
<style>
|
||||
.red{
|
||||
background-color: firebrick;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: forestgreen;
|
||||
}
|
||||
|
||||
.square {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.portrait {
|
||||
height: 320px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.landscape {
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{{ yield }}}
|
||||
</body>
|
||||
</html>
|
||||
3
components/pink.css
Normal file
3
components/pink.css
Normal file
@ -0,0 +1,3 @@
|
||||
.pink {
|
||||
background-color: pink;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@import './components';
|
||||
@import './pink.css';
|
||||
@ -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",
|
||||
|
||||
88
public/rcss.css
Normal file
88
public/rcss.css
Normal file
@ -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; }
|
||||
Loading…
Reference in New Issue
Block a user