├── .babelrc ├── .browserslistrc ├── .editorconfig ├── .env ├── .eslintrc.json ├── .gitattributes ├── .github └── workflows │ └── lint.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .stylelintignore ├── .stylelintrc ├── .vscode ├── extensions.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── config ├── app.js ├── env.js ├── kss.js ├── namespaces.js ├── paths.js ├── purgecss.config.js ├── rollup.config.js └── rollup.config.styleguide.js ├── docs └── Adding-icon.md ├── gulp ├── assets │ ├── gulp-error.png │ └── gulp.png ├── tasks │ ├── build.js │ ├── clear.js │ ├── copy.js │ ├── html.js │ ├── scripts.js │ ├── sprite.js │ ├── start.js │ ├── styleguide │ │ ├── build.js │ │ ├── clear.js │ │ ├── copy.js │ │ ├── generate.js │ │ ├── scripts.js │ │ ├── sprite.js │ │ ├── start.js │ │ ├── styles.js │ │ └── sync.js │ ├── styles.js │ └── sync.js └── utils │ ├── errorHandler.js │ ├── inlineCssImporter.js │ ├── logger.js │ ├── noop.js │ ├── notifier.js │ ├── skippable.js │ └── spriteStore.js ├── gulpfile.babel.js ├── package.json ├── public └── .gitkeep ├── src ├── app.scss ├── components │ └── _index.scss ├── fonts │ └── .gitkeep ├── icons │ └── .gitkeep ├── img │ └── .gitkeep ├── index.js ├── objects │ └── _index.scss └── templates │ ├── layout.html.twig │ └── pages │ └── index.html.twig ├── twig └── functions.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | >1% 2 | last 4 versions 3 | not dead 4 | Firefox ESR 5 | Explorer 11 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | PORT=3000 2 | STYLEGUIDE_PORT=3003 3 | BROWSER= 4 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@atolye15/eslint-config-base"], 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true 6 | }, 7 | "overrides": [ 8 | { 9 | "files": ["gulp/**/*.js", "config/**/*.js", "twig/**/*.js"], 10 | "rules": { 11 | "import/no-extraneous-dependencies": "off" 12 | } 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | on: 3 | push: 4 | branches: [develop, master] 5 | pull_request: 6 | branches: [develop, master] 7 | 8 | jobs: 9 | lint: 10 | name: Node ${{ matrix.node }} 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [10.x, 12.x, 14.x] 16 | 17 | steps: 18 | - name: Clone repository 19 | uses: actions/checkout@v2 20 | 21 | - name: Set Node.js version ${{ matrix.node-version }} 22 | uses: actions/setup-node@v1 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | 26 | - name: Get yarn cache directory path 27 | id: yarn-cache-dir-path 28 | run: echo "::set-output name=dir::$(yarn cache dir)" 29 | 30 | - uses: actions/cache@v2 31 | id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 32 | with: 33 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 34 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 35 | restore-keys: | 36 | ${{ runner.os }}-yarn- 37 | 38 | - name: Install dependencies 39 | run: yarn install --frozen-lockfile 40 | 41 | - name: Run lint 42 | run: yarn lint 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .DS_Store* 3 | node_modules/ 4 | bower_components/ 5 | npm-debug.log 6 | .idea 7 | .idea_modules 8 | .publish 9 | dev/ 10 | dist/ 11 | /styleguide 12 | package-lock.json 13 | yarn-error.log 14 | .env.local 15 | .env.development 16 | .env.development.local 17 | .env.production 18 | .env.production.local 19 | .env.test 20 | .env.test.local 21 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package.json 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dev/ 3 | dist/ 4 | styleguide 5 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@atolye15/stylelint-config", "stylelint-prettier/recommended"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "guillaumedoutriaux.name-that-color", // Name That Colors 4 | "esbenp.prettier-vscode", // Prettier 5 | "stylelint.vscode-stylelint", // Stylelint 6 | "dbaeumer.vscode-eslint", // Eslint 7 | "mblode.twig-language-2", // Twig Language 8 | "naumovs.color-highlight", // Color Highlight 9 | "formulahendry.auto-rename-tag", // Auto Rename Tag 10 | "formulahendry.auto-close-tag", // Auto Close Tag 11 | "editorconfig.editorconfig", // Editor Config 12 | "zignd.html-css-class-completion", // IntelliSense for CSS class names in HTML 13 | "mrmlnc.vscode-scss", // SCSS IntelliSense 14 | "christian-kohler.path-intellisense" // Path IntelliSense 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll": true 5 | }, 6 | "path-intellisense.mappings": { 7 | "@components": "${workspaceRoot}/src/components", 8 | "@objects": "${workspaceRoot}/src/objects", 9 | "@templates": "${workspaceRoot}/src/templates" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Web Starter Kit Changelog 2 | 3 | ## 4.4.0 (03.05.2018) 4 | 5 | ### New Stuff 6 | 7 | * Added `footerVendorsBlock` block including vendor javascript files in to twig layout #52 8 | * Added ability to change background color of the kss demo container #47 9 | * Added margin auto utilities and documented #34 10 | * Added background-color utilities and documented #73 11 | * `yarn-error.log` added in gitignore #56 12 | * Added ability to manage transition on global link by a scss variable #54 13 | 14 | ### Refactors 15 | 16 | * Improved Form Controls styleguide documentation #28 17 | * Removed incorrect things from styleguide documentation of Buttons #53 18 | * Removed unnecesary callback function from gulp stylegulde task #59 19 | * Updated npm packages #68 20 | * scss de vendor-extension klasörünün kaldırılması #62 21 | * Added `env` config in eslintrc #66 22 | * Improved styleguide documentation for Icons #51 23 | * Removed `font-size` property from `html` tag #58 24 | * Project colors ve backgrounds utility lerinin uncss ignore a eklenmesi #74 25 | * stylelint max-nesting-depth rule increased from 2 to 3 #71 26 | * Twig `assets` function renamed as `asset` in order to ensure synchronization between backend and frontend #72 27 | 28 | ### Fixes 29 | 30 | * Added transform to the stylegude example div element to keep fixed things inside to example container #69 31 | * Fixed wrong variable problem in `image-retina` mixin #61 32 | * Fixed the problem that when occurs production build related with uncss #70 33 | * Added `u` prefix to `flex-column-reverse` utility class #63 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 Atölye15 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Atölye15 - Web Starter Kit 2 | 3 | > ⚠️ **ATTENTION**: This project is in heavily under development! Documentation will be updated later. 4 | 5 | Web Starter Kit is a starter package designed for front-end developers of Atölye15. Its main goals are to save developers from redundant work needs to be done at every project's start and also creating consistent code bases between developers. 6 | 7 | ## Includes 8 | 9 | - Twig (HTML Templating System) 10 | - Sass (CSS extension language) 11 | - Babel & ES2015 (Javascript compiler) 12 | - Eslint 13 | - Stylelint 14 | 15 | and many more 16 | 17 | ## System Requirements 18 | 19 | - [Node.js](http://nodejs.org/) 20 | - [Yarn](https://yarnpkg.com/lang/en/) 21 | - [Git](http://git-scm.com/) 22 | 23 | ## Browser Support 24 | 25 | - Chrome 26 | - Edge 27 | - Firefox 28 | - Safari 29 | 30 | ## Features 31 | 32 | | Feature | Description | 33 | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | 34 | | Easy Initialization | You can start to code right after you've completed the initial setup. | 35 | | Sass Support | Web Starter Kit contains a SASS compiler. Basic variables, mixins and functions are ready to use. | 36 | | Performance Optimization | Images, Javascript, and CSS files are minified. | 37 | | HTML Templating Engine | Web Starter Kit uses the twig.js templating engine. | 38 | | Code Linting | Web Starter Kit contains configuration files for Stylelint and Eslint. You will find bugs and errors before they happen. | 39 | | ES2015 Support | | 40 | 41 | ## Setup 42 | 43 | ### 1. Installing Web Starter Kit 44 | 45 | You can download the latest version of Web Starter Kit [here](https://github.com/atolye15/web-starter-kit) or clone this repository by typing in the terminal 46 | 47 | ```bash 48 | git clone git@github.com:atolye15/web-starter-kit.git my-new-project 49 | ``` 50 | 51 | ### 2. Setting Up Git 52 | 53 | ```bash 54 | cd my-new-project 55 | 56 | # Remove .git folder to remove git history and initialize a new one 57 | rm -rf .git 58 | git init 59 | 60 | # Create initial commit 61 | git add -A 62 | git commit -m "Initial Commit" 63 | ``` 64 | 65 | ### 3. Installing Dependencies 66 | 67 | To download dependencies type in the terminal 68 | 69 | ```bash 70 | yarn 71 | ``` 72 | 73 | ### 4. Starting Development Environment 74 | 75 | ```bash 76 | # Starts development environment, styleguide and watch processes. 77 | yarn start 78 | ``` 79 | 80 | ### 5. Pushing Your Project to GitHub 81 | 82 | In order to define your remote address in your local repository type 83 | 84 | ```bash 85 | git remote add origin git@github.com:atolye15/[your-project-name].git 86 | ``` 87 | 88 | To push your files to your remote repo type 89 | 90 | ```bash 91 | git push origin --all 92 | ``` 93 | 94 | ## Documentation 95 | 96 | ### 1. Folder Structure 97 | 98 | ```text 99 | root 100 | ├── dev/ # In development mode files generated by the build process are stored here. 101 | ├── dist/ # In production mode files generated by the build process are stored here. 102 | ├── .vscode/ # Visual Studio Code settings are stored here. 103 | ├── gulp/ # All Gulp tasks and related files are located in this folder. 104 | │ ├── assets/ # Static assets used by Gulp tasks are located in this folder. 105 | │ ├── tasks/ # All Gulp tasks are located in this folder. 106 | │ └── utils/ # Utility functions used by Gulp tasks are located in this folder. 107 | ├── kss/ # Settings for KSS package used by Styleguide are located in this folder. 108 | ├── public/ # The public folder contains the files won't be compiled. The files is in this folder only will be copy and paste to the dist folder. 109 | ├── src/ # Files for development are located here. These files are processed by Gulp and /dev and /dist will be created 110 | │ ├── fonts/ # Font files needed for the project should be placed here to be compiled. 111 | │ ├── img/ # Image files needed for the project should be placed here. 112 | │ ├── icons/ # SVG files needed for the project should be placed here to be compiled. 113 | │ ├── js/ # Javascript files used in the project should be placed here to be compiled. 114 | │ ├── scss/ # Scss files are located in this folder. 115 | │ ├── abstracts/ 116 | │ └── mixins/ 117 | │ ├── base/ 118 | │ └── utilities/ 119 | │ ├── components/ 120 | │ ├── objects/ 121 | │ └── libs/ 122 | │ 123 | ├── twig/ # Twig files are located in this folder. 124 | │ ├── pages/ 125 | │ └── partials/ 126 | ├── .babelrc 127 | ├── .browserlistrc 128 | ├── .editorconfig 129 | ├── .eslintrc.json 130 | ├── .gitattributes 131 | ├── .gitignore 132 | ├── .prettierignore 133 | ├── .prettierrc 134 | ├── .stylelintignore 135 | ├── .stylelintrc 136 | ├── .archive.sh 137 | ├── CHANGELOG.md 138 | ├── config.js 139 | ├── gulpfile.babel.js 140 | ├── package.json 141 | ├── README.md 142 | ├── yarn.lock 143 | ``` 144 | 145 | ### 2. Commands 146 | 147 | You can run commands by typing, 148 | 149 | ```bash 150 | yarn [command] 151 | ``` 152 | 153 | | Command | Description | 154 | | :--------- | ----------------------------------------------- | 155 | | lint | runs lint:js and lint:css commands. | 156 | | lint:js | runs eslint for javascript files | 157 | | lint:css | runs stylint for scss files | 158 | | format | runs format:js and format:css commands | 159 | | format:js | runs prettier for javascript files | 160 | | format:css | runs prettier for scss files | 161 | | build | builds project in production mode | 162 | | start | builds project and then runs watch processes | 163 | | styleguide | builds styleguide and then runs watch processes | 164 | 165 | ### 3. Example Use Cases 166 | 167 | - [Adding icons](docs/Adding-icon.md) 168 | 169 | ## License 170 | 171 | Web Starter Kit is [MIT licensed.](/LICENSE) 172 | -------------------------------------------------------------------------------- /config/app.js: -------------------------------------------------------------------------------- 1 | import paths from './paths'; 2 | 3 | const appConfig = { 4 | info: { 5 | name: 'Project Name', 6 | version: '0.1.0', 7 | }, 8 | removeUnusedCSS: true, 9 | spriteFileBaseName: 'sprite', 10 | entry: { 11 | styles: [`${paths.src}/app.scss`], 12 | scripts: [`${paths.src}/index.js`], 13 | pages: `${paths.src}/templates/pages/**/*.html.twig`, 14 | }, 15 | }; 16 | 17 | export default appConfig; 18 | -------------------------------------------------------------------------------- /config/env.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import dotenv from 'dotenv'; 3 | import dotenvExpand from 'dotenv-expand'; 4 | 5 | import paths from './paths'; 6 | 7 | const NODE_ENV = process.env.NODE_ENV || 'development'; 8 | 9 | const dotenvFiles = [ 10 | `.env.${NODE_ENV}.local`, 11 | `.env.${NODE_ENV}`, 12 | NODE_ENV !== 'test' && '.env.local', 13 | '.env', 14 | ].filter(Boolean); 15 | 16 | dotenvFiles.forEach((dotenvFile) => { 17 | if (fs.existsSync(dotenvFile)) { 18 | dotenvExpand(dotenv.config({ path: dotenvFile })); 19 | } 20 | }); 21 | 22 | export const isProduction = NODE_ENV === 'production'; 23 | 24 | export const envPath = isProduction ? paths.dist : paths.dev; 25 | 26 | export default NODE_ENV; 27 | -------------------------------------------------------------------------------- /config/kss.js: -------------------------------------------------------------------------------- 1 | import paths from './paths'; 2 | 3 | export default { 4 | source: [`${paths.src}/`], 5 | destination: `${paths.styleguide.dist}`, 6 | custom: [], 7 | extend: `${paths.styleguide.extend}`, 8 | // The css and js paths are URLs, like '/misc/jquery.js'. 9 | // The following paths are relative to the generated style guide. 10 | css: [`${paths.styleguide.assets.styles}/app.css`], 11 | js: [`${paths.styleguide.assets.scripts}/app.js`], 12 | verbose: false, 13 | builder: 'node_modules/@atolye15/kss-node-twig-builder', 14 | homepage: 'README.md', 15 | title: 'Atölye Style Guide', 16 | namespace: [], 17 | // This following option is a special option for `@atolye15/kss-node-twig-builder` 18 | // May not work with other builders 19 | // Example: 20 | // [ 21 | // { 22 | // name: 'function_name', 23 | // func: () => {} 24 | // } 25 | // ] 26 | functions: [], 27 | }; 28 | -------------------------------------------------------------------------------- /config/namespaces.js: -------------------------------------------------------------------------------- 1 | import paths from './paths'; 2 | 3 | export default { 4 | components: `${paths.src}/components`, 5 | objects: `${paths.src}/objects`, 6 | templates: `${paths.src}/templates`, 7 | }; 8 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | export default { 2 | src: 'src', 3 | dev: 'dev', 4 | img: 'src/img', 5 | icons: 'src/icons', 6 | fonts: 'src/fonts', 7 | dist: 'dist', 8 | public: 'public', 9 | assets: { 10 | js: 'js', 11 | css: 'css', 12 | img: 'img', 13 | fonts: 'css/fonts', 14 | }, 15 | styleguide: { 16 | dist: 'styleguide', 17 | extend: 'kss/extend', 18 | assets: { 19 | scripts: 'assets/js', 20 | styles: 'assets/css', 21 | images: 'assets/img', 22 | fonts: 'assets/css/fonts', 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /config/purgecss.config.js: -------------------------------------------------------------------------------- 1 | import paths from './paths'; 2 | 3 | export default { 4 | content: [`${paths.dist}/*.html`], 5 | keyframes: true, 6 | variables: true, 7 | whitelistPatterns: [/is-[\S]*/g, /has-[\S]*/g], 8 | // Allow to use special characters in class names like `@, :, %` 9 | defaultExtractor: (content) => content.match(/[\w-/:%@]+(? tags 15 | sourcemap: !isProduction, 16 | name: 'App', 17 | }, 18 | plugins: [ 19 | resolve(), 20 | commonjs(), 21 | babel({ 22 | exclude: 'node_modules/**', // only transpile our source code 23 | }), 24 | isProduction && terser(), 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /config/rollup.config.styleguide.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve'; 2 | import babel from 'rollup-plugin-babel'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | 5 | import appConfig from './app'; 6 | import paths from './paths'; 7 | 8 | export default { 9 | input: appConfig.entry.scripts, 10 | output: { 11 | file: `${paths.styleguide.dist}/${paths.styleguide.assets.scripts}/app.js`, 12 | format: 'iife', // immediately-invoked function expression — suitable for 27 | {% block footerJavascripts %}{% endblock %} 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/templates/pages/index.html.twig: -------------------------------------------------------------------------------- 1 | {% extends "../layout.html.twig" %} 2 | 3 | {% block body %} 4 |

Hello, Boys!

5 | {% endblock %} 6 | -------------------------------------------------------------------------------- /twig/functions.js: -------------------------------------------------------------------------------- 1 | import cx from 'classnames'; 2 | 3 | import { isProduction } from '../config/env'; 4 | 5 | export default [ 6 | { 7 | name: 'html_classes', 8 | func: (...args) => 9 | cx(...args) 10 | // remove "_keys" which added by Twig 11 | .split(' ') 12 | .filter((k) => k !== '_keys') 13 | .join(' '), 14 | }, 15 | { 16 | name: 'html_attributes', 17 | func: (obj) => 18 | Object.keys(obj) 19 | .filter((k) => k !== '_keys') // remove "_keys" property which added by Twig 20 | .reduce((acc, cur) => { 21 | if (typeof obj[cur] === 'boolean') { 22 | return obj[cur] ? `${acc} ${cur}` : `${acc}`; 23 | } 24 | return `${acc} ${cur}="${obj[cur]}"`; 25 | }, '') 26 | .trim(), 27 | }, 28 | { 29 | name: 'is_production', 30 | func: () => isProduction, 31 | }, 32 | ]; 33 | --------------------------------------------------------------------------------