{"id":25563430,"url":"https://github.com/redeagleap/meow-boilerplate","last_synced_at":"2025-04-12T08:16:21.159Z","repository":{"id":57294655,"uuid":"156927450","full_name":"RedEagleAP/Meow-Boilerplate","owner":"RedEagleAP","description":":package: :cat2: Awesome Meow Boilerplate for creating Front-end projects in seconds!   ","archived":false,"fork":false,"pushed_at":"2019-08-28T10:47:08.000Z","size":2324,"stargazers_count":34,"open_issues_count":1,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-21T22:17:09.087Z","etag":null,"topics":["babel","critical-css","framework","front-end","gulp","itcss","linting","postcss","sass","sassdoc","svg-sprites","webpack"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/RedEagleAP.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}},"created_at":"2018-11-09T23:01:40.000Z","updated_at":"2024-12-16T11:42:00.000Z","dependencies_parsed_at":"2022-08-29T08:01:50.946Z","dependency_job_id":null,"html_url":"https://github.com/RedEagleAP/Meow-Boilerplate","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedEagleAP%2FMeow-Boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedEagleAP%2FMeow-Boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedEagleAP%2FMeow-Boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedEagleAP%2FMeow-Boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RedEagleAP","download_url":"https://codeload.github.com/RedEagleAP/Meow-Boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248537192,"owners_count":21120711,"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":["babel","critical-css","framework","front-end","gulp","itcss","linting","postcss","sass","sassdoc","svg-sprites","webpack"],"created_at":"2025-02-20T20:19:44.423Z","updated_at":"2025-04-12T08:16:21.116Z","avatar_url":"https://github.com/RedEagleAP.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://redeagleap.github.io/Meow-Boilerplate\"\u003e\n    \u003cimg src=\"https://lh3.googleusercontent.com/qjc0gHFosK8Ks0018gHR_a6TAurgeV5sU0ugkRSMup1tACIYkmmcz8Kj0tmPSh2s7XwXA42VFyM\" alt=\"Meow-Boilerplate\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://badge.fury.io/js/meow-boilerplate\"\u003e\n \u003cimg src=\"https://badge.fury.io/js/meow-boilerplate.svg\" alt=\"npm version\"\u003e\n \u003c/a\u003e\n \u003ca href=\"https://david-dm.org/redeagleap/meow-boilerplate\"\u003e\n \u003cimg src=\"https://david-dm.org/redeagleap/meow-boilerplate/status.svg\" alt=\"Dependencies Status\"\u003e\n \u003c/a\u003e\n \u003ca href=\"https://github.com/RedEagleAP/meow-boilerplate/blob/master/LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/mashape/apistatus.svg\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=square\" alt=\"Prettier\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.youtube.com/watch?v=QH2-TGUlwu4\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/nyancat-approved-ff69b4.svg\" alt=\"nyancat\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp  align=\"center\"\u003e\n\u003cimg  src=\"https://lh3.googleusercontent.com/eN9nJx8PD9zvr2DHhpNsLb9h2XSK0RteP7x423JlCIzYXwCtwU-kuB9e_WOGsGepn9DMN1Xjwik\"  alt=\"kitty_motivation\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ch3 align=\"center\"\u003eMeow Boilerplate\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n  It's just a little and powerfull Meow Boilerplate for your next Project.\u003cbr\u003e\n  Most of the stuff fits for my own requirements and maybe you have\u003cbr\u003e\n  the same, you can have a lot of fun with it.\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\u003cb\u003eGive it a try!\u003c/b\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- Used for the \"back to top\" links within the document --\u003e\n\u003cdiv id=\"contents\"\u003e\u003c/div\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eTable of Contents\u003c/strong\u003e\u003c/summary\u003e\n\n- \u003ca href=\"#intro\"\u003e:speech_balloon: Intro\u003c/a\u003e\n- \u003ca href=\"#dependencies\"\u003e:package: Dependencies\u003c/a\u003e\n- \u003ca href=\"#getting-started\"\u003e:rocket: Getting Started\u003c/a\u003e\n- \u003ca href=\"#commands\"\u003e:triangular_flag_on_post: Commands\u003c/a\u003e\n- \u003ca href=\"#technologies-used\"\u003e:bento: Technologies used\u003c/a\u003e\n- \u003ca href=\"#structure\"\u003e:wrench: Structure\u003c/a\u003e\n- \u003ca href=\"#build\"\u003e:hammer: Build\u003c/a\u003e\n  - \u003ca href=\"#build-css\"\u003e:art: Build CSS\u003c/a\u003e\n  - \u003ca href=\"#build-structure\"\u003e:white_check_mark: Build Structure\u003c/a\u003e\n  - \u003ca href=\"#build-js\"\u003e:rainbow: Build JS\u003c/a\u003e\n- \u003ca href=\"#license\"\u003e:page_facing_up: License\u003c/a\u003e\n- \u003ca href=\"#author\"\u003e:penguin: Author\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdiv id=\"intro\"\u003e\u003c/div\u003e\n\n## :speech_balloon: Intro\n\n\"Meow Boilerplate\" is a toolkit designed to support mainly the construction of frontends. Anyone looking for a colorful mixture of prefabricated elements, as one would expect from bootstrap and co, will not be happy with Meow. Here rather the methods are offered to those elements on a simple way to generate and expand.\n\nAround the CSS part, there are still many automatic functions installed that help the developer. For example, to generate image assets and distribute, to build HTML mockups, to make sprites to generate fallbacks for SVG files. That's why I also avoid the term framework.\n\nIf you want to have a more lightweight and cleaner version, try [Light Boilerplate](https://github.com/RedEagleAP/light-boilerplate)\n\nAs well as a template for creating [README.md](doc/TEMPLATE.md). Or directly to [repo](https://github.com/RedEagleAP/readme-template).\n\n\u003cdiv id=\"dependencies\"\u003e\u003c/div\u003e\n\n## :package: Dependencies\n\n- [Node.js](https://nodejs.org/en/)\n- [NPM](https://www.npmjs.com/) or [YARN](https://yarnpkg.com/lang/en/)\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"getting-started\"\u003e\u003c/div\u003e\n\n## :rocket: Getting started\n\n### Npm\u0026Yarn install:\n\n```bash\n#Nostalgic\nnpm install meow-boilerplate\n\n#Hipster\nyarn add meow-boilerplate\n```\n\nThen you need to delete `yarn.lock` or `package-lock.json` and `package.json`. After that `cd node_modules/meow-bilerplate` and extract all files and folders into your project root directory. Configurate `package.json` and `config.json` files according to your preference. And just `npm install` or `yarn`.\n\n### Clone the repo:\n\nClone the repo to get all source files as they are available on Github:\n\n```bash\ngit clone https://github.com/redeagleap/meow-boilerplate.git\n\ncd meow-boilerplate/\n```\n\nAnd then install NPM-Modules via:\n\n```bash\n#Nostalgic\nnpm install\n\n#Hipster\nyarn\n```\n\nThis install the required __node_modules__.\n\nNice, now your project is ready for battle, and you just have to write your code, and not spend several hours each time setting up each new project. Enjoy!\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"commands\"\u003e\u003c/div\u003e\n\n## :triangular_flag_on_post: Commands\n\n _With Webpack you have to use NPM Script Commands_\n\n| Action                                                                                      | Npm                  | Yarn              |\n|:------------------------------------------------------------------------------------------- |:--------------------:|:-----------------:|\n| Intialize your Project and the Sass Documentation (/sassdocs/)                              | `npm run init`       | `yarn run init`   |\n| Main development task with BrowserSync and Webpack                                          | `npm run dev`        | `yarn dev`        |\n| Minify JS, Images, CSS. Is for a automated Build Process, comes after a Gulp Init.          | `npm run build`      | `yarn build`      |\n| Rebuild all JS Files except the Application JS File                                         | `npm run scripts`    | `yarn scripts`    |\n| Rebuild all Image Files for CSS, copy it to distribution, build Bitmap- and Vector Sprites. | `npm run uiimages`   | `yarn uiimages`   |\n| Copy all Imagefiles for Documentusage.                                                      | `npm run htmlassets` | `yarn htmlassets` |\n| Copy all or Generate the Template Files.                                                    | `npm run template`   | `yarn template`   |\n| Generate Favicons and the HTML Snippet (generated Files you will find in `src/.system/`)    | `npm run favicon`    | `yarn favicon`    |\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"technologies-used\"\u003e\u003c/div\u003e\n\n## :bento: Technologies used\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e\u003c/summary\u003e\n\n- [ES2017](https://medium.com/komenco/what-to-expect-from-javascript-es2017-the-async-edition-618e28819711) - support through compiler [Babel](https://babeljs.io/).\n\n- [Node](https://nodejs.org/) - is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eTesting\u003c/strong\u003e\u003c/summary\u003e\n\n- [Cypress](https://www.cypress.io/) - is a fast, easy and reliable testing for anything that runs in a browser.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eStyles\u003c/strong\u003e\u003c/summary\u003e\n\n- [Sass](https://sass-lang.com/) - is the most mature, stable, and powerful professional grade CSS extension language in the world.\n\n- [Sassdoc](http://sassdoc.com/) - is a documentation system to build pretty and powerful docs in the blink of an eye.\n\n- [PostCSS](https://postcss.org/) - is a tool for transforming CSS with JavaScript.\n\n- [Critical](https://github.com/addyosmani/critical) - extracts \u0026 inlines critical-path (above-the-fold) CSS from HTML.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eAutomation\u003c/strong\u003e\u003c/summary\u003e\n\n- [Gulp](https://gulpjs.com/) - is a toolkit for automating painful or time-consuming tasks in your development workflow.\n\n- [Webpack](https://webpack.js.org/) - is a bundler for modules.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eOptimization\u003c/strong\u003e\u003c/summary\u003e\n\n- [Imagemin](https://github.com/imagemin/imagemin) - minify PNG, JPEG, JPG, GIF and SVG images.\n\n- [Uglify](https://github.com/mishoo/UglifyJS2) - is a JavaScript parser, minifier, compressor and beautifier toolkit.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eServer\u003c/strong\u003e\u003c/summary\u003e\n\n- [BrowserSync](http://www.browsersync.io/) - is a time-saving synchronised browser testing.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eLinting\u003c/strong\u003e\u003c/summary\u003e\n\n- [ESlint](http://eslint.org/) - is to provide a pluggable linting utility for JavaScript.\n\n- [HTMLHint](https://htmlhint.io/) - is a Static Code Analysis Tool for HTML.\n\n- [Stylelint](https://stylelint.io/) - is a mighty, modern linter that helps you avoid errors and enforce conventions in your styles.\n\n- [Prettier](https://prettier.io/) - is an opinionated code formatter.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eCode Management\u003c/strong\u003e\u003c/summary\u003e\n\n- [Editorconfig](http://editorconfig.org/) - helps developers define and maintain consistent coding styles between different editors and IDEs.\n\n- [Git](https://git-scm.com/) - is a distributed version control system designed to handle everything from small to very large projects.\n\n\u003c/details\u003e\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"structure\"\u003e\u003c/div\u003e\n\n## :wrench: Structure\n\nIn the directory `src/` is the source code, so that our working directory. In `dist/` directory that should not work, therefore, only if it is absolutely necessary.\n\nThe Gulpfile is modularized and ES8 Compatible (with Babel.js), you will find all Tasks in the `gulpfile/` directory. It is now easier for you to add additional Tasks, without touching the main Gulpfile (die Main Gulpfile is only a Loader).\n\n**SRC Folderstructure:**\n\n```\nsrc/\n├── .system/                          =\u003e Internal System Files\n├── fonts/                            =\u003e Font Files\n├── framework/                        =\u003e Sass Framework\n├── images/                           =\u003e All Images\n|   ├── bitmapSingle-assets           =\u003e Single Bitmap Images\n|   ├── bitmapSprite-assets           =\u003e Images for Bitmap Sprites\n|   ├── htmlimages                    =\u003e Content Images (`\u003cimg\u003e`)\n|   ├── vectorSingle-assets           =\u003e Single Vector Images\n|   └── vectorSprite-assets           =\u003e Vector Images for Vector Sprites\n├── js/                               =\u003e JS Files (e.g. main.js)\n├── scripts/                          =\u003e Script files that are not installed\n├── structure/                        =\u003e Source Files for Copy (e.g. Template Files for a WP Theme)\n├── template/                         =\u003e Source Files for a Template Compiler (Pug / Twig)\n├── style/                            =\u003e Styling Source Files\n```\n\nIf you are not happy with the structure of the `src/` folder, you can customize it. In the `config.json` must also be entered the new paths.\n\nThe `Template / Structure` directories even a short explanation. If an HTML compiler like pug or twig used the files from the `template/` directory are used. If the compiler is disabled, the `structure/` directory used. For example, you can put the files there a Wordpress template, these are then copied with a change in the `src/` directory.\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://lh3.googleusercontent.com/_er2t_NUEx81Szvsx7UlExlclsN84Tf8bxPJosSMafJm3TuJZiByLdXleuZ2MQASlqxGANcgVvM\" alt=\"template_config\"\u003e\n\u003c/p\u003e\n\nThe `dist/` folder is created after initialization (`npm run init`) of the project. All compiled and copied files of the `src/` Folders land there.\n\n**Dist Folderstructure:**\n\n```\ndist/\n├── assets/                 =\u003e All Assets\n|   ├── css/                =\u003e CSS Files\n|   ├── fonts/              =\u003e Font Directory\n|   ├── js/                 =\u003e Javascript Files\n|   └── img/                =\u003e Background Image Assets\n|       ├── system/         =\u003e Images like Favicons\n|       ├── bitmaps/        =\u003e Bitmap Images\n|       └── svgfiles/       =\u003e Vector Images\n├── images/                 =\u003e Content Images\n```\n\nIf you therefore should not be satisfied, you can change the structure in the `config.json`. When you change, delete the `dist/` Folder, than run the Init Task.\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://lh3.googleusercontent.com/_cf76yEx5cvPd9bJTsEU4l-lI0iuhgYVeIYtDCU6q42lZx1tLk7SKrpJ3U8sUZ8VDO444SRbgOk\" alt=\"dist_config\"\u003e\n\u003c/p\u003e\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"build\"\u003e\u003c/div\u003e\n\n## :hammer: Build\n\n\u003cdiv id=\"build-css\"\u003e\u003c/div\u003e\n\n### :art: Build CSS\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eBEM\u003c/strong\u003e\u003c/summary\u003e\n\nClass names that are generated by \"Meow\", use the [BEM](https://en.bem.info/methodology/quick-start/) syntax. BEM is one of the easiest ways to write  Object Oriented CSS . Surely you can build a lot more delicate with [Smacss](https://smacss.com/), but should not forget that the issue is simply a principle of object-oriented programming here. One should therefore not make a religion out of the topic - the final product will always be CSS with all its drawbacks.\n\nThe Develeloper is free to decide whether he wants his class named after the BEM build syntax, in which case you can rely on the BEM mixins, thus obtaining a central node to make global modifications to the syntax.\n\n```scss\n.root__child =\u003e Element\n.root--modifier =\u003e Modifier\n.root---instance =\u003e Instance\n```\n\nInstance is similar to a modifier, with the difference that the styles of the parent element are applied. The instance can then be expanded with additional Styles.\n\nBy default BEM elements marked with a double underscore `__` and BEM Modifier with a double hyphen `--`, Instances with a tripple hyphen `---`. Who does not agree, this may change the Sass Setup file (`src/framework/_defaults.scss`) on the by adjusting the `$meow-bem` Map accordingly.\n\n\u003c/details\u003e\n\n---\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eFramework Structure\u003c/strong\u003e\u003c/summary\u003e\n\nThe necessary files can be found under `src/framework/`. Those who want to can extend the framework for specific projects.\n\n***Framework Structure***\n\n \u003cimg src=\"https://i.imgur.com/uNNy6CD.png\" alt=\"framework_structure\"\u003e\n\n\u003c/details\u003e\n\n---\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eSass Basics\u003c/strong\u003e\u003c/summary\u003e\n\nTo generate the CSS file, you use the `main.scss` from the style directory (`src/style/`). But first the structure:\n\n***Styling Structure***\n\n \u003cimg src=\"https://i.imgur.com/DxE5wF3.png\" alt=\"styling_structure\"\u003e\n\n*You not need to worry about CSS3 prefixes the gulp-autoprefixer will insert it on any Compile.*\n\n***Loader File***\nWith the `_loader.scss` file, all required files are loaded. The order is already given proof should not be changed.\n\n***Setup File***\nAlmost all settings can be changed and extended over `_setup.scss` (find under `src/style/`).\n\n\u003c/details\u003e\n\n---\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eGrid system\u003c/strong\u003e\u003c/summary\u003e\n\nWe've outsourced the Scss Grid Framework in his own NPM Package to use it in different environments\nYou can find it here: [https://github.com/davidhellmann/baukasten-grid](https://github.com/davidhellmann/baukasten-grid)\nOr directly to the [Readme](https://github.com/davidhellmann/baukasten-grid/blob/master/readme.md)\n\nTo modify you settings you must open the `src/style/app/_______settings/_settings.breakpoints.scss` and there you can change what you want.\n\nThe dafaults look like this:\n\n```scss\n// Settings\n$bk-grid-settings-custom: (\n  // You want to use CSS Grid?\n  // @Boolean\n  // default: true\n  cssgrid: true,\n\n  // Your Project must support older browsers? No Problem, we've a Fallback (flexbox) here!\n  // @Boolean\n  // default: true\n  cssgrid-fallback: true,\n\n  // You want to use Flexbox only? Also no Problem! But you must set the \"cssgrid-fallback\" and \"cssgrid\" to false.\n  // @Boolean\n  // default: false\n  flexboxgrid: false,\n\n  // This add some CSS Styleing to the \"section\", \"row\" and \"col\" classes.\n  // @Boolean\n  // default: false\n  testing: false,\n\n  // Naming Conventions? No Problem. You can choose you prefix!\n  // @String\n  // default: 'o-'\n  prefix: 'o-',\n\n  // Units are for Paddings and Margins. All Paddings an Margins are Fluid.\n  // That means that on the smallest breakpoint the Padding on each col side\n  // is: gutter * gutter-min-factor (8px * 1) and on the biggest breakpoint it\n  // is: gutter * gutter-max-factor (8px * 2)\n  // For Margins top it is the same with the Vertical factors.\n  units: (\n    gutter: 8px,\n    gutter-min-factor: 1,\n    gutter-max-factor: 2,\n    gutter-min-vertical-factor: 1,\n    gutter-max-vertical-factor: 2\n  ),\n\n  // Class Creation\n  // Not every projects need all this offset / push / pull classes. You decide!\n  // @Boolean\n  // default: true\n  offset-classes: true,\n  push-classes: true,\n  pull-classes: true,\n\n  // Disbale Padding Horizontal for Sections. Rows. Cols\n  // @Boolean\n  // default: false\n  disable-padding-horizontal: false,\n\n  // Breakpoints must have at least a \"min\" and a \"max\". The other Breakpoints as u like\n  // We use all the time \"min-width\".\n  // Cols are how many cols can have a row on that specific breakpoint.\n  breakpoints: (\n    min: (from: 320px, cols: 6, create-classes: true),\n    xs:  (from: 400px, cols: 6, create-classes: true),\n    s:   (from: 600px, cols: 12, create-classes: true),\n    m:   (from: 800px, cols: 12, create-classes: true),\n    l:   (from: 1000px, cols: 24, create-classes: true),\n    max: (from: 1440px, cols: 24, create-classes: true)\n  )\n);\n```\n\n\u003c/details\u003e\n\n---\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"build-structure\"\u003e\u003c/div\u003e\n\n### :white_check_mark: Build Structure\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eCompiler\u003c/strong\u003e\u003c/summary\u003e\n\nTo generate HTML files, for example, to build a prototype, you can use HTML compiler like Pug or Twig. Pug and Twig differ less in their features, more in the syntax. The compiler will but set the project start (can also be completely disabled).\n\nWhen active, the generator is in the `src/` directory `template/` directory integrated, there is also some basis are files (example with Twig).\n\n \u003cimg src=\"https://i.imgur.com/nCnJbfm.png\" alt=\"template_structure\"\u003e\n\n**Important**\n\nBy default the compiler is disabled. To switch from html sructure to Twig you can do next steps:\n\n- In `config.json` move to `template.compiler` and switch `false` on `true`;\n- In `webpack.config.base.babel.js` comment HtmlWebpackPlugin call:\n\n```js\n  // comment this block of code\n  new HtmlWebpackPlugin({\n    filename: 'index.html',\n    template: utils.meowConf.src.structure + 'index.html',\n    inject: true,\n    hash: false,\n    minify: {\n      removeComments: true,\n      collapseWhitespace: true,\n      removeAttributeQuotes: false,\n      minifyCSS: true,\n      minifyJS: true,\n    },\n    chunksSortMode: 'dependency',\n  }),\n```\n\n\u003c/details\u003e\n\n---\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eTemplate Folder\u003c/strong\u003e\u003c/summary\u003e\n\nFiles in the root of the template directory are compiled to HTML files. In `parts/` are larger template blocks as the header and the block to load the script files. In `templates/` directory contains Main Templates, as a basis for Child Templates in the root.\n\nThe compiler will only work with the data of the `template/` directory\n\n\u003c/details\u003e\n\n---\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eWithout Compiler\u003c/strong\u003e\u003c/summary\u003e\n\nIf you work for example on a WordPress template, the compiler would there rather inappropriate, because you actually have to copy only those files. To stay with the example of the Wordpress template, all the files for the template, added to the structure directory.\nGulp will copy these files when changing to the appropriate directory.\n\nThe Compiler is this, if not already, be switched off in the `config.json` (template.compiler). Gulp-Watch will then monitor the Structure directory (`src/structure/`) on changes to the files .\n\n\u003c/details\u003e\n\n---\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"build-js\"\u003e\u003c/div\u003e\n\n### :rainbow: Build JS\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eMain JS File\u003c/strong\u003e\u003c/summary\u003e\n\nIn `src/js/` directory is the `main.js` file (can be renamed). That is our main file events and scripts are controlled with Javascript. The file passes through a Gulp task, all in addition ESLint also the advantage that you can attach partials.\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://i.imgur.com/ifYQ8CE.png\" alt=\"main.js\"\u003e\n\u003c/p\u003e\n\n\u003c/details\u003e\n\n---\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eScripts\u003c/strong\u003e\u003c/summary\u003e\n\nTo use JS files, they must first be processed with Gulp. JS files are then either in the JS directory `dist/assets/js/` copied or they are combined and copied to the JS directory.\n\nIn the `config.json` you will find the following block:\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://lh3.googleusercontent.com/zXb8zi8C19GxfHvZmJpVu1bmfuUMfD7eVYL--gjXsOjFclBB6sk-kzvpUGQB0faB_a3IF7LsqYU\" alt=\"script_config\"\u003e\n\u003c/p\u003e\n\nEverything under jsCopy will be simply copied, under jsCombine identifies this files for the Combination. When you include new JS Files start the rebuild process:\n\n```bash\ngulp rebuild:js\n```\n\n\u003c/details\u003e\n\n---\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"license\"\u003e\u003c/div\u003e\n\n## :page_facing_up: License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n\n\u003cdiv id=\"author\"\u003e\u003c/div\u003e\n\n## :penguin: Author\n\n```txt\nMeow Boilerplate made with love.\n\n---------------------------------------\n\nAuthor : Alexander Prisyazhnyuk\n\nEmail : insightinyourmind@gmail.com\n\nGithub : https://github.com/redeagleap/meow-boilerplate.git\n```\n\n[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)\n\n\u003ca href=\"#contents\"\u003e:top: \u003csub\u003eback to top\u003c/sub\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredeagleap%2Fmeow-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredeagleap%2Fmeow-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredeagleap%2Fmeow-boilerplate/lists"}