Skip to content

Commit

Permalink
LAST LEGACY CODE; new naming and separation
Browse files Browse the repository at this point in the history
  • Loading branch information
lunelson committed Jan 18, 2019
1 parent 7e65f90 commit 1ec40cf
Show file tree
Hide file tree
Showing 51 changed files with 287 additions and 16,774 deletions.
11 changes: 6 additions & 5 deletions _index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ $homework-is-modern: true !default;
@import "scss/u-misc";

@import "scss/basis-core";
@import "scss/basis-font";
@import "scss/basis-typo";
@import "scss/basis-grid";
@import "scss/basis-theme";

Expand All @@ -30,14 +30,15 @@ $homework-is-modern: true !default;
@import "scss/reset";

@import "scss/setup-core";
@import "scss/setup-wrap";
@import "scss/setup-frame";
@import "scss/setup-page";
@import "scss/setup-stack";
@import "scss/setup-font";
@import "scss/setup-flow";
@import "scss/setup-grid";
@import "scss/setup-cell";
@import "scss/setup-typo";
@import "scss/setup-atomic";
@import "scss/setup-helper";
@import "scss/setup-theme";
@import "scss/setup-state";
@import "scss/setup-debug";

@import "scss/setup";
20 changes: 10 additions & 10 deletions assets/TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,20 @@ stack
homework/
reset
[element].reset -- element specific resets
setup-modern-core (implicit)
setup-core (implicit)
(m), :root
setup-modern-page (explicit)
setup-page (explicit)
wrap, peel, frame, bleed,
setup-modern-stack (implicit)
setup-stack (implicit)
stack, plain, chain, (shim)
setup-modern-grid (implicit)
setup-grid (implicit)
grid, flow, cols, rows
setup-modern-cell (explicit)
setup-cell (explicit)
span, push, pull, col, row
setup-modern-typo (implicit)
setup-typo (implicit)
f, trim
`.caps` (and `.smcp`) co-class(es) for `.f-` classes, with different spacing
setup-modern-atomic (explicit)
setup-atomic (explicit)
m+, p+, w, h, minh, maxh, minw, maxw
NB: add w-viewport, h-viewport
d, z (00-90)
Expand All @@ -45,7 +45,7 @@ homework/
op -- (opacity) 00,02,04,06,08,10
* replace fit with obj: .obj-contain /-cover /-fill /-none /-scale-down /-bottom /-center /-left /-left-bottom /-left-top /-right /-right-bottom /-right-top /-top
(scroll-[auto|touch]) -- should maybe just be in reset
setup-modern-helper (static||explicit)
setup-helper (static||explicit)
(optional) clearfix, flt-left/-right/-none, clr-left/-right/-none
skip -- see https://medium.freecodecamp.org/how-to-design-website-layouts-for-screen-readers-347b7b06e9cc
clip, over-[auto|scroll|hidden|visible], clip-[x|y], over-[x|y]-[auto|scroll|hidden|visible]
Expand All @@ -58,7 +58,7 @@ homework/
resize -- x|y|none|both
cursor -- pointer|default
select -- none, auto, text
setup-modern-theme
setup-theme
$colors, $patterns, $weights, $radii, $shadows, $outlines
theme-[color]
c-, bgc-, bdc- ,fill- ,stroke-
Expand All @@ -80,7 +80,7 @@ homework/
none/0
-ol-
sm, md, lg
setup-modern-state
setup-state
.hover__
.focus__
.active__
Expand Down
2 changes: 1 addition & 1 deletion scss/_basis-core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ $media-defaults: (
////////////////// private //////////////////
/////////////////////////////////////////////

@mixin --medium-properties($medium) {
@mixin --output-medium-props($medium) {
@each $key, $val in $medium {
@if not index('list' 'map', type-of($val)) {
--#{$key}: #{$val};
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
11 changes: 11 additions & 0 deletions scss/_setup-atomic.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@
// | (_| | || (_) | | | | | | | (__
// \__,_|\__\___/|_| |_| |_|_|\___|

// m+, p+, w, h, minh, maxh, minw, maxw
// NB: add w-viewport, h-viewport
// d, z (00-90)
// rel, fix, abs, show, hide, vhide, vshow
// ? fs- italic, normal
// ? fw- bold, bolder, light, etc. normal
// a, ac, as, jc, ai, flex, fit
// op -- (opacity) 00,02,04,06,08,10
// * replace fit with obj: .obj-contain /-cover /-fill /-none /-scale-down /-bottom /-center /-left /-left-bottom /-left-top /-right /-right-bottom /-right-top /-top
// (scroll-[auto|touch]) -- should maybe just be in reset

@mixin homework-setup-atomic($modern: $homework-is-modern) {

// join with null, to also output suffix-less class
Expand Down
8 changes: 8 additions & 0 deletions scss/_setup-cell.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// _ _
// | | |
// ___ ___| | |
// / __/ _ \ | |
// | (_| __/ | |
// \___\___|_|_|

// span, push, pull, col, row
23 changes: 13 additions & 10 deletions scss/_setup-core.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
// _
// | |
// ___ ___ _ __ ___ ______ ___ ___| |_ _ _ _ __
// / __/ _ \| '__/ _ \______/ __|/ _ \ __| | | | '_ \
// | (_| (_) | | | __/ \__ \ __/ |_| |_| | |_) |
// \___\___/|_| \___| |___/\___|\__|\__,_| .__/
// | |
// |_|
// ___ ___ _ __ ___
// / __/ _ \| '__/ _ \
// | (_| (_) | | | __/
// \___\___/|_| \___|

// (m), :root -- implicitly responsive


@mixin homework-setup-root($modern: $homework-is-modern, $trim: true, $output: true) {
Expand All @@ -19,7 +16,7 @@

@if $modern {
:root {
@include --medium-properties($root);
@include --output-medium-props($root);
--inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left)));
}
html {
Expand All @@ -46,11 +43,17 @@
$media: map-merge($media, ($m: $outgoing-medium)) !global;

@if $output {

// TODO for wrap/peel
// :root
// --outer-width-#{$m}: ?
// --inner-width-#{$m}: ?

@media #{--query-string(map-get($incoming-medium, 'breakpoint'))} {

@if $modern {
:root {
@include --medium-properties($incoming-medium);
@include --output-medium-props($incoming-medium);
--outer-width: #{map-get($outgoing-medium, 'outer-width')};
}
} @else {
Expand Down
24 changes: 11 additions & 13 deletions scss/_setup-flow.scss → scss/_setup-grid.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
// __ _ _____ _ _ _
// / _| | / __ \ | | | | (_)
// | |_| | _____ __`' / /' | |_ ___ ___| |_ _ _ __ __ _
// | _| |/ _ \ \ /\ / / / / | __/ _ \/ __| __| | '_ \ / _` |
// | | | | (_) \ V V / ./ /___ | || __/\__ \ |_| | | | | (_| |
// |_| |_|\___/ \_/\_/ \_____/ \__\___||___/\__|_|_| |_|\__, |
// __/ |
// |___/
// _ _
// (_) | |
// __ _ _ __ _ __| |
// / _` | '__| |/ _` |
// | (_| | | | | (_| |
// \__, |_| |_|\__,_|
// __/ |
// |___/


/////////////////////////////////////////////
//////////////// SETUP MIXIN ////////////////
/////////////////////////////////////////////
// grid, flow, cols, rows

// TODO / THINK
// - replace --col-base, --row-base with --col-count, --row-count
// - reconsider grid-template-rows value for 'grid' base class?

@mixin homework-setup-flow($max-columns: max-columns(), $row-classes: false) {

@mixin homework-setup-grid($max-columns: max-columns(), $row-classes: false) {

*, *:before, *:after {
--push-l: initial;
Expand Down
30 changes: 22 additions & 8 deletions scss/_setup-helper.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
// _ _ _
// | | | | | |
// | |__ ___| |_ __ ___ _ __ ______ ___ ___| |_ _ _ _ __
// | '_ \ / _ \ | '_ \ / _ \ '__|______/ __|/ _ \ __| | | | '_ \
// | | | | __/ | |_) | __/ | \__ \ __/ |_| |_| | |_) |
// |_| |_|\___|_| .__/ \___|_| |___/\___|\__|\__,_| .__/
// | | | |
// |_| |_|
// _ _
// | | | |
// | |__ ___| |_ __ ___ _ __
// | '_ \ / _ \ | '_ \ / _ \ '__|
// | | | | __/ | |_) | __/ |
// |_| |_|\___|_| .__/ \___|_|
// | |
// |_|

// (optional) clearfix, flt-left/-right/-none, clr-left/-right/-none
// skip -- see https://medium.freecodecamp.org/how-to-design-website-layouts-for-screen-readers-347b7b06e9cc
// clip, over-[auto|scroll|hidden|visible], clip-[x|y], over-[x|y]-[auto|scroll|hidden|visible]
// trim, trap, stop,
// fade (opacity)
// pill (border-radius: 50vmin)
// truncate, break, ws (white-space)
// aspect
// pe (pointer-events)
// resize -- x|y|none|both
// cursor -- pointer|default
// select -- none, auto, text


@mixin homework-setup-helper($modern: $homework-is-modern) {

Expand Down
125 changes: 125 additions & 0 deletions scss/_setup-page.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
// _ __ __ _ __ _ ___
// | '_ \ / _` |/ _` |/ _ \
// | |_) | (_| | (_| | __/
// | .__/ \__,_|\__, |\___|
// | | __/ |
// |_| |___/

// wrap, peel, frame, bleed -- explicit/implicit

// TODO
// - output --outer-width-[m] (and --inner-width-[m]) properties in core
// - classes should be
// wrap-m / wrap-last,
// [m__]wrap-each


@mixin homework-setup-page($modern: $homework-is-modern) {

$last-m: last(media-keys());

/////////////////////////////////////////////
//////////////////// wrap ///////////////////
/////////////////////////////////////////////

:root { --wrap-width: 100%; }

@each $m in join((null), media-keys()) {
@include m($m) {

#{m-base-class('wrap')} {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: if($modern, var(--wrap-width), 100%);
}

$m__: m-prefix();

.#{$m__}wrap-left { margin-left: 0; }
.#{$m__}wrap-right { margin-right: 0; }
// .#{$m__}wrap-each { --wrap-width: var(--outer-width); }

.#{$m__}wrap, #{if($m, '.wrap-#{$m}', '')}, #{if($m == $last-m, '.wrap-last', '')} {
--wrap-width: var(--outer-width);
}
}
}

/////////////////////////////////////////////
//////////////////// peel ///////////////////
/////////////////////////////////////////////

// .peel {
// margin-right: 0;
// margin-left: 0;
// max-width: none;
// width: 100vw;
// }

// @include mm-for('outer-right', 'outer-left') {

// $outer-right: m-var('outer-right');
// $outer-left: m-var('outer-left');
// $wrap-offset: subtract($outer-right, $outer-left);
// $peel-margin: subtract(100%, 100vw);
// $peel-margin-right: divide(subtract($peel-margin, $wrap-offset), 2);
// $peel-margin-left: divide(add($peel-margin, $wrap-offset), 2);

// .peel {
// &--right { width: add(100vw, $peel-margin-left);}
// &--left { width: add(100vw, $peel-margin-right);}
// &, &--right { margin-right: $peel-margin-right; }
// &, &--left { margin-left: $peel-margin-left; }
// }

// .peel--from-right {
// &, &.peel--right { margin-right: - $outer-right;}
// &, &.peel--left { margin-left: add($peel-margin, $outer-right); }
// &.peel--right {
// width: add(100%, $outer-right);
// margin-left: 0;
// }
// &.peel--left {
// width: subtract(100vw, $outer-right);
// margin-right: 0;
// }
// }

// .peel--from-left {
// &, &.peel--right { margin-right: add($peel-margin, $outer-left); }
// &, &.peel--left { margin-left: - $outer-left; }
// &.peel--right {
// width: subtract(100vw, $outer-left);
// margin-left: 0;
// }
// &.peel--left {
// width: add(100%, $outer-left);
// margin-right: 0;
// }
// }
// }

/////////////////////////////////////////////
//////////////// frame/bleed ////////////////
/////////////////////////////////////////////

@each $m in join((null), map-keys($media)) {
@include m($m) {

$m__: m-prefix();

#{m-base-class('bleed')} { width: unset !important; }

.#{$m__}frame, .#{$m__}frame-x, .#{$m__}frame-right { padding-right: var(--outer-right); }
.#{$m__}frame, .#{$m__}frame-x, .#{$m__}frame-left { padding-left: var(--outer-left); }
.#{$m__}frame-y, .#{$m__}frame-top { padding-top: var(--outer-top); }
.#{$m__}frame-y, .#{$m__}frame-bottom { padding-bottom: var(--outer-bottom); }

.#{$m__}bleed, .#{$m__}bleed-x, .#{$m__}bleed-right { margin-right: calc(var(--outer-right) * -1); }
.#{$m__}bleed, .#{$m__}bleed-x, .#{$m__}bleed-left { margin-left: calc(var(--outer-left) * -1); }
.#{$m__}bleed-y, .#{$m__}bleed-top { margin-top: calc(var(--outer-top) * -1); }
.#{$m__}bleed-y, .#{$m__}bleed-bottom { margin-bottom: calc(var(--outer-bottom) * -1); }
}
}
}
15 changes: 8 additions & 7 deletions scss/_setup-stack.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
// _ _ __ _ _
// | | | | / / | | (_)
// ___| |_ __ _ ___| | __ / / ___| |__ __ _ _ _ __
// / __| __/ _` |/ __| |/ / / / / __| '_ \ / _` | | '_ \
// \__ \ || (_| | (__| < / / | (__| | | | (_| | | | | |
// |___/\__\__,_|\___|_|\_\ /_/ \___|_| |_|\__,_|_|_| |_|

// _ _
// | | | |
// ___| |_ __ _ ___| | __
// / __| __/ _` |/ __| |/ /
// \__ \ || (_| | (__| <
// |___/\__\__,_|\___|_|\_\

// stack, plain, chain, (shim) -- implicitly responsive

// @mixin stack($modern: $homework-is-modern) {
// display: flex;
Expand Down
19 changes: 19 additions & 0 deletions scss/_setup-state.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// _ _
// | | | |
// ___| |_ __ _| |_ ___
// / __| __/ _` | __/ _ \
// \__ \ || (_| | || __/
// |___/\__\__,_|\__\___|

// .hover__
// .focus__
// .active__
// .gr-hover__
// .group-hover__ (requires group)
// .focus-in__
// .focus-within__


@mixin homework-setup-state() {

}
Loading

0 comments on commit 1ec40cf

Please sign in to comment.