{"id":20348273,"url":"https://github.com/shelldandy/css-modules-gulp-example","last_synced_at":"2025-07-03T03:03:59.018Z","repository":{"id":113160954,"uuid":"115952294","full_name":"shelldandy/css-modules-gulp-example","owner":"shelldandy","description":"scaffolded with pixel2html BP","archived":false,"fork":false,"pushed_at":"2018-02-08T22:52:00.000Z","size":490,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-03T03:02:39.531Z","etag":null,"topics":["css","gulp","js","webpack"],"latest_commit_sha":null,"homepage":"https://css.mpz.im/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shelldandy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-01T22:24:34.000Z","updated_at":"2023-02-13T16:41:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"66c60720-1f63-4e11-8a0a-d45d42044550","html_url":"https://github.com/shelldandy/css-modules-gulp-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shelldandy/css-modules-gulp-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fcss-modules-gulp-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fcss-modules-gulp-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fcss-modules-gulp-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fcss-modules-gulp-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shelldandy","download_url":"https://codeload.github.com/shelldandy/css-modules-gulp-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fcss-modules-gulp-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263250593,"owners_count":23437286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","gulp","js","webpack"],"created_at":"2024-11-14T22:19:42.347Z","updated_at":"2025-07-03T03:03:58.914Z","avatar_url":"https://github.com/shelldandy.png","language":"HTML","readme":"# modules\n\n## Installing dependencies \u0026 running up\nTo work, the **Pixel2HTML Boilerplate** needs to install some dependencies to run the options you select.\nFor this job, run this command in your shell\n\n```\n$ npm run start\n$ npm run code\n```\n\n### Other available npm commands\n\n```\n$ npm run build // build the project without serving\n\n$ npm run code --tunnel // create a tunnel to share your project everywhere\n```\n\n## File Structure\n\nThis boilerplate will create a set of files and folders\n\n```\n\n├── dist/\n├── src/\n│    ├──  assets/\n│    │    ├──  gulp/\n│    │    │    ├── tasks/\n│    │    │    ├── config.js\n│    │    │    └── helpers.js\n│    │    ├──  fonts/\n│    │    ├──  icons/\n│    │    ├──  images/\n│    │    ├──  js/\n│    │    ├──  styles/\n│    │    │    ├──  components/\n│    │    │    │    ├──  _buttons.scss\n│    │    │    │    ├──  _footer.scss\n│    │    │    │    ├──  _forms.scss\n│    │    │    │    ├──  _header.scss\n│    │    │    │    └──  _nav.scss\n│    │    │    ├──  screens/\n│    │    │    │    ├──  _base.scss\n│    │    │    │    └──  screen_1.scss\n│    │    │    ├──  _variables.scss\n│    │    │    ├──  _reset.scss\n│    │    │    ├──  _mixins.scss\n\n│    │    │    └──  main.scss\n│    │    └──  vendor/\n│    └──  screen_1.pug\n├── .editorcofig\n├── .gitattributes\n├── .gitignore\n├── .browserlistrc\n├── .babelrc\n├── .project.conf\n├── gulpfile.js\n├── LICENSE\n├── package.json\n└── README.md\n```\n\n## Gulp Config file\n\nYou have a config file located at `gulp/config.js` that enables you to add thrid-party libraries easily.\n\n### SCSS Directories\n\nWe are using [`sass-module-importer`](https://www.npmjs.com/package/sass-module-importer) so we can import sass libraries just using the npm package name like:\n\n#### Example\n```scss\nimport \"bootstrap-sass\";\n```\n\nThat is the external library fits under one of these categories:\n\n* Set a SCSS/Sass/CSS file on the \"main\" field of their package.json/bower.json\n* Set a SCSS/Sass/CSS file on the \"style\" field of their package.json/bower.json\n* Have a index.css file on the root of their module\n\nHowever fear not, if your module doesn't fit into those categories you can also *navigate* to your desired scss or css file like this:\n\n```scss\n@import \"module-name/folder/to/_file.scss\";\n```\n\n### Script Files\n\nWe are using [WebpackJS](https://webpack.js.org/) to bundle our script files. There's also ES6 on-demand transpilation and pollyfills.\n\nLearn more about Javascript Modules here [Wesbos Article About Modules](http://wesbos.com/javascript-modules/)\n\nAlso learn more about ES6 here: [Babel Overview of ES2015](https://babeljs.io/learn-es2015/)\n\n#### Example\n```js\nimport $ from 'jquery'\nimport 'bootstrap-sass'\n```\n\nWe also included the amazing [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer) you can fine tweak you JS bundle size if you wish to. Fire it up running this command:\n\n```sh\n$ npm run debug\n```\n\n### Font Files\n\nYou can add file paths to `fontFiles` key, who will move this fonts to the correct folder `./dist/assets/fonts`.\nYou can point to specific files or complete directories using wildcards (`**/*`)\n\n#### Example\n```\nfontFiles: [\n  './path/to/bootstrap/fonts/**/*',\n  './node_modules/library/font/font.ttf'\n]\n```\n\n## Available Gulp Commands\n\n### Helpers\n* `$ gulp clean` Clean /dist directory\n\n### Images\n* `$ gulp images` Move images\n\n### Fonts Files\n* `$ gulp fonts` Move project fonts\n\n### Scripts\n* `$ gulp scripts` Process script files with webpack\n\n### Styles\n* `$ gulp styles` Compile, concat, autoprefix, minify and move [SCSS, Less, Stylus] project files\n\n### Daemons\n* `$ gulp watch` **Watch** your files and autoexecute gulp directives\n* `$ gulp serve` **Watch** your files and **serve** with an HTTP server and **Sync** with your prefered browser _awesome!_\n\n### Delivery\n * `$ gulp build` Execute all the gulp directives and makes a `.zip` file with the latest code.\n\n### FTP Upload\n* `$ gulp ftp` will upload your dist folder via FTP you must specify the credentials on the `config.deploy.ftp` object. It's powered by: [Vinyl-FTP](https://www.npmjs.com/package/vinyl-ftp)\n\n### EditorConfig Please note we use\n[EditorConfig](http://editorconfig.org/) to help us try to standarize\nstuff like tabs spaces and such. Please visit the link provided to\ndownload a plugin for your text editor of choice like Vim, Coda, Atom,\nSublime Text, Visual Studio, Emacs Notepad++ and more.\n\n---\n\n##### Generated with 💕 by Pixel2HTML v2.3.2 @ 2018-02-08T15:58:14-06:00\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshelldandy%2Fcss-modules-gulp-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshelldandy%2Fcss-modules-gulp-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshelldandy%2Fcss-modules-gulp-example/lists"}