Skip to content

Commit

Permalink
Add sidebar pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
matheusps committed May 23, 2020
1 parent 5727d2c commit b3ce1f9
Show file tree
Hide file tree
Showing 14 changed files with 329 additions and 28 deletions.
16 changes: 5 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
## Raw CSS
## 🍣 Raw CSS

This is an npm package, but the build is created with deno.
⚠️raw.css is currently under development and will not be production-ready any time soon (maybe never will).

#### Running with deno
### Development

```
deno run --unstable --allow-read --allow-write build.ts
```

#### Running with denon
```
denon start
```
- `yarn release`: Pulbish a new version
- `yarn build`: Put css files together
13 changes: 7 additions & 6 deletions build.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
const fs = require('fs')

const files = [
'./src/root.css',
'./src/general.css',
'./src/typo.css',
'./src/form.css',
'./src/media.css',
'./src/misc.css',
'./src/native/root.css',
'./src/native/general.css',
'./src/native/typo.css',
'./src/native/form.css',
'./src/native/media.css',
'./src/native/misc.css',
'./src/patterns/sidebar.css',
]

process.stdout.write("🔥Putting files together \n")
Expand Down
20 changes: 18 additions & 2 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,29 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../raw.css">
<title>🍣 raw.css docs</title>
</head>

<body>
<button>Button</button>
<button disabled>Disabled Button</button>
<div class="pattern__sidebar">
<div>
<aside>
<form>
<input type="text" aria-label="Search" />
<button type="submit">Search</button>
</form>
<button>Button</button>
<button disabled>Disabled Button</button>
</aside>
<main>
<h1>🍣 Raw.css </h1>
</main>
</div>
</div>
</body>

</html>
9 changes: 9 additions & 0 deletions nodemon.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"execMap": {
"css": "yarn build"
},
"watch": [
"src/"
],
"ext": "js,json,css"
}
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@
"scripts": {
"prepublish": "yarn build",
"release": "np",
"build": "node build.js"
"build": "node build.js",
"dev": "nodemon build"
},
"devDependencies": {
"nodemon": "^2.0.4",
"np": "^6.2.3"
},
"bugs": {
Expand Down
57 changes: 54 additions & 3 deletions raw.css
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,30 @@

--focus-outline: 0 0 0 0.1rem var(--color-shadow-outline);
--active-outline: 0 0 0 1rem var(--color-shadow-outline);

--spacing-none: 0;
--spacing-xs: .25rem;
--spacing-sm: .5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
--spacing-xxl: 8rem;
--spacing-xxxl: 16rem;
}

html {
font-family: var(--font-family-sans);
font-size: 1rem;
line-height: 1.5;
margin: 0;
padding: 0;
}

body {
background-color: var(--color-base);
color: var(--color-on-base);
margin: 0;
padding: 0;
}

*,
Expand Down Expand Up @@ -90,8 +103,6 @@ textarea {
background-color: var(--color-surface);
}



textarea {
resize: vertical;
}
Expand All @@ -114,7 +125,6 @@ input {
color: var(--color-on-surface);
background-image: none;
font-size: 1rem;
transition: all 0.3s
}

input:active,
Expand All @@ -141,6 +151,10 @@ button:focus {
box-shadow: var(--focus-outline);
}

label {
cursor: pointer;
}

img,
svg,
video,
Expand Down Expand Up @@ -182,4 +196,41 @@ code,
kbd,
samp {
font-family: var(--font-family-mono);
}

/** raw.css sidebar pattern **/

:root {
--pattern-sidebar--gutter: 3ch;
--pattern-sidebar--aside-width: 30ch;
--pattern-sidebar--content-width: 55%;
--pattern-sidebar--height: 100vh;
}

/** layout **/
.pattern__sidebar {
overflow: hidden;
height: var(--pattern-sidebar--height);
}

/** container **/
.pattern__sidebar > * {
display: flex;
flex-wrap: wrap;
margin: calc(var(--pattern-sidebar--gutter) / 2 * -1);
height: calc(100% + var(--pattern-sidebar--gutter));
}

/** both aside and main **/
.pattern__sidebar > * > aside, main {
margin: calc(var(--pattern-sidebar--gutter) / 2);
flex-basis: var(--pattern-sidebar--aside-width);
flex-grow: 1;
}

/** main **/
.pattern__sidebar > * > main {
flex-basis: 0;
flex-grow: 999;
min-width: calc(var(--pattern-sidebar--content-width) - var(--pattern-sidebar--gutter));
}
7 changes: 4 additions & 3 deletions src/form.css → src/native/form.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ textarea {
background-color: var(--color-surface);
}



textarea {
resize: vertical;
}
Expand All @@ -36,7 +34,6 @@ input {
color: var(--color-on-surface);
background-image: none;
font-size: 1rem;
transition: all 0.3s
}

input:active,
Expand All @@ -61,4 +58,8 @@ input:focus,
button:focus {
outline: none;
box-shadow: var(--focus-outline);
}

label {
cursor: pointer;
}
4 changes: 4 additions & 0 deletions src/general.css → src/native/general.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ html {
font-family: var(--font-family-sans);
font-size: 1rem;
line-height: 1.5;
margin: 0;
padding: 0;
}

body {
background-color: var(--color-base);
color: var(--color-on-base);
margin: 0;
padding: 0;
}

*,
Expand Down
File renamed without changes.
File renamed without changes.
9 changes: 9 additions & 0 deletions src/root.css → src/native/root.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,13 @@

--focus-outline: 0 0 0 0.1rem var(--color-shadow-outline);
--active-outline: 0 0 0 1rem var(--color-shadow-outline);

--spacing-none: 0;
--spacing-xs: .25rem;
--spacing-sm: .5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
--spacing-xxl: 8rem;
--spacing-xxxl: 16rem;
}
File renamed without changes.
36 changes: 36 additions & 0 deletions src/patterns/sidebar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/** raw.css sidebar pattern **/

:root {
--pattern-sidebar--gutter: 3ch;
--pattern-sidebar--aside-width: 30ch;
--pattern-sidebar--content-width: 55%;
--pattern-sidebar--height: 100vh;
}

/** layout **/
.pattern__sidebar {
overflow: hidden;
height: var(--pattern-sidebar--height);
}

/** container **/
.pattern__sidebar > * {
display: flex;
flex-wrap: wrap;
margin: calc(var(--pattern-sidebar--gutter) / 2 * -1);
height: calc(100% + var(--pattern-sidebar--gutter));
}

/** both aside and main **/
.pattern__sidebar > * > aside, main {
margin: calc(var(--pattern-sidebar--gutter) / 2);
flex-basis: var(--pattern-sidebar--aside-width);
flex-grow: 1;
}

/** main **/
.pattern__sidebar > * > main {
flex-basis: 0;
flex-grow: 999;
min-width: calc(var(--pattern-sidebar--content-width) - var(--pattern-sidebar--gutter));
}
Loading

0 comments on commit b3ce1f9

Please sign in to comment.