{"id":23113745,"url":"https://github.com/ndeviant/may","last_synced_at":"2025-08-16T20:31:25.082Z","repository":{"id":40792176,"uuid":"205011065","full_name":"ndeviant/may","owner":"ndeviant","description":"Frontend development with pleasure.","archived":false,"fork":false,"pushed_at":"2023-01-04T09:53:33.000Z","size":2698,"stargazers_count":6,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-18T09:55:38.133Z","etag":null,"topics":["babel","bem","browsersync","cms","es6","eslint","gulp","hot-reload","js","scss","stylelint","template","twig","webpack"],"latest_commit_sha":null,"homepage":"https://may-starter.gq/","language":"JavaScript","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/ndeviant.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":"2019-08-28T19:47:57.000Z","updated_at":"2021-07-03T00:39:21.000Z","dependencies_parsed_at":"2023-02-02T07:46:08.629Z","dependency_job_id":null,"html_url":"https://github.com/ndeviant/may","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndeviant%2Fmay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndeviant%2Fmay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndeviant%2Fmay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndeviant%2Fmay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndeviant","download_url":"https://codeload.github.com/ndeviant/may/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229882752,"owners_count":18138884,"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","bem","browsersync","cms","es6","eslint","gulp","hot-reload","js","scss","stylelint","template","twig","webpack"],"created_at":"2024-12-17T03:13:33.883Z","updated_at":"2024-12-17T03:13:34.473Z","avatar_url":"https://github.com/ndeviant.png","language":"JavaScript","readme":"![may-starter](https://i.imgur.com/hr5WwqN.png)\n\n![Version](https://img.shields.io/github/package-json/v/ndeviant/may?style=for-the-badge)\n![Activity](https://img.shields.io/github/last-commit/ndeviant/may?style=for-the-badge)\n![Dependencies](https://img.shields.io/david/ndeviant/may?path=packages%2Fmay-tasks\u0026style=for-the-badge)\n\n![License](https://img.shields.io/github/license/ndeviant/may?style=for-the-badge)\n![Eslint](https://img.shields.io/github/package-json/dependency-version/ndeviant/may/dev/eslint?style=for-the-badge)\n![Prettier](https://img.shields.io/github/package-json/dependency-version/ndeviant/may/dev/prettier?color=%232DD\u0026style=for-the-badge)\n![Stylelint](https://img.shields.io/github/package-json/dependency-version/ndeviant/may/dev/stylelint?color=%23D2D\u0026style=for-the-badge)\n\n# May Starter\n\n\u003e `create-react-app` without react.\n\n## Features\n\n- build is designed to automate tasks in everyday front-end development\n- using the template engine [twig](https://twig.symfony.com/)\n- using the preprocessor [SCSS](https://sass-lang.com/)\n- using the bootstrap grid [Bootstrap](https://getbootstrap.com/)\n- using the transpiler [Babel](https://babeljs.io/) to support modern JavaScript (ES6) in browsers\n- using the bundler [Webpack](https://webpack.js.org/) to build JavaScript modules\n\n## Installation\n\n```sh\nnpx create-may-app my-app\ncd my-app\nnpm start\n```\n\nGet Started Immediately\nYou don’t need to install or configure tools like Gulp, Webpack or Babel.\nThey are preconfigured and hidden so that you can focus on the code.\n\nJust create a project, and you’re good to go.\n\nIf you did everything right, browser with a local server should be opened.\nThe build mode implies project optimization: image compression, autoprefixing of CSS, minification of CSS and JS files for uploading to the server.\n\n## File structure\n\n```\nmay-starter\n├── build\n├── public\n│   ├── fonts\n│   ├── media\n│   ├── images\n│   │   ├── favicons\n│   │   └── sprite.svg\n│   └── .htaccess\n├── src\n│   ├── images\n│   │   ├── favicon.{image type}\n│   │   └── svg\n│   ├── js\n│   ├── scss\n│   └── views\n│       └── data.js\n├── may.config.js\n├── package.json\n├── .eslintrc.js\n├── .gitignore\n├── .prettierrc.js\n└── .stylelintrc.js\n```\n\n- Root folder:\n  - `.eslintrc.js` — configure ESLint\n  - `.prettierrc.js` — configure Prettier\n  - `.stylelintrc.js` — configure Stylelint\n  - `.gitignore` – a ban on tracking files Git\n  - `may.config.js` — Gulp tasks settings\n- Folder `public` - Define files to be moved at the root of build folder (e.g. .htaccess).\n  - fonts: `public/assets/fonts`\n  - media files, wich will be deleted, after landing on backend: `public/assets/media`\n  - images: `public/assets/images`\n    - favicons, generated from `src/images/favicon.{img}`: `public/assets/images/favicons`\n    - svg sprite, generated from `src/images/svg/**/*.{svg}`: `public/assets/images/sprite.svg`\n  - Apache web server configuration file with settings [gzip](https://habr.com/ru/post/221849/) (lossless compression): `public/.htaccess`\n- Folder `src` - used during development:\n  - images: `src/images`\n    - favicon, generates from `src/images/favicon.{img}`, to `public/assets/images/favicons`\n    - svg sprite, generates from `src/images/svg/**/*.{svg}`, to `public/assets/images/sprite.svg`\n    - all other images are moving to build folder, which are optimized if using `build` task\n  - JS files: `src/js`\n  - SCSS files: `src/styles`\n  - Twig files: `src/views`\n    - Site pages: `src/views/pages`\n    - Data for templates – `src/views/data.js`\n- Folder `build` folder from which you run a local server for development purposes (when you run `npm run start`), or contains optimized files after `npm run build` command.\n\n## Usage guidelines\n\n- stick to the original folder and file structure\n- stick component approach to the development of sites\n  - SCSS-file of a component is imported to `src/styles/main.scss` file, JS-file is imported to `src/js/main.js`\n- from all SCSS files, only `main.scss` is compiled. Other style files are imported into it\n- pages located in the folder `src/views/pages`\n  - each page (including the main page) inherits the `src/views/layouts/default.htm` template\n  - main page: `src/views/pages/index.htm`\n  - all pages should be at the root of `pages` directory: `src/views/pages/blog/index.htm` – not allowed\n- fonts are in `public/assets/fonts` folder, use `ttf`, `woff` and `woof2` formats\n- images are in the folder `src/images`\n  - the image for generating favicons should be `src/images/favicon.[your extension]`, and have a size of at least `100px x 100px`. Favicons will be generated to `public/assets/images/favicons`, for better performance better to disable `favs` task, after you generated your favicons.\n  - icons from `src/images/svg` folder are collected in one svg sprite at `public/assets/images/sprite.svg`.\n  - pictures that are not part of the design, and will later be loaded from the CMS put in the folder `src/media`. Ex: post images, product pictures.\n- all third-party libraries are installing in the `node_modules` folder\n  - to install another, use `npm install [package_name]` command\n  - to connect library JS files, import them into JS file, for example: `javascript import $ from \"jquery\";`\n  - to connect library style files, import them into the `src/scss/vendor/[lib name].scss` (which in turn is imported into a file `src/styles/main.scss`)\n- only `main` CSS and JS files are included in the layout.\n\n## Svg sprite\n\nThe build collects all svgs from the `src/images/svg` folder into a single sprite that can be used with the `use` tag. Polyfil were added to support the syntax `\u003cuse xlink:href=\"./assets/images/sprite.svg#svg-logo\"\u003e` on ie11, for easy use, and proper caching. The Id for svg is `svg-[file name]`. Detailed information on the use of [here](https://css-tricks.com/svg-sprites-use-better-icon-fonts/).\n\n## Favicon\n\nIn the starter included auto-generation of favicons. By default, the task generates favicons to `public/assets/images/favicons` folder. This task takes a lot of time, so its recommended to turn it off in configuration file by setting it to `run: false`, after you've already created a favicons for the first time. Or just create them once with the `may-tasks favs` command (you should add this field to package.json to make it work, e.g. `'favs': 'may-tasks favs'`, `npm run favs`).\n\n## WebP \n\nWebp support is included in the starter. WebP is a graphics format developed by Google in 2010. It was created as an alternative to PNG and JPG and differs from them in much smaller size with the same image quality. Detailed information on the use of [here](https://vk.com/@vk_it-webp).\n\n## CMS\n\nStarter kit, is designed for CMS landing. Media folder for images, not to mix design images and images wich will be uploaded dynamically. Html is already splitted into chunks. Added couple of filter's to twig to land the frontend to the backend with pleasure:\n\n- `theme`: Use `theme` to specify path's for theme assets. Ex: `{{ \"assets/images/sprite.svg#svg-logo\" | theme }}`.\n- `media`: Use `media` to specify path's for media files. Reffers to the `build/media` folder by default, so you shouldn't write a full path. Ex: `{{ \"post1.jpg\" | media }}`.\n- `page`: Just set the name of html page, without extension, to create a link to it. Ex: `href=\"{{ \"blog\" | page }}\"`.\n\nYou may simply not use these filters, but I would recommend you to. Also, these filters were \"mocked\" from OctoberCMS, so this will increase the speed of your development for it. But they are also useful for any other backend, because these paths are always dynamic, and you can simply search for those filters through files and change them according to your needs.\n\n## IDE configuration\n\nIt's recommended to configure your IDE with defined linting rules. Example for VS code: [here](https://www.freecodecamp.org/news/integrating-prettier-with-eslint-and-stylelint-99e74fede33f/).\n\n## Contacts\n\n- VK: [@ndeviant](https://vk.com/ndeviant)\n- Telegram: [@ndeviant](https://t-do.ru/ndeviant)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndeviant%2Fmay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndeviant%2Fmay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndeviant%2Fmay/lists"}