Skip to content

Latest commit

 

History

History
260 lines (251 loc) · 14.6 KB

TODO.md

File metadata and controls

260 lines (251 loc) · 14.6 KB
Raw

TODO for Teutonic CSS

  • BG hover classes only the hover state is defined?
  • BG hover classes to make things lighter not darker?
  • Fix tooltips to the right, why? and other direction to aligned center!
  • IDEA: text color classes (for all colors and hover)
  • IDEA: Border radius sizes for nested objects?
  • IDEA: Linear Scale based on one size to multiply
  • Bring back laptop breakpoint
  • Reconsider .color-bg-2 classes they are kinda confusing (warn classes not predictable)
  • Loop over colormap revering for _inverted
  • Add two more colors to each color scale for less hustle juggling the colors.
  • Idea Button/Nav-Group with border radius first last-child
  • Make colors available as SCSS vars as well (for SVG backgrounds and such) - already done, not possible for SVG still
  • Use https://github.com/davidkpiano/sass-svg to inline SVGs from file?
  • Refactor inprogress in loading with background image
  • A grid system that will auto-distribute boxes equally (media-queries?)
  • Table rows with border-radius ??? will not work likely?!
  • Full focus style support for background-color (error, warning classes, hover etc)
  • Search input without wrapper element (background-image) to play nice with form-box
  • Tooltip with different positions
  • Consider Accent color support: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
  • Multiple sizes form box-box
  • Fix .select https://github.com/filamentgroup/select-css icon, maybe hand drawn chevron?
  • Use math.div instead of slash for calculations in SASS (see below)
  • Use aspect-ratio: 4/3;
  • .boxi.active state quick fix
  • Rethink .active in general some more ( not so verbose )
  • Rethink no gap group for outline less styles
  • Select triangle, checkbox and radio in prime color (finish)
  • Re-design Select triangle
  • Accept --border-color on form elements
  • Accept --border-color for boxes and some buttons (no border?)
  • Fix the issue with too l arge grid parents
  • Fix .gap_s with .column not to interfere with columns!
  • Make link (a) accept "--color" var, fallback to other value
  • Review .link in .inverted
  • CSS grid justify/align classes https://alligator.io/css/align-justify/
  • Remove Flexbox redundant flex-basis classes (can be done with grid)
  • 2nd accent color for focused and maybe active elements also rename prime maybe (primary, accent)?
  • Rethink or remove ghost button when not borders
  • passive Box = .box, Interactive Box = .boxi
  • .box = background color (no outline by default)
  • Have basic kbd styles
  • Implement and try new gap classes (Flexbox, CSS Columns, CSS Grid)
  • Optional .visited class
  • Remove the need to half Flexbox kinda fixed layouts
  • Remove the no-wrap & introduce the wrap class

Slash division deprecated

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($thumb-size, 2) More info and automated migrator: https://sass-lang.com/d/slash-div

IDEAS

  • Post an issue on the nested flexbox grid issues (wrap)
  • Fix span width issues, with content in multi lines.
  • Triangle positioning classes?
  • Rethink Triangle VS inverted
  • Flex-grow helper classes!
  • Loop over color maps everywhere
  • Separated tinted and tinted background as two files
  • Transitions & Delays (Manuel) … http://tachyons.io/docs/themes/hovers/ ???
  • Predefined Cool Gradients (Manuel) > https://webgradients.com/, https://gradients.cssgears.com/
  • Redo and rethink Modular Scale for spacing / Manuel…
  • Check if the min css is really min
  • Naming vars: dash instead of lodash for sizes? .gap_xl > .gap-xl
  • All SCSS vars in one file?
  • Separate invert color generation to make that a bit more clear
  • fine tune .range alignment across browser (in .range-box)
  • Better Checkboxes for MS Edge with ::-ms-check ?
  • Make it slimmer: Throw out unused classes!
  • Light border style > less strong border everywhere! (searchbox top)
  • Better mobile screen styles, normalize
  • pa-xl-t < responsive padding classes
  • Find a way to make read-widths calculated and less dependent (no magic numbers please!)
  • Use Flex justify-self when supported with browsers
  • ?? unify customization methods > like: .bo-px.bo-custom
  • ?? pre: Use CSS Var and fallback here so that can be easier applied and will apply to childs (like buttons)
  • ?? delete CSS VAR examples that can be done with standard CSS as well
  • ?? fallback CSS Vars for each class and value (see borders)
  • ?? pre > .pre ?! (like > button > .button) ??? (mind article) .pre > BG-color!
  • Make other border color elements available. like with light weight search bar.
  • Rename SCSS files with better naming conventions
  • Extend classical columns usage for wrapped content (boxy elements wrap)!
  • A new complete and good Charts system (81% is already there!)
  • Do something cool with :focus-within https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
  • Search wrapper less magic numbers
  • Replace SCSS with PostCSS
  • Integrate CSS ENV vars, once available.
  • rethink less borderish styles? (like columns & tables, but for forms?)
  • Use color-mod / color functions, redo colors! https://drafts.csswg.org/css-color-4/
  • "fixed" width and height modifier classes also for grids and flexes?!
  • line-height helper? or more vertical rhythm with bigger text?
  • Column reset to one column, buggy webkit !
  • .span-4 default in CSS grid. More useful?!
  • Make "Components" available? > Define what is and what is not a Component!
  • .preabled button class instead of disabled?!
  • "CSS Color Module Level 4" and less css-color vars!
  • Rethink themes: What really needs to be done?! Provide ready-made themes?
  • Make default gap for flex available, rethink one more time?
  • reconsider .teutonic to house VARS? is :root plugable enough?
  • Simple geometric subtle backgrounds? like striped, but better & more!
  • Consider repsonsive margin helpers? like with padding...
  • Position Utility classes (see below)
  • Own .active file with extends, maybe?
  • HSL pseudo color functions like: https://codepen.io/simurai/pen/RxxzoG/?editors=0100
  • Consider a styled fieldset
  • Generalize generic gravatar, make colors available everywhere! (media)
  • .block style to make all inline block?
  • .inline style to make all block elements inline-block, autoish?
  • font awesome support?
  • EXCLUDE half, third … classes from flexbox?!
  • Sketch Library like: https://github.com/joachimesque/Bulma.sketch
  • .read-widths based on calc (x times rem), grow when changing sizes.
  • Columns: automatic class where number of cols = counter? https://www.webdesignerdepot.com/2013/05/learn-to-count-with-css/
  • ?? .article : vertical rhythm line height VS margin-top
  • ?? Columns: separate spacing for column gap and child gaps?!
  • Attribute notation for code block syntax title?! https://www.w3.org/TR/css3-values/#attr-notation

Done (lately)

  • Skip Gulp totally in favor of Webpack or something else (NPM run scripts)
  • ".span-y-2" classes for CSS grid
  • Fix table border color when invert > see text sizes < no overwrites!
  • Rethink line-height > see text sizes
  • Establish GitHub Release
  • Divide _columns.scss in multiple files.
  • Include min + gzip in built and as file
  • ??? Refactor: .labelinput > .input (remove the last one?)
  • Enhanced color matrix > each color in 5 shades.
  • Cross browser testing!
  • Prepare Range Issue for MS Edge
  • Refactor anim for progress intermediate
  • Prepare Padding Issue for MS Edge
  • MS Edge: fix meter element (kindof)
  • MS Edge: fix progress element (mostly)
  • MS Edge: Fix input type range (mostly)
  • ??? MS Edge: margin-top code examples
  • Rethink and redo spacing without modular scale to make it work in MS Edge > also more preditable
  • Separate the scaling stuff from each other
  • Rename old files > _--old-{lalala}
  • MS Edge: table M padding fix!
  • .block > not 100% width?!
  • MS Edge: quick fix padding (WTF: explicit paddings in all directions)
  • iOS: loading example broken < disabled for now
  • Bouncy scrolling inline scrollable containers (Momentum Scrolling)
  • Position sticky with vendor prefixes
  • Fine tune shades, only two per direction?!
  • iOS: fix credit card example
  • iOS: fix checkbox and radio styles?
  • ?? Column bugs in combi w flexbox > breaks out of cols (workaround > label-box) < where?
  • "span-1-p" doesn't work?" doesn't have to
  • .button.block < is that the best way to do it?
  • realize: display helper class: di-b, di-i, di-ib, di-if ………
  • realize: border-color-classes? < looks ugly + confusion with tinted!
  • Tooltip higher z-index
  • more flexible form-box > respect different paddings!
  • ghost button ?!
  • Hoverable bgs? SB
  • inputs > no padding right for more text? clip by border, not by padding < no, buggy
  • Table "caption"? < Too obscure
  • Clean up graphs/charts: Horizontal & Vertical + SB Too much work for now, do later
  • rethink coloring modes: active VS bg-main-5 VS inverted > test with zebra
  • row-list sucks?! should accept paddings? how? < no more row-list
  • .span-all for columns?! (not span-2) ?
  • Enhanced table styles (see below)
  • .article headlines > less line-height.
  • .text-select-all (make work on inputs??). < not working on most browser
  • .collapse-p doesn't work for columns
  • Rethink default gap for grid (with horizontal & vertical gaps)!
  • Column gap border styles
  • column-with instead of column count? < doesn't have min-max
  • Rethink columns with horizontal gap only?! < now with extra class for that.
  • box min-height VS box with pa_xs < make use of padding var?
  • Column gap VS general gaps?!
  • Header Nav colors check, dark prime against dark ui
  • rename: .text-link > .link
  • inverted: visited links less visible?!
  • hairline instead of pixel? doesn't work
  • REdo flex-box helpers!? (column and auto stuff)
  • Redo theming for progress & meter
  • Notifications for real?
  • Rethink select triangle, at least with CSS var
  • Color picker CSS https://stackoverflow.com/a/44081389/1449386
  • Negative margin issues with CSS columns in Safari …
  • .untouchable > typography generalized
  • media containers refactor to make more flexible
  • make buttons accept a parental text class? http://localhost:4000/examples/utilities#background-states
  • Use @extends or mixin for row-list and other parts to make utilities work!
  • search.search ??? some defaults? magnifier! with parental
  • Where else to expose settings as (local) CSS Vars?
  • Use currentColor (inherit, initial) when possible
  • form font sizes overwrites!? .text-l #wtf tryout
  • CSS: "inverted" > styles for all!
  • Rethink separation of background colors and text/border (bring back states?)
  • WIP: Get rid of autoprefixer for now! only SASS as a dependency!
  • .cover not working as expected?
  • .ov-h overflow hidden utility!
  • form errors! (with demo)
  • Chrome footer nav bugs > real-wrld, css grid (nach breakpoints Ok 5 > auto-height, auto-grid), …?
  • Decide: will it need an extra class? input[type="color"].color
  • Redo fallback VARS like: var(--border-color, var(--color-main-5))
  • ~~Default list style type? after .row-list is gone?~
  • Padding via CSS vars and default
  • Rethink starts with [^=] as this only works when that's the first class!
  • Visual: Show Z-grid flow in gap (more v-space)?
  • Modular Scale as SCCS version, test both in parallel!
  • Input range Slider SCSS styling!
  • Gather and unite rgba values in vars! disabled, skeuo?, placeholder?!
  • static background colors: .bg-main-1 ………
  • Box min-height problem with absoulte positioned search?! and?
  • .media container + .ar figure.media > img (auto-size) << more easy!
  • "colored" images mix mit blend mode
  • --colored-5 against --border-color?! how to make this work? WIP: border = good!
  • Tweak disabled
  • General size class?! hhmm
  • bo-t-custom, how?
  • Unify utility class names!
  • mini-info focus extra class (with demo)
  • better form errors, rethink states https://codepen.io/jonschlinkert/pen/jGbXJJ
  • Firefox overflow bugs!
  • mini-info permanent extra classes for hover and focus
  • Make select themable. Use a CSS triangle http://jsfiddle.net/NDJ3S/17/ currenColor?
  • Textcolor classes! (also better form errros)
  • Text selection in text input fields, better colors!
  • Reconsider SVG, maybe throw out!
  • Stand alone gap classes? stack
  • disabled button is more clicky.... for pre-validation
  • Get rid of --border-color as border can inherit form color value?
  • Default columns with margin as well?!
  • .label-box > .form-box ??
  • redo CSS columns stuff
  • rethink colored with more then one color: outline VS button BG, prime.button:hover
  • ~~Include Burger button? SVG? like close button?~
  • Redo search cancel button
  • label.box > label.label ???
  • Active & Interactive: Radio & Checkboxes (to be tested)(disabled?)
  • do close button (with SVG ?) < use text
  • .button > block element in forms and rows?!
  • rethink wrapper! and flex helpers H-space, V-space …!
  • emment style short syntax! https://docs.emmet.io/cheat-sheet/ > bgc, mt, pt, bxsh, bdl+, ta:r https://github.com/LukeAskew/css-utils#spacing
  • Inline-block VS button in grid-f (needs .block?!)
  • Delete button > https://bulma.io/documentation/elements/delete/
  • Include SVG patterns? http://buseca.github.io/patternbolt/ http://lea.verou.me/css3patterns/#
  • Media: Video-thumbnails with play button (triangle)
  • .article : EM based for small large small ?!
  • size: width containers + height containers?
  • main-colors as bg-colors?!
  • Flex helpers for reverse, inline-flex, justify content...
  • Refactor Flex aligment helpers
  • Real world cards last item span-auto: no effect.