callmecavs / outset Goto Github PK

View Code? Open in Web Editor NEW

170.0 170.0 10.0 502 KB

A minimal frontend boilerplate, emphasizing workflow.

HTML 17.17% JavaScript 40.48% SCSS 42.35%

frontend scaffolding

outset's People

Contributors

Stargazers

Watchers

Forkers

nemodreamer riccardoscalco eliot-akira gedmantas krisnod girlcheese leobauza amrmorsy frontendhub patlillis

outset's Issues

remove IE meta tag

as of IE11, "edge mode" is no longer considered experimental, and enabled by default via <!DOCTYPE html>, so

<meta http-equiv="X-UA-Compatible" content="IE=edge">

is so longer needed

rm `$site-width` and `max-width` on .container

Building doesnt actually build

Under gulp.task('build', ['html', 'sass', 'js', 'images', 'fonts',...]) every task builds then exits except js. Thus if you ever need to build and exit, you must manually intervene. I believe this is because of watchify. It would be great if we can get back the ability to run gulp build and have it exit once completed.

add CSS reset for button element

much needed - can't keep using a or div elements because resetting the button element is a nightmare

eventually, only this will be required:

button {
  all: unset;
}

for now, because IE & Edge are trash, we need all this: https://css-tricks.com/overriding-default-button-styles/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

disable browsersync "ghost mode"

server options in the gulpfile should look as follows:

// SERVER & RELOAD

const options = {
  ghostMode: false,
  notify: false,
  server: {
    baseDir: './dist'
  }
}

@mixin x2() {
  @media (min-resolution: 2dppx) {
    @content;
  }
}

need to try/catch the JS writing

currently an error in bundle.write breaks the stream

const js = async done => {
  let bundle

  try {
    bundle = await rollup.rollup(read)
    await bundle.write(write)
  } catch (error) {
    onError('JS', error, done)
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

fixes notch issue on iPhone X and above