update

README.md

@@ -8,6 +8,9 @@ Simple CSS framework.
 
 ## TODO
 
+* test postcss mixins
+* eslint, stylelint
+* package.json for webpack or parcel (and sass or postcss)
 * documentation
 	- .text-component
 	- visibility.css - make notes on classes with `\:` in the selectors

src/postcss/mixins.js

@@ -3,7 +3,7 @@ const toHSL = require('hex-to-hsl');
 
 const postcssMixins = {
 
-  // untested TODO - test
+  // TODO - untest
   defineHSL(mixin, name, hue, sat, light) {
     const obj = {};
       obj[name] = name;
@@ -22,6 +22,12 @@ const postcssMixins = {
     return defineHSL(name, hue, sat, light)
   },
 
+  bpMin(mixin, ) {
+  },
+
+  bpMax(mixin, ) {
+  },
+
   // TODO - untested
   // // font rendering -> useful for light text on dark backgrounds
   fontSmooth() {
@@ -32,9 +38,4 @@ const postcssMixins = {
   },
 }
 
-const postcssMixins = {
-  defineHSL,
-  defineHex,
-};
-
 module.exports = postcssMixins;

src/postcss/mixins.postcss.css

@@ -0,0 +1,76 @@
+@define-mixin bp-min $breakpoint {
+  @media (min-width: $breakpoint) { @mixin-content; }
+}
+
+@define-mixin bp-max $breakpoint {
+  @media (max-width: $breakpoint - 0.001) { @mixin-content; }
+}
+
+@define-mixin bp-min-max $bp-min, $bp-max {
+  @media (min-width: $bp-min) and (max-width: $bp-max - 0.001) { @mixin-content; }
+}
+
+/* crop top space on text elements - caused by line height */
+/*
+ The mixin also accepts a (not required) second parameter (a number smaller than 1 that varies with the font-family value) that improves the crop effect.
+ Since this additional parameter depends on the font-family only (it is not affected by font-size or font-weight or line-height), a good idea would be to define a CSS variable for each one of your font families.
+ You can then use that variable to call the lhCrop mixin; this way, if you need to change your font-family, you’ll only need to update the  value of that variable with no need to modify the mixin calls.
+ In the 📁 custom-style/_typography.scss file, you find this variable defined for the primary font (--font-primary-capital-letter). Its default value is one, so make sure to update it according to your font-family.
+*/
+@define-mixin lhCrop $line-height, $capital-letter: 1, $class-name: & {
+  $(class-name)::before {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-top: calc(($(capital-letter) - $(line-height)) * 0.5em);
+  }
+}
+
+/* edit font rendering -> tip: use for light text on dark backgrounds */
+@define-mixin fontSmooth {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* edit text unit on a component level */
+@define-mixin textUnit $text-unit {
+  --text-unit: $(text-unit);
+  font-size: var(--text-unit);
+}
+
+/* Spacing */
+
+/* edit space unit on a component level */
+@define-mixin spaceUnit $space-unit {
+  --space-unit:  $(space-unit);
+}
+
+/* Reset */
+
+/* reset user agent style */
+@define-mixin reset {
+  background-color: transparent;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  line-height: inherit;
+  appearance: none;
+}
+
+/* Accessibility */
+
+/* hide - content made available only to screen readers */
+@define-mixin srHide {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+}
+
+/* show */
+@define-mixin srShow {
+  position: static;
+  clip: auto;
+  clip-path: none;
+}

src/sass/mixins.scss

@@ -4,6 +4,7 @@
 // Breakpoints
 // --------------------------------
 //
+
 @mixin bp-min($breakpoint, $logic: false) {
   @if( $logic ) {
     @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }