omega-takai/parcel_tutorial

Boilerplate for making modules and mocks

Parcel Tutorial 🚀📦

Boilerplate for making modules and mocks

---

Setup 🛠

$ git clone https://github.com/t--takai/parcel_tutorial.git
$ cd parcel_tutorial
$ yarn

Running 🚀

$ yarn start

Stop 😇

$ yarn stop

Build 📦

$ yarn run build

---

Meaning of Emoji

Browse	Emoji Code	Mean
🎉 🎉 🎉	:tada:	Celebration
🚽 🚽 🚽	:toilet:	Be Minimal
	:octocat:	Function Addition
🐛 🐛 🐛	:bug:	Bug Elimination
💎 💎 💎	:gem:	Refactoring
🚀 🚀 🚀	:rocket:	Performance Improvement
📝 📝 📝	:memo:	Documentation
💩 💩 💩	:shit:	Fail

---

Thanks & Resources

• Reference
  • parceljs.org
  • github.com/parcel-bundler/parcel
  • Yarn
  • browserl.ist: A page to display compatible browsers from a browserslist string.
  • github.com/ai/browserslist
  • Emoji cheat sheet for GitHub, Basecamp and other services
  • postcss-modules
  • Noto Sans JP
  • github.com/qrac/yakuhanjp
• Design philosophy
  • github.com/hiloki/flocss
  • npm で依存もタスクも一元化する - Qiita
  • 僕がnpm installに-gをつけないわけ - Qiita

parcel_tutorial's Issues

test bootstrap

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_mixins.scss

https://www.npmjs.com/package/bootstrap-sass

fail compile

Written CODE

header {
  display: block;
  width: 50%;
  background-color: #AAA;
}
.header {
  margin: 0 auto;
}

.main {
  font-size: 40px;
  h1 {
    font-size: 50px;
  }
}

but

Converted CODE

header {
  display: block;
  width: 50%;
  background-color: #AAA; }

._header_1izet_57 {
  margin: 0 auto; }

._main_1izet_60 {
  font-size: 40px; }
  ._main_1izet_60 h1 {
    font-size: 50px; }

i don't need _1izet_57 , _1izet_60

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

File: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid regExp for packageRules[0].packagePatterns: sass``

run-script "stop" の修正

killするときにブラウザごとkillされるので、使い勝手が悪い。

localhostを停止するだけにしたい。

rem,emでバーティカリズムCSSフレームワークを作る

Vertical Rhythm

Vertical Rhythmは印刷のタイポグラフィに起源を持つ概念です（多分）。Vertical Rhythmとは、ページの要素間の縦のスペースを揃えるようにすることを言います。

• なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | デザイン | POSTD

参考

• CSSのbefore、after疑似要素を使って正しいバーティカルリズムを実装する方法 by 42 DESIGN WORK
• marginとline-heightによる"真の余白"について考える | SimpleIsm