https://github.com/lucadb/twig_static_scaffolding

Boilerplate for static site/frontend generator using twig.js, scoped css (cssmodules) and live code injection (HTML/CSS).
https://github.com/lucadb/twig_static_scaffolding

browsersync cssmodules twig

Last synced: about 13 hours ago
JSON representation

Boilerplate for static site/frontend generator using twig.js, scoped css (cssmodules) and live code injection (HTML/CSS).

• Host: GitHub
• URL: https://github.com/lucadb/twig_static_scaffolding
• Owner: LucaDb
• Created: 2018-03-06T13:52:38.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-03-06T18:39:40.000Z (over 6 years ago)
• Last Synced: 2024-09-21T03:03:54.650Z (4 days ago)
• Topics: browsersync, cssmodules, twig
• Language: JavaScript
• Homepage:
• Size: 88.9 KB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## TL;DR

 1. clone the repo

 2. install/update [nvm](https://github.com/creationix/nvm) then type `nvm use` to setup node version

 3. `npm i`

 4. `npm run dev`

 5. create components `npm run component -- [component_name]`

## Using scoped CSS

When you run for example `npm run component -- header` the script creates a folder in `src/html/components` like this:

```

|-- src

  |-- html

    |-- components

      |-- header

        |-- header.twig

        |-- style.scss

```

In `style.scss` file you can write scoped css, for example:

 

```

.header { 

    height: 200px;

    background: #fafafa;

}

```

And in `header.twig` you can reference the class name like this:

    

    ...

    

This compiles in:

    

    ...

    

For all css modules api please refer to [css modules repo](https://github.com/css-modules/css-modules).