Placeholder for ideas on what to build for a documentation site

• https://adam-marsden.co.uk/css-cheat-sheet
• https://mustard-ui.com/
• https://shoelace.style/docs/installing.html
• http://tedconf.github.io/shed-css/index.html

Should margins, padding, border, transforms be changed from p- | m- | b- | t- => pad-t- | mar-t- | border-t- | trans-t-| for beginner readability. This would be a breaking change.

In the recent article, I published: https://medium.freecodecamp.org/learn-this-one-weird-trick-to-debug-css-88529aa5a6a3 I talked about a global CSS debugger. Another method of using this, however, is scoped to an element and its children. E.g.

.debug *:not(path):not(g) {
	color:                    hsla(210, 100%, 100%, 0.9) !important;
	background:               hsla(210, 100%,  50%, 0.5) !important;
	outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;

	box-shadow: none !important;
}

The difference here is that now whatever is classed as .debug so will it and its children expose the debugger, which could also be customized using CSS variables (such as color).

Eg. Tabs lack variables that can be uniquely reassigned
https://github.com/atav1k/fortune/blob/e0099beb0774353138870f61f6754ad6ca4b2822/src/tab.css#L8-L9

Proposal for mix-blend-mode utility classes, ideal since it is a one line spec, eg. https://alligator.io/css/exploring-blend-modes/

Reports of browser incompatibility on &.isFull

You can make your package compartmentalized, sort of similar to Bulma (but this was specified in Sass, not in the URL), in making the source specifiable via a query.

E.g. fortune.css?all.css or fortune.css?helpers.css so the emphasis is on what do I need versus not need––not give me the whole thing. This is similar to how jQuery had a light version.

This is also brilliant for teaching how to use Fortune in steps; start with some subset of the package and then work up to the whole thing.

Proposal to change spacing classes to a singular class .marX with modifier isSpace allowing for a more memorable spacing utility. Early explorations ran into limitations with destructiveness in children which required swapping css variables & resetting children.

:root {
  --gap-1: 2rem;
  --gap-2: 4rem;
}

.isSpace {
  --space-1: 4rem;
  --space-2: 6rem;
}

.isSpace * {
  --space-1: initial;
  --space-2: initial;
}

.mar1 {
  margin: var(--space-1, var(--gap-1));
}

.mar2 {
  margin: var(--space-2, var(--gap-2));
}

Setting @media to rem with a :root font-size causes some browsers to recursively bug

Considering that there are a world of interesting postcss packages, eg. https://github.com/seaneking/rucksack, explore a few lab.css utility classes like .responsive that uses them along with build functions.

Given Bulma and Bootstrap are opposites on the spectrum in terms of naming conventions, why not make fortune have a longhand and shorthand counterpart, one being semantically optimized for prototyping (shorthand) and one being semantically optimized for maintainability (longhand). I can't say I'm a fan of m- and p- classes for margin and padding but I can see the benefit.

E.g. bkg and background available in fortune.shorthand.css and fortune.longhand.css

Reading through linters & curious how valuable csslint would be on this project, see https://github.com/lazd/gulp-csslint

For now, given the lack of documentation, I think it would be great to link your CodePen snippets e.g. https://codepen.io/atav1k/pen/VxKBxW to show developers what the value of this repo is.

What can we learn from css-blocks.com about fortune handling jsx?

HSLA offers some native advantages, namely lighten/darken & alpha.
https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/

Replace postcss-cssnext with postcss-preset-env
https://moox.io/blog/deprecating-cssnext/

Since there's only support for mobileish, suggesting adding h-sm-1 across dimensions & maybe positioning?

Currently the spacing system is not particularly memorable or spannable from small to extra large, eg. https://github.com/atav1k/fortune/blob/531da3c285ba4cdfb762fa44893f94af234b2728/src/variables.css#L3-L15

What are alternatives to solving spacing in a human readable way?

Watch for components breaking utilities by specifying height. Could also make button sizes unnecessary if font & padding can be overridden.

https://github.com/atav1k/fortune/blob/531da3c285ba4cdfb762fa44893f94af234b2728/src/button.css#L16

Extend transform patterns to match useful patterns from animate.css

Placeholder for exploring how these new css specifications work together. Initial thoughts are that multi-col can be used within flex-col or grid, but typically a layout would use flex-col or grid. Ideally, all layouts would inherit the same variables, eg. gutter.

See: https://medium.com/@patrickbrosset/css-grid-css-multi-columns-7664f59bb60c & https://alligator.io/css/multi-column-layouts/

Magic columns from https://github.com/jenil/chota/blob/master/src/_grid.css lacks column offset & reordering. Other functions like push & pull are likely moot given css grids.

I'm wondering if you could exploit CSS variables to make the reset used itself specifiable.

E.g. --reset: var(--normalize); etc.

Given it can be opinionated, this could be really exciting!

Nav assumes to be an element but is actually a top nav implementation. Possibly extend to add an 'isAside'?

If you've ever looked at the official implementation for the Go standard library, one interesting decision the Go team advocates for is inline documentation, that is documenting the nature of the code so that is can be learnable in its context. See for example here: https://golang.org/src/text/template/parse/parse.go?s=6091:6230#L218

I recommend doing the same for the start of repeating classes, e.g. class-1, class-2, ... so that users don't require further documentation.

relevant source: https://github.com/atav1k/fortune/blob/master/src/chip.css#L23

add new variable, default to --link-color

Add .col.px-4 nudges col below on medium viewports.

Address navigation dependencies with shift to col or add container class.
https://github.com/atav1k/fortune/blob/9714a86e3f698a7a57113193d80b2bbf3c802f65/src/nav.css#L11-L12

Looking at mustard specs, we could include:

• Breadcrumb
• Card
• Dropdown
• Pagination
• Modal
• Progress
• Stepper
• Tooltip
• Media

When using a viewport scroll monitor how can you direct variables values, eg. button-bg-color to either transition change or with button-padding-y through incremental values.

http://themes.carbondesignsystem.com/
^^ this site is super cool. i really like the export css vars functionality

gonna hack on something similar to carbon site for fortune this weekend fyi

@atav1k can you link the site you showed me that provided a way to edit vars?

Positioning needs a nudge class for gap spaces. Suggesting gt-1 & using margins going from 0-12px.

i've found myself writing <div style="max-width: XXpx" /> a couple times today. might be useful to include this util

consider https://devhints.io/bootstrap rather than a custom docs page?

https://devhints.io/es6 is pretty good with links to the js spec

Placeholder for mobile conversations, eg. how to handle @custom-media --breakpoint & --heading-font

Current assembly is container > row > col but could be simplified to two layers row > col, see https://github.com/jgthms/bulma/blob/master/sass/grid/columns.sass