https://github.com/connectkushal/cssnotes

Revision notes for css, sass and tools to work on them. Also notes on bulma and bootstrap5.
https://github.com/connectkushal/cssnotes

bootstrap5 bulma bulma-css bulma-css-framework css css-flexbox css-grid css3 postcss sass sass-framework vite

Last synced: about 1 month ago
JSON representation

Revision notes for css, sass and tools to work on them. Also notes on bulma and bootstrap5.

• Host: GitHub
• URL: https://github.com/connectkushal/cssnotes
• Owner: connectkushal
• Created: 2024-01-29T10:43:08.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-05-24T15:18:09.000Z (6 months ago)
• Last Synced: 2024-10-01T05:41:29.070Z (about 2 months ago)
• Topics: bootstrap5, bulma, bulma-css, bulma-css-framework, css, css-flexbox, css-grid, css3, postcss, sass, sass-framework, vite
• Homepage:
• Size: 43.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Notes on css and sass

#### Index

- [Setup](#setup)

- [Units](#units)

 

---

##### Setup 

without build tools

- `npm i -g sass`

- `sass -w input.scss output.css` running on the terminal

- vscode plugin liveserver from `index.html`

##### Setup with vite

- `npm i -g vite sass`

- to index.html, add link:css with href=`path/to/main.scss` or `app.scss`

- `vite run dev`

  - OR run `vite run build` then liveserver plugin

---

#### Units

- 1em = browser default font size (usually 16px)

- 

  |em   |px  |

  |-----|----|

  |0.125|6   |

  |0.5  |8   |

  |0.625|10  |

  |0.75 |12  |

  |0.875|14  |

  |**1**    |**16**  |

  |1.125|18  |

  |1.25 |20  |

  |1.375|22  |

  |1.5  |24  |

  |1.625|26  |

  |1.75 |28  |

  |1.875|30  |

  |2    |32  |

  |3    |48  |