├── LICENSE ├── README.md ├── index.js ├── package.json ├── template-react-ts ├── .eslintrc.json ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── _gitignore ├── package.json ├── parcel.d.ts ├── public │ ├── index.html │ └── robots.txt ├── src │ ├── App.tsx │ ├── index.tsx │ └── styles │ │ ├── abstracts │ │ ├── _functions.scss │ │ └── _variables.scss │ │ ├── app.module.scss │ │ ├── base │ │ ├── _reset.scss │ │ └── _typography.scss │ │ └── index.scss └── tsconfig.json ├── template-react ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── _gitignore ├── package.json ├── public │ ├── index.html │ └── robots.txt └── src │ ├── App.js │ ├── index.js │ └── styles │ ├── abstracts │ ├── _functions.scss │ └── _variables.scss │ ├── app.module.scss │ ├── base │ ├── _reset.scss │ └── _typography.scss │ └── index.scss ├── template-vanilla-ts ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── .tsconfig.json ├── README.md ├── _gitignore ├── package.json └── src │ ├── index.html │ ├── index.ts │ ├── robots.txt │ └── styles │ ├── _app.scss │ ├── abstracts │ ├── _functions.scss │ └── _variables.scss │ ├── base │ ├── _reset.scss │ └── _typography.scss │ └── index.scss └── template-vanilla ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── _gitignore ├── package.json └── src ├── index.html ├── index.js ├── robots.txt └── styles ├── _app.scss ├── abstracts ├── _functions.scss └── _variables.scss ├── base ├── _reset.scss └── _typography.scss └── index.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚡️ Swifty Config 2 | 3 | > With one command, setup your Frontend project with additional configuration out of the box. 4 | 5 | # What does this do? 6 | See this as create-react-app with extra, I know you are tired from having to setup prettier, Eslint e.t.c all the time, or you are tired of doing the same thing all over and over again, I created this to help, personally as a side project to help myself, but then you might need it. 7 | 8 | > **Compatibility Note:** 9 | > ⚡️ Swifty Config requires [Node.js](https://nodejs.org/en/) version >=14.6.0. Some other in this project may request higher Node.js version to work, follow the insturctions to upgrade your package manager when you see the error or warning about it. 10 | 11 | ## Using ⚡️ Swifty Config for the first time. 12 | 13 | With NPX: 14 | 15 | ```bash 16 | $ npx create-swifty-config 17 | ``` 18 | 19 | With NPM: 20 | 21 | ```bash 22 | $ npm create swifty-config 23 | ``` 24 | 25 | With Yarn: 26 | 27 | ```bash 28 | $ yarn create swifty-config 29 | ``` 30 | 31 | Then follow the prompts to setup the project! 32 | 33 | ## Currently avaliable template include: 34 | 35 | - `vanilla` 36 | - `vanilla-ts` 37 | - `react` 38 | - `react-ts` 39 | 40 | This will be updated with more templates. 41 | 42 | You can use `.` for the project name to scaffold in the current directory. 43 | 44 | 45 | ## What more can you do? 46 | 47 | If you love this project and the setup, it will be okay to give this project a star on [Github](https://github.com/DeveloperAspire/swifty-config). and share with friends as this will help make the project more avaliable and popular and yeah, helps boost my little ego 🧑‍💻 48 | 49 | ## What more can you expect? 50 | 51 | More frameworks and templates will be added and also more configurations and also I will be improving this to be more world classish. 52 | 53 | ## Contributions?? 54 | 55 | Coming soon!!! Cause I need your help to make it better!. 56 | 57 | Created by [Franklin Okolie](https://github.com/DeveloperAspire) 58 | 59 | ## ⚖️ Licence 60 | 61 | MIT (c) [Franklin Okolie](https://github.com/DeveloperAspire). 62 | 63 | 64 | 71 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // @ts-check 4 | import fs from "fs"; 5 | import path from "path"; 6 | import { fileURLToPath } from "url"; 7 | import minimist from "minimist"; 8 | import prompts from "prompts"; 9 | import { 10 | blue, 11 | cyan, 12 | green, 13 | lightRed, 14 | magenta, 15 | red, 16 | reset, 17 | yellow, 18 | } from "kolorist"; 19 | 20 | // Avoids autoconversion to number of the project name by defining that the args 21 | // non associated with an option ( _ ) needs to be parsed as a string. See #4606 22 | const argv = minimist(process.argv.slice(2), { string: ["_"] }); 23 | const cwd = process.cwd(); 24 | 25 | const FRAMEWORKS = [ 26 | { 27 | name: "vanilla", 28 | color: yellow, 29 | variants: [ 30 | { 31 | name: "vanilla", 32 | display: "JavaScript", 33 | color: yellow, 34 | }, 35 | { 36 | name: "vanilla-ts", 37 | display: "TypeScript", 38 | color: blue, 39 | }, 40 | ], 41 | }, 42 | 43 | { 44 | name: "react", 45 | color: cyan, 46 | variants: [ 47 | { 48 | name: "react", 49 | display: "JavaScript", 50 | color: yellow, 51 | }, 52 | { 53 | name: "react-ts", 54 | display: "TypeScript", 55 | color: blue, 56 | }, 57 | ], 58 | }, 59 | ]; 60 | 61 | const TEMPLATES = FRAMEWORKS.map( 62 | (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name] 63 | ).reduce((a, b) => a.concat(b), []); 64 | 65 | const renameFiles = { 66 | _gitignore: ".gitignore", 67 | }; 68 | 69 | async function init() { 70 | let targetDir = formatTargetDir(argv._[0]); 71 | let template = argv.template || argv.t; 72 | 73 | const defaultTargetDir = "swift-project"; 74 | const getProjectName = () => 75 | targetDir === "." ? path.basename(path.resolve()) : targetDir; 76 | 77 | let result = {}; 78 | 79 | try { 80 | result = await prompts( 81 | [ 82 | { 83 | type: targetDir ? null : "text", 84 | name: "projectName", 85 | message: reset("Project name:"), 86 | initial: defaultTargetDir, 87 | onState: (state) => { 88 | targetDir = formatTargetDir(state.value) || defaultTargetDir; 89 | }, 90 | }, 91 | { 92 | type: () => 93 | !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : "confirm", 94 | name: "overwrite", 95 | message: () => 96 | (targetDir === "." 97 | ? "Current directory" 98 | : `Target directory "${targetDir}"`) + 99 | ` is not empty. Remove existing files and continue?`, 100 | }, 101 | { 102 | type: (_, { overwrite } = {}) => { 103 | if (overwrite === false) { 104 | throw new Error(red("✖") + " Operation cancelled"); 105 | } 106 | return null; 107 | }, 108 | name: "overwriteChecker", 109 | }, 110 | { 111 | type: () => (isValidPackageName(getProjectName()) ? null : "text"), 112 | name: "packageName", 113 | message: reset("Package name:"), 114 | initial: () => toValidPackageName(getProjectName()), 115 | validate: (dir) => 116 | isValidPackageName(dir) || "Invalid package.json name", 117 | }, 118 | { 119 | type: template && TEMPLATES.includes(template) ? null : "select", 120 | name: "framework", 121 | message: 122 | typeof template === "string" && !TEMPLATES.includes(template) 123 | ? reset( 124 | `"${template}" isn't a valid template. Please choose from below: ` 125 | ) 126 | : reset("Select a framework:"), 127 | initial: 0, 128 | choices: FRAMEWORKS.map((framework) => { 129 | const frameworkColor = framework.color; 130 | return { 131 | title: frameworkColor(framework.name), 132 | value: framework, 133 | }; 134 | }), 135 | }, 136 | { 137 | type: (framework) => 138 | framework && framework.variants ? "select" : null, 139 | name: "variant", 140 | message: reset("Select a variant:"), 141 | // @ts-ignore 142 | choices: (framework) => 143 | framework.variants.map((variant) => { 144 | const variantColor = variant.color; 145 | return { 146 | title: variantColor(variant.name), 147 | value: variant.name, 148 | }; 149 | }), 150 | }, 151 | ], 152 | { 153 | onCancel: () => { 154 | throw new Error(red("✖") + " Operation cancelled"); 155 | }, 156 | } 157 | ); 158 | } catch (cancelled) { 159 | console.log(cancelled.message); 160 | return; 161 | } 162 | 163 | // user choice associated with prompts 164 | const { framework, overwrite, packageName, variant } = result; 165 | 166 | const root = path.join(cwd, targetDir); 167 | 168 | if (overwrite) { 169 | emptyDir(root); 170 | } else if (!fs.existsSync(root)) { 171 | fs.mkdirSync(root, { recursive: true }); 172 | } 173 | 174 | // determine template 175 | template = variant || framework || template; 176 | 177 | // console.log(`\nScaffolding project in ${root}...`) 178 | console.log(`\nScaffolding project in ${cyan(root)}...`); 179 | 180 | const templateDir = path.resolve( 181 | fileURLToPath(import.meta.url), 182 | "..", 183 | `template-${template}` 184 | ); 185 | 186 | const write = (file, content) => { 187 | const targetPath = renameFiles[file] 188 | ? path.join(root, renameFiles[file]) 189 | : path.join(root, file); 190 | if (content) { 191 | fs.writeFileSync(targetPath, content); 192 | } else { 193 | copy(path.join(templateDir, file), targetPath); 194 | } 195 | }; 196 | 197 | const files = fs.readdirSync(templateDir); 198 | for (const file of files.filter((f) => f !== "package.json")) { 199 | write(file); 200 | } 201 | 202 | const pkg = JSON.parse( 203 | fs.readFileSync(path.join(templateDir, `package.json`), "utf-8") 204 | ); 205 | 206 | pkg.name = packageName || getProjectName(); 207 | 208 | write("package.json", JSON.stringify(pkg, null, 2)); 209 | 210 | const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent); 211 | const pkgManager = pkgInfo ? pkgInfo.name : "npm"; 212 | 213 | console.log(`\nDone. Now run the following commands:\n`); 214 | if (root !== cwd) { 215 | console.log(` ${blue("cd")} ${path.relative(cwd, root)}\n`); 216 | } 217 | switch (pkgManager) { 218 | case "yarn": 219 | console.log(blue(" yarn")); 220 | console.log(" Install the dependencies 📔\n"); 221 | console.log(blue(" yarn dev")); 222 | console.log(" Start development server 🚀\n"); 223 | console.log(`\n To build for Production, run:\n`); 224 | console.log(blue(" yarn build")); 225 | console.log(" Bundles the app for production 📦\n"); 226 | console.log(blue(" git init")); 227 | console.log(" Initialize a git repository on the project 🛠️\n"); 228 | break; 229 | default: 230 | console.log(blue(` ${pkgManager} install`)); 231 | console.log(" Install the dependencies 📔\n"); 232 | console.log(blue(` ${pkgManager} run dev`)); 233 | console.log(" Start development server 🚀 "); 234 | console.log(`\n To build for production, run:\n`); 235 | console.log(blue(` ${pkgManager} run build`)); 236 | console.log(" Bundles the app for production 📦\n"); 237 | console.log(blue(" git init")); 238 | console.log(" Initialize a git repository on the project 🛠️\n"); 239 | console.log(cyan(" Happy Coding ⚡️")); 240 | break; 241 | } 242 | console.log(); 243 | } 244 | 245 | /** 246 | * @param {string | undefined} targetDir 247 | */ 248 | function formatTargetDir(targetDir) { 249 | return targetDir?.trim().replace(/\/+$/g, ""); 250 | } 251 | 252 | function copy(src, dest) { 253 | const stat = fs.statSync(src); 254 | if (stat.isDirectory()) { 255 | copyDir(src, dest); 256 | } else { 257 | fs.copyFileSync(src, dest); 258 | } 259 | } 260 | 261 | /** 262 | * @param {string} projectName 263 | */ 264 | function isValidPackageName(projectName) { 265 | return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test( 266 | projectName 267 | ); 268 | } 269 | 270 | /** 271 | * @param {string} projectName 272 | */ 273 | function toValidPackageName(projectName) { 274 | return projectName 275 | .trim() 276 | .toLowerCase() 277 | .replace(/\s+/g, "-") 278 | .replace(/^[._]/, "") 279 | .replace(/[^a-z0-9-~]+/g, "-"); 280 | } 281 | 282 | /** 283 | * @param {string} srcDir 284 | * @param {string} destDir 285 | */ 286 | function copyDir(srcDir, destDir) { 287 | fs.mkdirSync(destDir, { recursive: true }); 288 | for (const file of fs.readdirSync(srcDir)) { 289 | const srcFile = path.resolve(srcDir, file); 290 | const destFile = path.resolve(destDir, file); 291 | copy(srcFile, destFile); 292 | } 293 | } 294 | 295 | /** 296 | * @param {string} path 297 | */ 298 | function isEmpty(path) { 299 | const files = fs.readdirSync(path); 300 | return files.length === 0 || (files.length === 1 && files[0] === ".git"); 301 | } 302 | 303 | /** 304 | * @param {string} dir 305 | */ 306 | function emptyDir(dir) { 307 | if (!fs.existsSync(dir)) { 308 | return; 309 | } 310 | for (const file of fs.readdirSync(dir)) { 311 | fs.rmSync(path.resolve(dir, file), { recursive: true, force: true }); 312 | } 313 | } 314 | 315 | /** 316 | * @param {string | undefined} userAgent process.env.npm_config_user_agent 317 | * @returns object | undefined 318 | */ 319 | function pkgFromUserAgent(userAgent) { 320 | if (!userAgent) return undefined; 321 | const pkgSpec = userAgent.split(" ")[0]; 322 | const pkgSpecArr = pkgSpec.split("/"); 323 | return { 324 | name: pkgSpecArr[0], 325 | version: pkgSpecArr[1], 326 | }; 327 | } 328 | 329 | init().catch((e) => { 330 | console.error(e); 331 | }); 332 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-swifty-config", 3 | "version": "1.0.8", 4 | "type": "module", 5 | "license": "MIT", 6 | "author": "Franklin Okolie", 7 | "bin": { 8 | "create-swifty-config": "index.js", 9 | "csc": "index.js" 10 | }, 11 | "files": [ 12 | "index.js", 13 | "template-*" 14 | ], 15 | "main": "index.js", 16 | "engines": { 17 | "node": ">=14.6.0" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/DeveloperAspire/swifty-config.git" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/DeveloperAspire/swifty-config/issues" 25 | }, 26 | "homepage": "https://github.com/DeveloperAspire/swifty-config#readme", 27 | "dependencies": { 28 | "kolorist": "^1.5.1", 29 | "minimist": "^1.2.6", 30 | "prompts": "^2.4.2" 31 | } 32 | } -------------------------------------------------------------------------------- /template-react-ts/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:import/errors", 5 | "plugin:react/recommended", 6 | "plugin:jsx-a11y/recommended", 7 | "plugin:react-hooks/recommended", 8 | "plugin:@typescript-eslint/recommended", 9 | "prettier" 10 | ], 11 | "rules": { 12 | "react/prop-types": 0, 13 | "react/react-in-jsx-scope": 0 14 | }, 15 | "parser": "@typescript-eslint/parser", 16 | "plugins": [ 17 | "react", 18 | "import", 19 | "jsx-a11y", 20 | "react-hooks", 21 | "@typescript-eslint" 22 | ], 23 | "parserOptions": { 24 | "ecmaVersion": 2022, 25 | "sourceType": "module", 26 | "ecmaFeatures": { 27 | "jsx": true 28 | } 29 | }, 30 | "env": { 31 | "node": true, 32 | "browser": true, 33 | "es6": true 34 | }, 35 | "settings": { 36 | "react": { 37 | "version": "detect" 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /template-react-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /template-react-ts/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard", 4 | "stylelint-config-prettier", 5 | "stylelint-config-standard-scss", 6 | "stylelint-config-prettier-scss" 7 | ], 8 | "plugins": ["stylelint-scss"], 9 | "rules": { 10 | "color-no-invalid-hex": true, 11 | "font-family-no-duplicate-names": true, 12 | "string-no-newline": true, 13 | "unit-no-unknown": true, 14 | "property-no-unknown": true, 15 | "declaration-block-no-duplicate-properties": true, 16 | "declaration-block-no-shorthand-property-overrides": true, 17 | "block-no-empty": true, 18 | "selector-pseudo-class-no-unknown": true, 19 | "selector-pseudo-element-no-unknown": true, 20 | "selector-type-no-unknown": true, 21 | "comment-no-empty": true, 22 | "length-zero-no-unit": true, 23 | "unit-allowed-list": ["rem", "px", "%", "deg", "vh"] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /template-react-ts/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with ⚡️ Swifty Config 2 | 3 | This project was bootstrapped with 🛠️ [⚡️ Swift Config](https://github.com/DeveloperAspire/swifty-config). 4 | 5 | ## Commands to execute. 6 | 7 | In the project directory, you can run the following commands: 8 | 9 | ### `yarn dev` 10 | 11 | Runs the app in the development mode 🚀.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when changes are made to any file in the application.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `yarn build` 18 | 19 | Builds the app for production to the `dist` folder.\ 20 | It correctly bundles the application in production mode, and optimizes the build for the best performance 📦. 21 | 22 | The build is minified and the filenames include the hashes.\ 23 | Your app is ready to be deployed! 24 | 25 | ## What more can you do? 26 | 27 | If you love this project and the setup, it will be okay to give this project a star on [Github](https://github.com/DeveloperAspire/swifty-config). and share with friends as this will help make the project more avaliable and popular and yeah, helps boost my little ego 🧑‍💻 28 | 29 | ## What more can you expect? 30 | 31 | More frameworks and templates will be added and also more configurations and also I will be improving this to be more world classish. 32 | 33 | Created by [Franklin Okolie](https://github.com/DeveloperAspire) 34 | -------------------------------------------------------------------------------- /template-react-ts/_gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .parcel-cache/ 3 | dist/ -------------------------------------------------------------------------------- /template-react-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-react-ts", 3 | "version": "1.0.0", 4 | "source": "public/index.html", 5 | "scripts": { 6 | "dev": "parcel --port 3000", 7 | "build": "parcel build", 8 | "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"", 9 | "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"", 10 | "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet", 11 | "lint:style": "stylelint \"src/**/*.{scss,css}\"" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@parcel/compressor-raw": "latest", 18 | "@parcel/transformer-sass": "latest", 19 | "@parcel/transformer-typescript-tsc": "^2.6.0", 20 | "@types/react": "^18.0.12", 21 | "@types/react-dom": "^18.0.5", 22 | "@typescript-eslint/eslint-plugin": "^5.27.1", 23 | "@typescript-eslint/parser": "^5.27.1", 24 | "eslint": "^8.17.0", 25 | "eslint-config-prettier": "^8.5.0", 26 | "eslint-plugin-import": "^2.26.0", 27 | "eslint-plugin-jsx-a11y": "^6.5.1", 28 | "eslint-plugin-react": "^7.30.0", 29 | "eslint-plugin-react-hooks": "^4.5.0", 30 | "parcel": "latest", 31 | "prettier": "^2.6.2", 32 | "process": "^0.11.10", 33 | "stylelint": "^14.9.0", 34 | "stylelint-config-prettier": "^9.0.3", 35 | "stylelint-config-prettier-scss": "^0.0.1", 36 | "stylelint-config-standard": "^26.0.0", 37 | "stylelint-config-standard-scss": "^4.0.0", 38 | "stylelint-scss": "^4.2.0", 39 | "typescript": "^4.7.3" 40 | }, 41 | "dependencies": { 42 | "react": "^18.1.0", 43 | "react-dom": "^18.1.0" 44 | }, 45 | "browserslist": "> 0.5%, last 2 versions, not dead" 46 | } 47 | -------------------------------------------------------------------------------- /template-react-ts/parcel.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.module.scss" { 2 | const value: Record; 3 | export default value; 4 | } 5 | declare module "*.module.css" { 6 | const value: Record; 7 | export default value; 8 | } 9 | declare module "*.sass" { 10 | const value: Record; 11 | export default value; 12 | } 13 | declare module "*.jpg"; 14 | declare module "*.png"; 15 | declare module "*.jpeg"; 16 | declare module "*.svg"; 17 | -------------------------------------------------------------------------------- /template-react-ts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | Swifty Config 16 | 17 | 18 | 19 |
20 | Not Rendered 21 |

React Config

22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /template-react-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /template-react-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "../src/styles/app.module.scss"; 3 | 4 | const App = () => { 5 | return ( 6 |
7 |
8 |

⚡️ Swifty Config

9 |

10 | A Frontend project configuration tool 🛠️. 11 |

12 |

13 | With one command, setup your Frontend project with additional 14 | configuration out of the box. 15 |

16 |
17 |
18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /template-react-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | // eslint-disable-next-line import/no-unresolved 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("app") as HTMLElement); 7 | 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /template-react-ts/src/styles/abstracts/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @function to-rem($size) { 4 | $rem-size: math.div($size, 16px); 5 | @return #{$rem-size}rem; 6 | } 7 | -------------------------------------------------------------------------------- /template-react-ts/src/styles/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable color-function-notation */ 2 | /* stylelint-disable alpha-value-notation */ 3 | $bg-color: #282c34; 4 | /* stylelint-disable-next-line value-keyword-case */ 5 | $font: "Mulish", sans-serif; 6 | $bg-gradient: linear-gradient( 7 | 90deg, 8 | rgba(2, 0, 36, 1) 0%, 9 | rgba(48, 43, 47, 1) 0%, 10 | rgba(104, 94, 61, 1) 0%, 11 | rgba(233, 92, 227, 1) 0%, 12 | rgba(50, 93, 220, 1) 38%, 13 | rgba(0, 255, 248, 1) 75% 14 | ); 15 | -------------------------------------------------------------------------------- /template-react-ts/src/styles/app.module.scss: -------------------------------------------------------------------------------- 1 | @import "./base/typography"; 2 | @import "./abstracts/functions"; 3 | @import "./abstracts/variables"; 4 | 5 | .container { 6 | background-color: inherit; 7 | color: white; 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | 13 | &__heading { 14 | @include heading; 15 | 16 | margin: to-rem(20px) 0; 17 | background-image: $bg-gradient; 18 | background-clip: text; 19 | -webkit-background-clip: text; 20 | color: transparent; 21 | } 22 | 23 | &__text { 24 | @include text; 25 | } 26 | 27 | &__content { 28 | text-align: center; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /template-react-ts/src/styles/base/_reset.scss: -------------------------------------------------------------------------------- 1 | @import "../abstracts/variables"; 2 | 3 | :root { 4 | font-size: 16px; 5 | } 6 | 7 | /* Box sizing rules */ 8 | 9 | *, 10 | *::before, 11 | *::after { 12 | box-sizing: border-box; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | /* Set core body defaults */ 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | 22 | body { 23 | min-height: 100vh; 24 | text-rendering: optimizespeed; 25 | line-height: 1.5; 26 | background-color: $bg-color; 27 | -webkit-font-smoothing: antialiased; 28 | -moz-osx-font-smoothing: grayscale; 29 | font-family: $font; 30 | scroll-behavior: smooth; 31 | } 32 | 33 | main { 34 | display: block; 35 | } 36 | 37 | hr { 38 | box-sizing: content-box; 39 | height: 0; 40 | overflow: visible; 41 | } 42 | 43 | a { 44 | background-color: transparent; 45 | text-decoration: none; 46 | } 47 | 48 | abbr[title] { 49 | border-bottom: none; 50 | text-decoration: underline; 51 | } 52 | 53 | b, 54 | strong { 55 | font-weight: bolder; 56 | } 57 | 58 | small { 59 | font-size: 80%; 60 | } 61 | 62 | sub, 63 | sup { 64 | font-size: 75%; 65 | line-height: 0; 66 | position: relative; 67 | vertical-align: baseline; 68 | } 69 | 70 | sub { 71 | bottom: -0.25rem; 72 | } 73 | 74 | sup { 75 | top: -0.5rem; 76 | } 77 | 78 | img { 79 | border-style: none; 80 | display: block; 81 | border: none; 82 | outline: none; 83 | max-width: 100%; 84 | height: 100%; 85 | } 86 | 87 | button, 88 | input, 89 | optgroup, 90 | select, 91 | textarea { 92 | margin: 0; 93 | outline: none; 94 | } 95 | 96 | input, 97 | button, 98 | textarea, 99 | select { 100 | font-family: inherit; 101 | } 102 | 103 | button, 104 | input { 105 | /* 1 */ 106 | overflow: visible; 107 | } 108 | 109 | button, 110 | select { 111 | /* 1 */ 112 | text-transform: none; 113 | } 114 | 115 | button, 116 | [type="button"], 117 | [type="reset"], 118 | [type="submit"] { 119 | /* stylelint-disable-next-line property-no-vendor-prefix */ 120 | -webkit-appearance: button; 121 | } 122 | 123 | button::-moz-focus-inner, 124 | [type="button"]::-moz-focus-inner, 125 | [type="reset"]::-moz-focus-inner, 126 | [type="submit"]::-moz-focus-inner { 127 | border-style: none; 128 | padding: 0; 129 | } 130 | 131 | // button:-moz-focusring, 132 | // [type="button"]:-moz-focusring, 133 | // [type="reset"]:-moz-focusring, 134 | // [type="submit"]:-moz-focusring { 135 | // outline: 1px dotted ButtonText; 136 | // } 137 | 138 | [type="number"]::-webkit-inner-spin-button, 139 | [type="number"]::-webkit-outer-spin-button { 140 | /* stylelint-disable-next-line property-no-vendor-prefix */ 141 | -webkit-appearance: none; 142 | } 143 | 144 | [type="number"] { 145 | /* stylelint-disable-next-line property-no-vendor-prefix */ 146 | -moz-appearance: textfield; 147 | } 148 | 149 | fieldset { 150 | padding: 0.35rem 0.75rem 0.625rem; 151 | } 152 | 153 | legend { 154 | box-sizing: border-box; 155 | color: inherit; 156 | display: table; 157 | max-width: 100%; 158 | padding: 0; 159 | white-space: normal; 160 | } 161 | 162 | progress { 163 | vertical-align: baseline; 164 | } 165 | 166 | textarea { 167 | overflow: auto; 168 | } 169 | 170 | [type="checkbox"], 171 | [type="radio"], 172 | [type="date"] { 173 | box-sizing: border-box; 174 | padding: 0; 175 | } 176 | 177 | [type="number"]::-webkit-outer-spin-button { 178 | height: auto; 179 | } 180 | 181 | [type="search"] { 182 | /* stylelint-disable-next-line property-no-vendor-prefix */ 183 | -webkit-appearance: textfield; 184 | outline-offset: -2px; 185 | 186 | &::-webkit-search-cancel-button { 187 | /* Remove default */ 188 | /* stylelint-disable-next-line property-no-vendor-prefix */ 189 | -webkit-appearance: none; 190 | } 191 | } 192 | 193 | [type="search"]::-webkit-search-decoration { 194 | /* stylelint-disable-next-line property-no-vendor-prefix */ 195 | -webkit-appearance: none; 196 | } 197 | 198 | ::-webkit-file-upload-button { 199 | /* stylelint-disable-next-line property-no-vendor-prefix */ 200 | -webkit-appearance: button; 201 | font: inherit; 202 | } 203 | 204 | details { 205 | display: block; 206 | } 207 | 208 | summary { 209 | display: list-item; 210 | } 211 | 212 | template { 213 | display: none; 214 | } 215 | 216 | [hidden] { 217 | display: none; 218 | } 219 | 220 | /* Remove default margin */ 221 | body, 222 | h1, 223 | h2, 224 | h3, 225 | h4, 226 | h5, 227 | h6, 228 | p, 229 | ul, 230 | ol, 231 | figure, 232 | blockquote, 233 | dl, 234 | dd { 235 | margin: 0; 236 | padding: 0; 237 | } 238 | 239 | p { 240 | font-family: $font; 241 | display: block; 242 | margin-block-start: 0; 243 | margin-block-end: 0; 244 | } 245 | 246 | h1, 247 | h2, 248 | h3, 249 | h4, 250 | h5, 251 | h6 { 252 | padding: 0; 253 | font-family: $font; 254 | } 255 | 256 | /* Remove list styles on ul, ol */ 257 | ul, 258 | ol, 259 | li { 260 | list-style: none; 261 | padding: 0; 262 | } 263 | 264 | /* Blur images when they have no alt attribute */ 265 | img:not([alt]) { 266 | filter: blur(10px); 267 | } 268 | 269 | table { 270 | width: 100%; 271 | table-layout: fixed; 272 | border-collapse: collapse; 273 | border: 1px solid; 274 | } 275 | 276 | button { 277 | background-color: transparent; 278 | border: none; 279 | cursor: pointer; 280 | padding: 0; 281 | } 282 | 283 | button:focus, 284 | button:hover { 285 | outline: none; 286 | } 287 | -------------------------------------------------------------------------------- /template-react-ts/src/styles/base/_typography.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable-next-line import-notation */ 2 | // @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600&display=swap"); 3 | 4 | @mixin heading { 5 | font-size: to-rem(90px); 6 | } 7 | 8 | @mixin text { 9 | font-size: to-rem(20px); 10 | } 11 | -------------------------------------------------------------------------------- /template-react-ts/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | // Imported all the styles 2 | 3 | @import "./abstracts/variables", "./abstracts/functions"; 4 | 5 | @import "./base/typography", "./base/reset"; 6 | -------------------------------------------------------------------------------- /template-react-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src","*.d.ts"] 20 | } 21 | 22 | -------------------------------------------------------------------------------- /template-react/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:import/errors", 5 | "plugin:react/recommended", 6 | "plugin:jsx-a11y/recommended", 7 | "plugin:react-hooks/recommended", 8 | "prettier" 9 | ], 10 | "rules": { 11 | "react/prop-types": 0, 12 | "react/react-in-jsx-scope": 0 13 | }, 14 | "plugins": [ 15 | "react", 16 | "import", 17 | "jsx-a11y", 18 | "react-hooks" 19 | ], 20 | "parserOptions": { 21 | "ecmaVersion": 2022, 22 | "sourceType": "module", 23 | "ecmaFeatures": { 24 | "jsx": true 25 | } 26 | }, 27 | "env": { 28 | "node": true, 29 | "browser": true, 30 | "es6": true 31 | }, 32 | "settings": { 33 | "react": { 34 | "version": "detect" 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /template-react/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .parcel-cache/ 3 | dist/ -------------------------------------------------------------------------------- /template-react/.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /template-react/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard", 4 | "stylelint-config-prettier", 5 | "stylelint-config-standard-scss", 6 | "stylelint-config-prettier-scss" 7 | ], 8 | "plugins": ["stylelint-scss"], 9 | "rules": { 10 | "color-no-invalid-hex": true, 11 | "font-family-no-duplicate-names": true, 12 | "string-no-newline": true, 13 | "unit-no-unknown": true, 14 | "property-no-unknown": true, 15 | "declaration-block-no-duplicate-properties": true, 16 | "declaration-block-no-shorthand-property-overrides": true, 17 | "block-no-empty": true, 18 | "selector-pseudo-class-no-unknown": true, 19 | "selector-pseudo-element-no-unknown": true, 20 | "selector-type-no-unknown": true, 21 | "comment-no-empty": true, 22 | "length-zero-no-unit": true, 23 | "unit-allowed-list": ["rem", "px", "%", "deg", "vh"] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /template-react/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with ⚡️ Swifty Config 2 | 3 | This project was bootstrapped with 🛠️ [⚡️ Swift Config](https://github.com/DeveloperAspire/swifty-config). 4 | 5 | ## Commands to execute. 6 | 7 | In the project directory, you can run the following commands: 8 | 9 | ### `yarn dev` 10 | 11 | Runs the app in the development mode 🚀.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when changes are made to any file in the application.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `yarn build` 18 | 19 | Builds the app for production to the `dist` folder.\ 20 | It correctly bundles the application in production mode, and optimizes the build for the best performance 📦. 21 | 22 | The build is minified and the filenames include the hashes.\ 23 | Your app is ready to be deployed! 24 | 25 | ## What more can you do? 26 | 27 | If you love this project and the setup, it will be okay to give this project a star on [Github](https://github.com/DeveloperAspire/swifty-config). and share with friends as this will help make the project more avaliable and popular and yeah, helps boost my little ego 🧑‍💻 28 | 29 | ## What more can you expect? 30 | 31 | More frameworks and templates will be added and also more configurations and also I will be improving this to be more world classish. 32 | 33 | Created by [Franklin Okolie](https://github.com/DeveloperAspire) 34 | -------------------------------------------------------------------------------- /template-react/_gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .parcel-cache/ 3 | dist/ -------------------------------------------------------------------------------- /template-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-react", 3 | "version": "1.0.0", 4 | "source": "public/index.html", 5 | "scripts": { 6 | "dev": "parcel --port 3000", 7 | "build": "parcel build", 8 | "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"", 9 | "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"", 10 | "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet", 11 | "lint:style": "stylelint \"src/**/*.{scss,css}\"" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@parcel/compressor-raw": "latest", 18 | "@parcel/transformer-sass": "latest", 19 | "eslint": "^8.17.0", 20 | "eslint-config-prettier": "^8.5.0", 21 | "eslint-plugin-import": "^2.26.0", 22 | "eslint-plugin-jsx-a11y": "^6.5.1", 23 | "eslint-plugin-react": "^7.30.0", 24 | "eslint-plugin-react-hooks": "^4.5.0", 25 | "parcel": "latest", 26 | "prettier": "^2.6.2", 27 | "process": "^0.11.10", 28 | "stylelint": "^14.9.0", 29 | "stylelint-config-prettier": "^9.0.3", 30 | "stylelint-config-prettier-scss": "^0.0.1", 31 | "stylelint-config-standard": "^26.0.0", 32 | "stylelint-config-standard-scss": "^4.0.0", 33 | "stylelint-scss": "^4.2.0" 34 | }, 35 | "dependencies": { 36 | "react": "^18.1.0", 37 | "react-dom": "^18.1.0" 38 | }, 39 | "browserslist": "> 0.5%, last 2 versions, not dead" 40 | } 41 | -------------------------------------------------------------------------------- /template-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | Swifty Config 16 | 17 | 18 | 19 |
20 | Not Rendered 21 |

Swift Config

22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /template-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /template-react/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "../src/styles/app.module.scss"; 3 | 4 | const App = () => { 5 | return ( 6 |
7 |
8 |

⚡️ Swifty Config

9 |

10 | A Frontend project configuration tool 🛠️. 11 |

12 |

13 | With one command, setup your Frontend project with additional 14 | configuration out of the box. 15 |

16 |
17 |
18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /template-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById("app")); 6 | 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /template-react/src/styles/abstracts/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @function to-rem($size) { 4 | $rem-size: math.div($size, 16px); 5 | @return #{$rem-size}rem; 6 | } 7 | -------------------------------------------------------------------------------- /template-react/src/styles/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable color-function-notation */ 2 | /* stylelint-disable alpha-value-notation */ 3 | $bg-color: #282c34; 4 | /* stylelint-disable-next-line value-keyword-case */ 5 | $font: "Mulish", sans-serif; 6 | $bg-gradient: linear-gradient( 7 | 90deg, 8 | rgba(2, 0, 36, 1) 0%, 9 | rgba(48, 43, 47, 1) 0%, 10 | rgba(104, 94, 61, 1) 0%, 11 | rgba(233, 92, 227, 1) 0%, 12 | rgba(50, 93, 220, 1) 38%, 13 | rgba(0, 255, 248, 1) 75% 14 | ); 15 | -------------------------------------------------------------------------------- /template-react/src/styles/app.module.scss: -------------------------------------------------------------------------------- 1 | @import "./base/typography"; 2 | @import "./abstracts/functions"; 3 | @import "./abstracts/variables"; 4 | 5 | .container { 6 | background-color: inherit; 7 | color: white; 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | 13 | &__heading { 14 | @include heading; 15 | 16 | margin: to-rem(20px) 0; 17 | background-image: $bg-gradient; 18 | background-clip: text; 19 | -webkit-background-clip: text; 20 | color: transparent; 21 | } 22 | 23 | &__text { 24 | @include text; 25 | } 26 | 27 | &__content { 28 | text-align: center; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /template-react/src/styles/base/_reset.scss: -------------------------------------------------------------------------------- 1 | @import "../abstracts/variables"; 2 | 3 | :root { 4 | font-size: 16px; 5 | } 6 | 7 | /* Box sizing rules */ 8 | 9 | *, 10 | *::before, 11 | *::after { 12 | box-sizing: border-box; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | /* Set core body defaults */ 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | 22 | body { 23 | min-height: 100vh; 24 | text-rendering: optimizespeed; 25 | line-height: 1.5; 26 | background-color: $bg-color; 27 | -webkit-font-smoothing: antialiased; 28 | -moz-osx-font-smoothing: grayscale; 29 | font-family: $font; 30 | scroll-behavior: smooth; 31 | } 32 | 33 | main { 34 | display: block; 35 | } 36 | 37 | hr { 38 | box-sizing: content-box; 39 | height: 0; 40 | overflow: visible; 41 | } 42 | 43 | a { 44 | background-color: transparent; 45 | text-decoration: none; 46 | } 47 | 48 | abbr[title] { 49 | border-bottom: none; 50 | text-decoration: underline; 51 | } 52 | 53 | b, 54 | strong { 55 | font-weight: bolder; 56 | } 57 | 58 | small { 59 | font-size: 80%; 60 | } 61 | 62 | sub, 63 | sup { 64 | font-size: 75%; 65 | line-height: 0; 66 | position: relative; 67 | vertical-align: baseline; 68 | } 69 | 70 | sub { 71 | bottom: -0.25rem; 72 | } 73 | 74 | sup { 75 | top: -0.5rem; 76 | } 77 | 78 | img { 79 | border-style: none; 80 | display: block; 81 | border: none; 82 | outline: none; 83 | max-width: 100%; 84 | height: 100%; 85 | } 86 | 87 | button, 88 | input, 89 | optgroup, 90 | select, 91 | textarea { 92 | margin: 0; 93 | outline: none; 94 | } 95 | 96 | input, 97 | button, 98 | textarea, 99 | select { 100 | font-family: inherit; 101 | } 102 | 103 | button, 104 | input { 105 | /* 1 */ 106 | overflow: visible; 107 | } 108 | 109 | button, 110 | select { 111 | /* 1 */ 112 | text-transform: none; 113 | } 114 | 115 | button, 116 | [type="button"], 117 | [type="reset"], 118 | [type="submit"] { 119 | /* stylelint-disable-next-line property-no-vendor-prefix */ 120 | -webkit-appearance: button; 121 | } 122 | 123 | button::-moz-focus-inner, 124 | [type="button"]::-moz-focus-inner, 125 | [type="reset"]::-moz-focus-inner, 126 | [type="submit"]::-moz-focus-inner { 127 | border-style: none; 128 | padding: 0; 129 | } 130 | 131 | // button:-moz-focusring, 132 | // [type="button"]:-moz-focusring, 133 | // [type="reset"]:-moz-focusring, 134 | // [type="submit"]:-moz-focusring { 135 | // outline: 1px dotted ButtonText; 136 | // } 137 | 138 | [type="number"]::-webkit-inner-spin-button, 139 | [type="number"]::-webkit-outer-spin-button { 140 | /* stylelint-disable-next-line property-no-vendor-prefix */ 141 | -webkit-appearance: none; 142 | } 143 | 144 | [type="number"] { 145 | /* stylelint-disable-next-line property-no-vendor-prefix */ 146 | -moz-appearance: textfield; 147 | } 148 | 149 | fieldset { 150 | padding: 0.35rem 0.75rem 0.625rem; 151 | } 152 | 153 | legend { 154 | box-sizing: border-box; 155 | color: inherit; 156 | display: table; 157 | max-width: 100%; 158 | padding: 0; 159 | white-space: normal; 160 | } 161 | 162 | progress { 163 | vertical-align: baseline; 164 | } 165 | 166 | textarea { 167 | overflow: auto; 168 | } 169 | 170 | [type="checkbox"], 171 | [type="radio"], 172 | [type="date"] { 173 | box-sizing: border-box; 174 | padding: 0; 175 | } 176 | 177 | [type="number"]::-webkit-outer-spin-button { 178 | height: auto; 179 | } 180 | 181 | [type="search"] { 182 | /* stylelint-disable-next-line property-no-vendor-prefix */ 183 | -webkit-appearance: textfield; 184 | outline-offset: -2px; 185 | 186 | &::-webkit-search-cancel-button { 187 | /* Remove default */ 188 | /* stylelint-disable-next-line property-no-vendor-prefix */ 189 | -webkit-appearance: none; 190 | } 191 | } 192 | 193 | [type="search"]::-webkit-search-decoration { 194 | /* stylelint-disable-next-line property-no-vendor-prefix */ 195 | -webkit-appearance: none; 196 | } 197 | 198 | ::-webkit-file-upload-button { 199 | /* stylelint-disable-next-line property-no-vendor-prefix */ 200 | -webkit-appearance: button; 201 | font: inherit; 202 | } 203 | 204 | details { 205 | display: block; 206 | } 207 | 208 | summary { 209 | display: list-item; 210 | } 211 | 212 | template { 213 | display: none; 214 | } 215 | 216 | [hidden] { 217 | display: none; 218 | } 219 | 220 | /* Remove default margin */ 221 | body, 222 | h1, 223 | h2, 224 | h3, 225 | h4, 226 | h5, 227 | h6, 228 | p, 229 | ul, 230 | ol, 231 | figure, 232 | blockquote, 233 | dl, 234 | dd { 235 | margin: 0; 236 | padding: 0; 237 | } 238 | 239 | p { 240 | font-family: $font; 241 | display: block; 242 | margin-block-start: 0; 243 | margin-block-end: 0; 244 | } 245 | 246 | h1, 247 | h2, 248 | h3, 249 | h4, 250 | h5, 251 | h6 { 252 | padding: 0; 253 | font-family: $font; 254 | } 255 | 256 | /* Remove list styles on ul, ol */ 257 | ul, 258 | ol, 259 | li { 260 | list-style: none; 261 | padding: 0; 262 | } 263 | 264 | /* Blur images when they have no alt attribute */ 265 | img:not([alt]) { 266 | filter: blur(10px); 267 | } 268 | 269 | table { 270 | width: 100%; 271 | table-layout: fixed; 272 | border-collapse: collapse; 273 | border: 1px solid; 274 | } 275 | 276 | button { 277 | background-color: transparent; 278 | border: none; 279 | cursor: pointer; 280 | padding: 0; 281 | } 282 | 283 | button:focus, 284 | button:hover { 285 | outline: none; 286 | } 287 | -------------------------------------------------------------------------------- /template-react/src/styles/base/_typography.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable-next-line import-notation */ 2 | // @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600&display=swap"); 3 | 4 | @mixin heading { 5 | font-size: to-rem(90px); 6 | } 7 | 8 | @mixin text { 9 | font-size: to-rem(20px); 10 | } 11 | -------------------------------------------------------------------------------- /template-react/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | // Imported all the styles 2 | 3 | @import "./abstracts/variables", "./abstracts/functions"; 4 | 5 | @import "./base/typography", "./base/reset"; 6 | -------------------------------------------------------------------------------- /template-vanilla-ts/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:import/errors", 10 | "plugin:@typescript-eslint/recommended", 11 | "prettier" 12 | ], 13 | "parserOptions": { 14 | "ecmaVersion": "latest", 15 | "sourceType": "module" 16 | }, 17 | "parser": "@typescript-eslint/parser", 18 | "plugins": ["import", "@typescript-eslint"], 19 | "rules": { 20 | "no-console": "warn", 21 | "linebreak-style": ["error", "unix"], 22 | "quotes": ["error", "double"], 23 | "semi": ["error", "always"] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /template-vanilla-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .parcel-cache/ -------------------------------------------------------------------------------- /template-vanilla-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /template-vanilla-ts/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard", 4 | "stylelint-config-prettier", 5 | "stylelint-config-standard-scss", 6 | "stylelint-config-prettier-scss" 7 | ], 8 | "plugins": ["stylelint-scss"], 9 | "rules": { 10 | "color-no-invalid-hex": true, 11 | "font-family-no-duplicate-names": true, 12 | "string-no-newline": true, 13 | "unit-no-unknown": true, 14 | "property-no-unknown": true, 15 | "declaration-block-no-duplicate-properties": true, 16 | "declaration-block-no-shorthand-property-overrides": true, 17 | "block-no-empty": true, 18 | "selector-pseudo-class-no-unknown": true, 19 | "selector-pseudo-element-no-unknown": true, 20 | "selector-type-no-unknown": true, 21 | "comment-no-empty": true, 22 | "length-zero-no-unit": true, 23 | "unit-allowed-list": ["rem", "px", "%", "deg", "vh"] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /template-vanilla-ts/.tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /template-vanilla-ts/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with ⚡️ Swifty Config 2 | 3 | This project was bootstrapped with 🛠️ [⚡️ Swift Config](https://github.com/DeveloperAspire/swifty-config). 4 | 5 | ## Commands to execute. 6 | 7 | In the project directory, you can run the following commands: 8 | 9 | ### `yarn dev` 10 | 11 | Runs the app in the development mode 🚀.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when changes are made to any file in the application.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `yarn build` 18 | 19 | Builds the app for production to the `dist` folder.\ 20 | It correctly bundles the application in production mode, and optimizes the build for the best performance 📦. 21 | 22 | The build is minified and the filenames include the hashes.\ 23 | Your app is ready to be deployed! 24 | 25 | ## What more can you do? 26 | 27 | If you love this project and the setup, it will be okay to give this project a star on [Github](https://github.com/DeveloperAspire/swifty-config). and share with friends as this will help make the project more avaliable and popular and yeah, helps boost my little ego 🧑‍💻 28 | 29 | ## What more can you expect? 30 | 31 | More frameworks and templates will be added and also more configurations and also I will be improving this to be more world classish. 32 | 33 | Created by [Franklin Okolie](https://github.com/DeveloperAspire) 34 | -------------------------------------------------------------------------------- /template-vanilla-ts/_gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .parcel-cache/ -------------------------------------------------------------------------------- /template-vanilla-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-vanilla-ts", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "source": "src/index.html", 6 | "scripts": { 7 | "dev": "parcel --port 3000", 8 | "build": "parcel build", 9 | "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"", 10 | "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"", 11 | "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet", 12 | "lint:style": "stylelint \"src/**/*.{scss,css}\"" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "devDependencies": { 18 | "@parcel/transformer-sass": "latest", 19 | "eslint": "^8.16.0", 20 | "eslint-config-prettier": "^8.5.0", 21 | "eslint-plugin-import": "^2.26.0", 22 | "typescript": "^4.7.2", 23 | "@typescript-eslint/eslint-plugin": "^5.27.1", 24 | "@typescript-eslint/parser": "^5.27.1", 25 | "parcel": "latest", 26 | "prettier": "2.6.2", 27 | "stylelint": "^14.9.0", 28 | "stylelint-config-prettier": "^9.0.3", 29 | "stylelint-config-prettier-scss": "^0.0.1", 30 | "stylelint-config-standard": "^26.0.0", 31 | "stylelint-config-standard-scss": "^4.0.0", 32 | "stylelint-scss": "^4.2.0" 33 | }, 34 | "browserslist": "> 0.5%, last 2 versions, not dead" 35 | } 36 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Swifty Config 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/index.ts: -------------------------------------------------------------------------------- 1 | import "./styles/index.scss"; 2 | 3 | 4 | document.querySelector("#app")!.innerHTML = ` 5 |
6 |
7 |

⚡️ Swifty Config

8 |

A Frontend project configuration tool 🛠️.

9 |

10 | With one command, setup your Frontend project with additional 11 | configuration out of the box. 12 |

13 |
14 |
15 | `; 16 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/styles/_app.scss: -------------------------------------------------------------------------------- 1 | 2 | .container { 3 | background-color: inherit; 4 | color: white; 5 | height: 100vh; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | 10 | &__heading { 11 | @include heading; 12 | 13 | margin: to-rem(20px) 0; 14 | background-image: $bg-gradient; 15 | background-clip: text; 16 | -webkit-background-clip: text; 17 | color: transparent; 18 | } 19 | 20 | &__text { 21 | @include text; 22 | } 23 | 24 | &__content { 25 | text-align: center; 26 | } 27 | } 28 | 29 | 30 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/styles/abstracts/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @function to-rem($size) { 4 | $rem-size: math.div($size, 16px); 5 | @return #{$rem-size}rem; 6 | } 7 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/styles/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable color-function-notation */ 2 | /* stylelint-disable alpha-value-notation */ 3 | $bg-color: #282c34; 4 | /* stylelint-disable-next-line value-keyword-case */ 5 | $font: "Mulish", sans-serif; 6 | $bg-gradient: linear-gradient( 7 | 90deg, 8 | rgba(2, 0, 36, 1) 0%, 9 | rgba(48, 43, 47, 1) 0%, 10 | rgba(104, 94, 61, 1) 0%, 11 | rgba(233, 92, 227, 1) 0%, 12 | rgba(50, 93, 220, 1) 38%, 13 | rgba(0, 255, 248, 1) 75% 14 | ); 15 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/styles/base/_reset.scss: -------------------------------------------------------------------------------- 1 | @import "../abstracts/variables"; 2 | 3 | :root { 4 | font-size: 16px; 5 | } 6 | 7 | /* Box sizing rules */ 8 | 9 | *, 10 | *::before, 11 | *::after { 12 | box-sizing: border-box; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | /* Set core body defaults */ 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | 22 | body { 23 | min-height: 100vh; 24 | text-rendering: optimizespeed; 25 | line-height: 1.5; 26 | background-color: $bg-color; 27 | -webkit-font-smoothing: antialiased; 28 | -moz-osx-font-smoothing: grayscale; 29 | font-family: $font; 30 | scroll-behavior: smooth; 31 | } 32 | 33 | main { 34 | display: block; 35 | } 36 | 37 | hr { 38 | box-sizing: content-box; 39 | height: 0; 40 | overflow: visible; 41 | } 42 | 43 | a { 44 | background-color: transparent; 45 | text-decoration: none; 46 | } 47 | 48 | abbr[title] { 49 | border-bottom: none; 50 | text-decoration: underline; 51 | } 52 | 53 | b, 54 | strong { 55 | font-weight: bolder; 56 | } 57 | 58 | small { 59 | font-size: 80%; 60 | } 61 | 62 | sub, 63 | sup { 64 | font-size: 75%; 65 | line-height: 0; 66 | position: relative; 67 | vertical-align: baseline; 68 | } 69 | 70 | sub { 71 | bottom: -0.25rem; 72 | } 73 | 74 | sup { 75 | top: -0.5rem; 76 | } 77 | 78 | img { 79 | border-style: none; 80 | display: block; 81 | border: none; 82 | outline: none; 83 | max-width: 100%; 84 | height: 100%; 85 | } 86 | 87 | button, 88 | input, 89 | optgroup, 90 | select, 91 | textarea { 92 | margin: 0; 93 | outline: none; 94 | } 95 | 96 | input, 97 | button, 98 | textarea, 99 | select { 100 | font-family: inherit; 101 | } 102 | 103 | button, 104 | input { 105 | /* 1 */ 106 | overflow: visible; 107 | } 108 | 109 | button, 110 | select { 111 | /* 1 */ 112 | text-transform: none; 113 | } 114 | 115 | button, 116 | [type="button"], 117 | [type="reset"], 118 | [type="submit"] { 119 | /* stylelint-disable-next-line property-no-vendor-prefix */ 120 | -webkit-appearance: button; 121 | } 122 | 123 | button::-moz-focus-inner, 124 | [type="button"]::-moz-focus-inner, 125 | [type="reset"]::-moz-focus-inner, 126 | [type="submit"]::-moz-focus-inner { 127 | border-style: none; 128 | padding: 0; 129 | } 130 | 131 | // button:-moz-focusring, 132 | // [type="button"]:-moz-focusring, 133 | // [type="reset"]:-moz-focusring, 134 | // [type="submit"]:-moz-focusring { 135 | // outline: 1px dotted ButtonText; 136 | // } 137 | 138 | [type="number"]::-webkit-inner-spin-button, 139 | [type="number"]::-webkit-outer-spin-button { 140 | /* stylelint-disable-next-line property-no-vendor-prefix */ 141 | -webkit-appearance: none; 142 | } 143 | 144 | [type="number"] { 145 | /* stylelint-disable-next-line property-no-vendor-prefix */ 146 | -moz-appearance: textfield; 147 | } 148 | 149 | fieldset { 150 | padding: 0.35rem 0.75rem 0.625rem; 151 | } 152 | 153 | legend { 154 | box-sizing: border-box; 155 | color: inherit; 156 | display: table; 157 | max-width: 100%; 158 | padding: 0; 159 | white-space: normal; 160 | } 161 | 162 | progress { 163 | vertical-align: baseline; 164 | } 165 | 166 | textarea { 167 | overflow: auto; 168 | } 169 | 170 | [type="checkbox"], 171 | [type="radio"], 172 | [type="date"] { 173 | box-sizing: border-box; 174 | padding: 0; 175 | } 176 | 177 | [type="number"]::-webkit-outer-spin-button { 178 | height: auto; 179 | } 180 | 181 | [type="search"] { 182 | /* stylelint-disable-next-line property-no-vendor-prefix */ 183 | -webkit-appearance: textfield; 184 | outline-offset: -2px; 185 | 186 | &::-webkit-search-cancel-button { 187 | /* Remove default */ 188 | /* stylelint-disable-next-line property-no-vendor-prefix */ 189 | -webkit-appearance: none; 190 | } 191 | } 192 | 193 | [type="search"]::-webkit-search-decoration { 194 | /* stylelint-disable-next-line property-no-vendor-prefix */ 195 | -webkit-appearance: none; 196 | } 197 | 198 | ::-webkit-file-upload-button { 199 | /* stylelint-disable-next-line property-no-vendor-prefix */ 200 | -webkit-appearance: button; 201 | font: inherit; 202 | } 203 | 204 | details { 205 | display: block; 206 | } 207 | 208 | summary { 209 | display: list-item; 210 | } 211 | 212 | template { 213 | display: none; 214 | } 215 | 216 | [hidden] { 217 | display: none; 218 | } 219 | 220 | /* Remove default margin */ 221 | body, 222 | h1, 223 | h2, 224 | h3, 225 | h4, 226 | h5, 227 | h6, 228 | p, 229 | ul, 230 | ol, 231 | figure, 232 | blockquote, 233 | dl, 234 | dd { 235 | margin: 0; 236 | padding: 0; 237 | } 238 | 239 | p { 240 | font-family: $font; 241 | display: block; 242 | margin-block-start: 0; 243 | margin-block-end: 0; 244 | } 245 | 246 | h1, 247 | h2, 248 | h3, 249 | h4, 250 | h5, 251 | h6 { 252 | padding: 0; 253 | font-family: $font; 254 | } 255 | 256 | /* Remove list styles on ul, ol */ 257 | ul, 258 | ol, 259 | li { 260 | list-style: none; 261 | padding: 0; 262 | } 263 | 264 | /* Blur images when they have no alt attribute */ 265 | img:not([alt]) { 266 | filter: blur(10px); 267 | } 268 | 269 | table { 270 | width: 100%; 271 | table-layout: fixed; 272 | border-collapse: collapse; 273 | border: 1px solid; 274 | } 275 | 276 | button { 277 | background-color: transparent; 278 | border: none; 279 | cursor: pointer; 280 | padding: 0; 281 | } 282 | 283 | button:focus, 284 | button:hover { 285 | outline: none; 286 | } 287 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/styles/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600&display=swap"); 2 | 3 | @mixin heading { 4 | font-size: to-rem(90px); 5 | } 6 | 7 | @mixin text { 8 | font-size: to-rem(20px); 9 | } 10 | -------------------------------------------------------------------------------- /template-vanilla-ts/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | // Imported all the styles 2 | 3 | @import "./abstracts/variables", "./abstracts/functions"; 4 | 5 | @import "./base/typography", "./base/reset"; 6 | 7 | @import "./app"; 8 | -------------------------------------------------------------------------------- /template-vanilla/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true 6 | }, 7 | "extends": ["eslint:recommended", "plugin:import/errors", "prettier"], 8 | "parserOptions": { 9 | "ecmaVersion": "latest", 10 | "sourceType": "module" 11 | }, 12 | "plugins": ["import"], 13 | "rules": { 14 | "no-console": "warn", 15 | "linebreak-style": ["error", "unix"], 16 | "quotes": ["error", "double"], 17 | "semi": ["error", "always"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /template-vanilla/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .parcel-cache/ -------------------------------------------------------------------------------- /template-vanilla/.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /template-vanilla/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard", 4 | "stylelint-config-prettier", 5 | "stylelint-config-standard-scss", 6 | "stylelint-config-prettier-scss" 7 | ], 8 | "plugins": ["stylelint-scss"], 9 | "rules": { 10 | "color-no-invalid-hex": true, 11 | "font-family-no-duplicate-names": true, 12 | "string-no-newline": true, 13 | "unit-no-unknown": true, 14 | "property-no-unknown": true, 15 | "declaration-block-no-duplicate-properties": true, 16 | "declaration-block-no-shorthand-property-overrides": true, 17 | "block-no-empty": true, 18 | "selector-pseudo-class-no-unknown": true, 19 | "selector-pseudo-element-no-unknown": true, 20 | "selector-type-no-unknown": true, 21 | "comment-no-empty": true, 22 | "length-zero-no-unit": true, 23 | "unit-allowed-list": ["rem", "px", "%", "deg", "vh"] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /template-vanilla/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with ⚡️ Swifty Config 2 | 3 | This project was bootstrapped with 🛠️ [⚡️ Swift Config](https://github.com/DeveloperAspire/swifty-config). 4 | 5 | ## Commands to execute. 6 | 7 | In the project directory, you can run the following commands: 8 | 9 | ### `yarn dev` 10 | 11 | Runs the app in the development mode 🚀.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when changes are made to any file in the application.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `yarn build` 18 | 19 | Builds the app for production to the `dist` folder.\ 20 | It correctly bundles the application in production mode, and optimizes the build for the best performance 📦. 21 | 22 | The build is minified and the filenames include the hashes.\ 23 | Your app is ready to be deployed! 24 | 25 | ## What more can you do? 26 | 27 | If you love this project and the setup, it will be okay to give this project a star on [Github](https://github.com/DeveloperAspire/swifty-config). and share with friends as this will help make the project more avaliable and popular and yeah, helps boost my little ego 🧑‍💻 28 | 29 | ## What more can you expect? 30 | 31 | More frameworks and templates will be added and also more configurations and also I will be improving this to be more world classish. 32 | 33 | Created by [Franklin Okolie](https://github.com/DeveloperAspire) 34 | -------------------------------------------------------------------------------- /template-vanilla/_gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .parcel-cache/ -------------------------------------------------------------------------------- /template-vanilla/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-vanilla", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "source": "src/index.html", 7 | "scripts": { 8 | "dev": "parcel --port 3000", 9 | "build": "parcel build", 10 | "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"", 11 | "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"", 12 | "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet", 13 | "lint:style": "stylelint \"src/**/*.{scss,css}\"" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "devDependencies": { 19 | "@parcel/transformer-sass": "latest", 20 | "eslint": "^8.16.0", 21 | "eslint-config-prettier": "^8.5.0", 22 | "eslint-plugin-import": "^2.26.0", 23 | "parcel": "latest", 24 | "prettier": "2.6.2", 25 | "stylelint": "^14.9.0", 26 | "stylelint-config-prettier": "^9.0.3", 27 | "stylelint-config-prettier-scss": "^0.0.1", 28 | "stylelint-config-standard": "^26.0.0", 29 | "stylelint-config-standard-scss": "^4.0.0", 30 | "stylelint-scss": "^4.2.0" 31 | }, 32 | "browserslist": "> 0.5%, last 2 versions, not dead" 33 | } 34 | -------------------------------------------------------------------------------- /template-vanilla/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Swifty Config 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /template-vanilla/src/index.js: -------------------------------------------------------------------------------- 1 | import "./styles/index.scss"; 2 | 3 | 4 | document.querySelector("#app").innerHTML = ` 5 |
6 |
7 |

⚡️ Swifty Config

8 |

A Frontend project configuration tool 🛠️.

9 |

10 | With one command, setup your Frontend project with additional 11 | configuration out of the box. 12 |

13 |
14 |
15 | `; 16 | -------------------------------------------------------------------------------- /template-vanilla/src/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /template-vanilla/src/styles/_app.scss: -------------------------------------------------------------------------------- 1 | 2 | .container { 3 | background-color: inherit; 4 | color: white; 5 | height: 100vh; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | 10 | &__heading { 11 | @include heading; 12 | 13 | margin: to-rem(20px) 0; 14 | background-image: $bg-gradient; 15 | background-clip: text; 16 | -webkit-background-clip: text; 17 | color: transparent; 18 | } 19 | 20 | &__text { 21 | @include text; 22 | } 23 | 24 | &__content { 25 | text-align: center; 26 | } 27 | } 28 | 29 | 30 | -------------------------------------------------------------------------------- /template-vanilla/src/styles/abstracts/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @function to-rem($size) { 4 | $rem-size: math.div($size, 16px); 5 | @return #{$rem-size}rem; 6 | } 7 | -------------------------------------------------------------------------------- /template-vanilla/src/styles/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable color-function-notation */ 2 | /* stylelint-disable alpha-value-notation */ 3 | $bg-color: #282c34; 4 | /* stylelint-disable-next-line value-keyword-case */ 5 | $font: "Mulish", sans-serif; 6 | $bg-gradient: linear-gradient( 7 | 90deg, 8 | rgba(2, 0, 36, 1) 0%, 9 | rgba(48, 43, 47, 1) 0%, 10 | rgba(104, 94, 61, 1) 0%, 11 | rgba(233, 92, 227, 1) 0%, 12 | rgba(50, 93, 220, 1) 38%, 13 | rgba(0, 255, 248, 1) 75% 14 | ); 15 | -------------------------------------------------------------------------------- /template-vanilla/src/styles/base/_reset.scss: -------------------------------------------------------------------------------- 1 | @import "../abstracts/variables"; 2 | 3 | :root { 4 | font-size: 16px; 5 | } 6 | 7 | /* Box sizing rules */ 8 | 9 | *, 10 | *::before, 11 | *::after { 12 | box-sizing: border-box; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | /* Set core body defaults */ 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | 22 | body { 23 | min-height: 100vh; 24 | text-rendering: optimizespeed; 25 | line-height: 1.5; 26 | background-color: $bg-color; 27 | -webkit-font-smoothing: antialiased; 28 | -moz-osx-font-smoothing: grayscale; 29 | font-family: $font; 30 | scroll-behavior: smooth; 31 | } 32 | 33 | main { 34 | display: block; 35 | } 36 | 37 | hr { 38 | box-sizing: content-box; 39 | height: 0; 40 | overflow: visible; 41 | } 42 | 43 | a { 44 | background-color: transparent; 45 | text-decoration: none; 46 | } 47 | 48 | abbr[title] { 49 | border-bottom: none; 50 | text-decoration: underline; 51 | } 52 | 53 | b, 54 | strong { 55 | font-weight: bolder; 56 | } 57 | 58 | small { 59 | font-size: 80%; 60 | } 61 | 62 | sub, 63 | sup { 64 | font-size: 75%; 65 | line-height: 0; 66 | position: relative; 67 | vertical-align: baseline; 68 | } 69 | 70 | sub { 71 | bottom: -0.25rem; 72 | } 73 | 74 | sup { 75 | top: -0.5rem; 76 | } 77 | 78 | img { 79 | border-style: none; 80 | display: block; 81 | border: none; 82 | outline: none; 83 | max-width: 100%; 84 | height: 100%; 85 | } 86 | 87 | button, 88 | input, 89 | optgroup, 90 | select, 91 | textarea { 92 | margin: 0; 93 | outline: none; 94 | } 95 | 96 | input, 97 | button, 98 | textarea, 99 | select { 100 | font-family: inherit; 101 | } 102 | 103 | button, 104 | input { 105 | /* 1 */ 106 | overflow: visible; 107 | } 108 | 109 | button, 110 | select { 111 | /* 1 */ 112 | text-transform: none; 113 | } 114 | 115 | button, 116 | [type="button"], 117 | [type="reset"], 118 | [type="submit"] { 119 | /* stylelint-disable-next-line property-no-vendor-prefix */ 120 | -webkit-appearance: button; 121 | } 122 | 123 | button::-moz-focus-inner, 124 | [type="button"]::-moz-focus-inner, 125 | [type="reset"]::-moz-focus-inner, 126 | [type="submit"]::-moz-focus-inner { 127 | border-style: none; 128 | padding: 0; 129 | } 130 | 131 | // button:-moz-focusring, 132 | // [type="button"]:-moz-focusring, 133 | // [type="reset"]:-moz-focusring, 134 | // [type="submit"]:-moz-focusring { 135 | // outline: 1px dotted ButtonText; 136 | // } 137 | 138 | [type="number"]::-webkit-inner-spin-button, 139 | [type="number"]::-webkit-outer-spin-button { 140 | /* stylelint-disable-next-line property-no-vendor-prefix */ 141 | -webkit-appearance: none; 142 | } 143 | 144 | [type="number"] { 145 | /* stylelint-disable-next-line property-no-vendor-prefix */ 146 | -moz-appearance: textfield; 147 | } 148 | 149 | fieldset { 150 | padding: 0.35rem 0.75rem 0.625rem; 151 | } 152 | 153 | legend { 154 | box-sizing: border-box; 155 | color: inherit; 156 | display: table; 157 | max-width: 100%; 158 | padding: 0; 159 | white-space: normal; 160 | } 161 | 162 | progress { 163 | vertical-align: baseline; 164 | } 165 | 166 | textarea { 167 | overflow: auto; 168 | } 169 | 170 | [type="checkbox"], 171 | [type="radio"], 172 | [type="date"] { 173 | box-sizing: border-box; 174 | padding: 0; 175 | } 176 | 177 | [type="number"]::-webkit-outer-spin-button { 178 | height: auto; 179 | } 180 | 181 | [type="search"] { 182 | /* stylelint-disable-next-line property-no-vendor-prefix */ 183 | -webkit-appearance: textfield; 184 | outline-offset: -2px; 185 | 186 | &::-webkit-search-cancel-button { 187 | /* Remove default */ 188 | /* stylelint-disable-next-line property-no-vendor-prefix */ 189 | -webkit-appearance: none; 190 | } 191 | } 192 | 193 | [type="search"]::-webkit-search-decoration { 194 | /* stylelint-disable-next-line property-no-vendor-prefix */ 195 | -webkit-appearance: none; 196 | } 197 | 198 | ::-webkit-file-upload-button { 199 | /* stylelint-disable-next-line property-no-vendor-prefix */ 200 | -webkit-appearance: button; 201 | font: inherit; 202 | } 203 | 204 | details { 205 | display: block; 206 | } 207 | 208 | summary { 209 | display: list-item; 210 | } 211 | 212 | template { 213 | display: none; 214 | } 215 | 216 | [hidden] { 217 | display: none; 218 | } 219 | 220 | /* Remove default margin */ 221 | body, 222 | h1, 223 | h2, 224 | h3, 225 | h4, 226 | h5, 227 | h6, 228 | p, 229 | ul, 230 | ol, 231 | figure, 232 | blockquote, 233 | dl, 234 | dd { 235 | margin: 0; 236 | padding: 0; 237 | } 238 | 239 | p { 240 | font-family: $font; 241 | display: block; 242 | margin-block-start: 0; 243 | margin-block-end: 0; 244 | } 245 | 246 | h1, 247 | h2, 248 | h3, 249 | h4, 250 | h5, 251 | h6 { 252 | padding: 0; 253 | font-family: $font; 254 | } 255 | 256 | /* Remove list styles on ul, ol */ 257 | ul, 258 | ol, 259 | li { 260 | list-style: none; 261 | padding: 0; 262 | } 263 | 264 | /* Blur images when they have no alt attribute */ 265 | img:not([alt]) { 266 | filter: blur(10px); 267 | } 268 | 269 | table { 270 | width: 100%; 271 | table-layout: fixed; 272 | border-collapse: collapse; 273 | border: 1px solid; 274 | } 275 | 276 | button { 277 | background-color: transparent; 278 | border: none; 279 | cursor: pointer; 280 | padding: 0; 281 | } 282 | 283 | button:focus, 284 | button:hover { 285 | outline: none; 286 | } 287 | -------------------------------------------------------------------------------- /template-vanilla/src/styles/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600&display=swap"); 2 | 3 | @mixin heading { 4 | font-size: to-rem(90px); 5 | } 6 | 7 | @mixin text { 8 | font-size: to-rem(20px); 9 | } 10 | -------------------------------------------------------------------------------- /template-vanilla/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | // Imported all the styles 2 | 3 | @import "./abstracts/variables", "./abstracts/functions"; 4 | 5 | @import "./base/typography", "./base/reset"; 6 | 7 | @import "./app"; 8 | --------------------------------------------------------------------------------