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: 17 days 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 (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-18T13:57:49.000Z (2 months ago)
• Last Synced: 2024-12-18T14:38:32.508Z (2 months ago)
• Topics: bootstrap5, bulma, bulma-css, bulma-css-framework, css, css-flexbox, css-grid, css3, postcss, sass, sass-framework, vite
• Homepage:
• Size: 57.6 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)

- [Introduction](https://github.com/connectkushal/cssnotes/blob/main/introduction.md)

- Basics

  - [Vocabulary](https://github.com/connectkushal/cssnotes/blob/main/vocabulary.md)

  - [Units](https://github.com/connectkushal/cssnotes/blob/main/units.md)

- Layouts

  - [Box Model](https://github.com/connectkushal/cssnotes/blob/main/boxmodel.md)

  - [Flexbox](https://github.com/connectkushal/cssnotes/blob/main/flexbox.md)

  - [Grid]() 

- [Snippets]()

 

---

##### Setup

- inside your project directory, run `npm init -y && npm pkg set type="module"`

without build tools

- `npm i -g sass`

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

- vscode plugin liveserver from `index.html`

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

    

**Notes for vite setup**

- to avoid sass warning messages, add this config to `vite.config.js` 

    

    ```

    import { defineConfig } from 'vite'

    export default defineConfig({

      css: {

          preprocessorOptions: {

              scss: {

                  api: "modern"

              }

          }

      }

    })

    ```

   -  `import { defineConfig } from 'vite'` // this is for editor's intellisense

   -  `api: "modern"` // vite's options not part of sass-cli, the default is set to `"legacy"`

   -  other options used in vite to config sass, like `quietDeps:true` is actually `--quiet-deps` from the sass cli, check sass official docs accordingly.

- `package.json` should have `type="module"` to avoid warning messages from vite