Edit the scss/style.scss file and it will automatically compile into css/style.css
13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sass_starter", 3 | "version": "1.0.0", 4 | "description": "Sass Starter Files", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gulp" 8 | }, 9 | "keywords": [], 10 | "author": "Jatin Varlyani", 11 | "license": "", 12 | "devDependencies": { 13 | "autoprefixer": "^9.4.3", 14 | "browser-sync": "^2.26.3", 15 | "cssnano": "^4.1.8", 16 | "gulp": "^4.0.0", 17 | "gulp-postcss": "^8.0.0", 18 | "gulp-sass": "^4.0.2", 19 | "gulp-sourcemaps": "^2.6.4" 20 | } 21 | } -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | // To ensure use of utf-8 encoding format 2 | @charset 'UTF-8'; 3 | 4 | // Config 5 | @import 6 | "abstracts/variables", 7 | "abstracts/mixins", 8 | "abstracts/placeholders"; 9 | 10 | // Vendors (bootstrap, jquery...) 11 | @import 12 | "vendors/normalize"; 13 | 14 | // Base 15 | @import 16 | "base/reset", 17 | "base/typography"; 18 | 19 | // Layout of each section 20 | @import 21 | "layout/grid", 22 | "layout/header", 23 | "layout/footer"; 24 | 25 | // Components 26 | @import 27 | "components/buttons", 28 | "components/forms"; 29 | 30 | // Specific styles of each page 31 | @import 32 | "pages/home"; 33 | 34 | // Themes 35 | @import 36 | "themes/night" -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 17 | do not have permission to do that, you may request the second reviewer to merge it for you. 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Jatin Varlyani 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. 22 | -------------------------------------------------------------------------------- /src/scss/REAMDME.md: -------------------------------------------------------------------------------- 1 |6 | scss/ 7 | | 8 | |– abstracts/ 9 | | |– _variables.scss # Variables Sass 10 | | |– _mixins.scss # Mixins Sass 11 | | |– _placeholders.scss # Placeholders Sass 12 | | 13 | |- base/ 14 | | |- _reset.scss # Reset 15 | | |- _typography.scss # Rules of typography 16 | | … # Etc. 17 | | 18 | |- components/ 19 | | |- _buttons.scss # Buttons 20 | | |- _carousel.scss # Carossel 21 | | |- _forms.scss # Inputs style 22 | | … # Etc. 23 | | 24 | |- layout/ 25 | | |- _navigation.scss # Navigation 26 | | |- _grid.scss # Grid 27 | | |- _header.scss # Header 28 | | |- _footer.scss # Footer 29 | | … # Etc. 30 | | 31 | |- pages/ 32 | | |- _home.scss # Page home specific styles 33 | | … # Etc. 34 | | 35 | |- themes/ 36 | | |- _night.scss # Night theme 37 | | … # Etc. 38 | | 39 | |- vendors/ 40 | | |– _normalize.scss # Normalize 41 | | … # Etc. 42 | | 43 | – style.scss # Sass main file 44 |45 | 46 | Obs: This model was based on the Sass guidelines architecture 47 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sass Starter Pack ♦️ 2 | 3 | [](https://github.com/Jatin-8898/sass-starter-pack/stargazers) 4 | [](https://github.com/Jatin-8898/sass-starter-pack/network) 5 | [](https://github.com/Jatin-8898/sass-starter-pack/blob/master/LICENSE) 6 | 7 | A light package for compiling Sass(scss files) and running a dev server using Browser Sync. 8 | 9 | You can check out this [Medium article](https://levelup.gitconnected.com/how-to-setup-your-workflow-using-gulp-v4-0-0-5450e3d7c512) 10 | 11 | ### Version 12 | 1.0.0 13 | 14 | ## 📝 Usage 15 | 16 | ### Clone this Repo 17 | ``` 18 | git clone https://github.com/Jatin-8898/sass-starter-pack.git 19 | ``` 20 | 21 | ### Installation 22 | 23 | Get started quickly by cloning this repository. 24 | 25 | Install the dependencies (gulp, gulp-sass, browser-sync) 26 | 27 | ```sh 28 | $ npm install 29 | ``` 30 | 31 | ### Run 32 | 33 | This will watch your sass files, compile them and run your dev server at http://localhost:3000 34 | 35 | ```sh 36 | $ npm start 37 | ``` 38 | 39 | ## Alternatively 40 | 41 | ### Init the package.json 42 | 43 | Open the terminal and enter the following 44 | 45 | ```sh 46 | $ npm init -y 47 | ``` 48 | 49 | ### Install the necessary dependencies 50 | 51 | ```sh 52 | $ npm install --save-dev gulp-sass browser-sync gulp gulp-postcss autoprefixer cssnano gulp-sourcemaps 53 | ``` 54 | 55 | Take the *gulpfile.js* from here and your all set with the starter pack. 56 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 2 | var gulp = require("gulp"), 3 | sass = require("gulp-sass"), 4 | postcss = require("gulp-postcss"), 5 | autoprefixer = require("autoprefixer"), 6 | cssnano = require("cssnano"), 7 | sourcemaps = require("gulp-sourcemaps"), 8 | browserSync = require("browser-sync").create(); 9 | 10 | var paths = { 11 | styles: { 12 | // By using styles/**/*.sass we're telling gulp to check all folders for any sass file 13 | src: "src/scss/*.scss", 14 | // Compiled files will end up in whichever folder it's found in (partials are not compiled) 15 | dest: "src/css" 16 | } 17 | 18 | // Easily add additional paths 19 | // ,html: { 20 | // src: '...', 21 | // dest: '...' 22 | // } 23 | }; 24 | 25 | function style() { 26 | return gulp 27 | .src(paths.styles.src) 28 | // Initialize sourcemaps before compilation starts 29 | .pipe(sourcemaps.init()) 30 | .pipe(sass()) 31 | .on("error", sass.logError) 32 | // Use postcss with autoprefixer and compress the compiled file using cssnano 33 | .pipe(postcss([autoprefixer(), cssnano()])) 34 | // Now add/write the sourcemaps 35 | .pipe(sourcemaps.write()) 36 | .pipe(gulp.dest(paths.styles.dest)) 37 | // Add browsersync stream pipe after compilation 38 | .pipe(browserSync.stream()); 39 | } 40 | 41 | 42 | 43 | 44 | // A simple task to reload the page 45 | function reload(done) { 46 | browserSync.reload(); 47 | done(); 48 | } 49 | 50 | // Add browsersync initialization at the start of the watch task 51 | function watch() { 52 | browserSync.init({ 53 | // You can tell browserSync to use this directory and serve it as a mini-server 54 | server: { 55 | baseDir: "./src" 56 | } 57 | // If you are already serving your website locally using something like apache 58 | // You can use the proxy setting to proxy that instead 59 | // proxy: "yourlocal.dev" 60 | }); 61 | gulp.watch(paths.styles.src, style); 62 | // We should tell gulp which files to watch to trigger the reload 63 | // This can be html or whatever you're using to develop your website 64 | // Note -- you can obviously add the path to the Paths object 65 | gulp.watch("src/*.html", reload); 66 | } 67 | 68 | // We don't have to expose the reload function 69 | // It's currently only useful in other functions 70 | 71 | 72 | // Don't forget to expose the task! 73 | exports.watch = watch 74 | 75 | // Expose the task by exporting it 76 | // This allows you to run it from the commandline using 77 | // $ gulp style 78 | exports.style = style; 79 | 80 | /* 81 | * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel` 82 | */ 83 | var build = gulp.parallel(style, watch); 84 | 85 | /* 86 | * You can still use `gulp.task` to expose tasks 87 | */ 88 | //gulp.task('build', build); 89 | 90 | /* 91 | * Define default task that can be called by just running `gulp` from cli 92 | */ 93 | gulp.task('default', build); -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at varlyanijatin88@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | --------------------------------------------------------------------------------