| CSS Variables | |
| - [Using CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) | |
| - [Getting Reactive with CSS](https://www.youtube.com/watch?v=4IRPxCMAIfA) | |
| - [Why You Should Care CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) | |
| Demos | |
| - [David Khourshid CSS Variables Collection](https://codepen.io/collection/DNzQqY/) | |
| - [Mike Ruthmieler - Using CSS Variables](https://madebymike.com.au/writing/using-css-variables/) |
The CSS grid structure utilizes a flexbox-based layout to enable developers to quickly craft layout. Use of our grid classes is not required, but is there to help align and speed the development process with the design specifications of the grid.
The grid system is loosely based around the semantics of the Bootstrap grid, so if you're familiar with the technicalities of that grid, this should feel similar.
| //general | |
| var gulp = require('gulp'); | |
| var del = require('del'); | |
| var copy = require('gulp-copy'); | |
| //sass | |
| var sass = require('gulp-sass'); | |
| var autoprefixer = require('gulp-autoprefixer'); | |
| //images |
| Store | |
| URL | |
| Search bar | |
| Url has values | |
| Store has values | |
| Search& | |
| Search Bar | |
| Inactive* | |
| focus bar -> Active | |
| Active& | |
| cancel out -> Inactive | |
| Input States | |
| delete all text -> Idle |
| // in some file | |
| const request = useRef(); | |
| useEffect(() => { | |
| if (request.current !== undefined) { | |
| request.current.cancel("Cancelled"); | |
| } | |
| request.current = axios.CancelToken.source(); |
| // useSearch file | |
| import React, { useEffect } from "react"; | |
| import axios from "axios"; | |
| import { useImmerReducer } from "./useImmerState"; | |
| import { baseSelectedItems } from "../constants"; | |
| export function useSearch(selectedItems) { | |
| function reducer(draft, action) { | |
| switch (action.type) { |
| const getRandom = (min, max) => { | |
| return Math.floor(Math.random() * (max - min + 1)) + min | |
| } | |
| export default class ExtraSparkles { | |
| static get inputProperties() { | |
| return ['--extra-sparkleNumber', '--extra-sparkleHue', '--extra-sparkleHeightVariance', '--extra-sparkleWidthVariance', '--extra-sparkleWeightVariance'] | |
| } | |
| init() { |
| // Available variables: | |
| // - Machine | |
| // - interpret | |
| // - assign | |
| // - send | |
| // - sendParent | |
| // - spawn | |
| // - raise | |
| // - actions |
| // Available variables: | |
| // - Machine | |
| // - interpret | |
| // - assign | |
| // - send | |
| // - sendParent | |
| // - spawn | |
| // - raise | |
| // - actions |