{"id":24528211,"url":"https://github.com/ztrimus/bootstrap4","last_synced_at":"2026-04-16T07:31:30.083Z","repository":{"id":104691293,"uuid":"334232357","full_name":"Ztrimus/Bootstrap4","owner":"Ztrimus","description":"Front-End Web UI Frameworks and Tools","archived":false,"fork":false,"pushed_at":"2021-01-29T18:56:35.000Z","size":5504,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T16:43:56.860Z","etag":null,"topics":["bootstrap","css","sass","scss"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ztrimus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-29T18:39:49.000Z","updated_at":"2021-01-29T18:56:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"1dc57682-418d-49a1-ae14-831d97087be4","html_url":"https://github.com/Ztrimus/Bootstrap4","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ztrimus/Bootstrap4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ztrimus%2FBootstrap4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ztrimus%2FBootstrap4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ztrimus%2FBootstrap4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ztrimus%2FBootstrap4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ztrimus","download_url":"https://codeload.github.com/Ztrimus/Bootstrap4/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ztrimus%2FBootstrap4/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31876312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","sass","scss"],"created_at":"2025-01-22T06:34:11.142Z","updated_at":"2026-04-16T07:31:30.065Z","avatar_url":"https://github.com/Ztrimus.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-end UI Frameworks\n### example\n- Bootstrap\n- Semantic UI\n- Foundation\n- Materialize\n- Material UI\n- Pure\n- Skeleton\n- UIKit\n- Miligram\n- Susy\n\n### Why Front-end Web UI Frameworks\n- Responsive Web Design\n- Cross browser compatibliity\n- Increased Productivity\n- Community Support\n\n# Bootstrap 4\n- install bootstrap in project\n```sh\nnpm install bootstrap@4.0.0 --save\nnpm install jquery@3.3.1 popper.js@1.12.9 --save\n```\n- include below code in index.html `head` tag\n```html\n\u003c!-- Required meta tags always come first --\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n\u003cmeta http-equiv=\"x-ua-compatible\" content=\"ie=edge\"\u003e\n\n\u003c!-- Bootstrap CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"node_modules/bootstrap/dist/css/bootstrap.min.css\"\u003e\n```\n\n- include at end of `body` tag\n**jQuery first, then Popper.js, then Bootstrap JS.**\n```html\n\u003c!-- jQuery first, then Popper.js, then Bootstrap JS. --\u003e\n\u003cscript src=\"node_modules/jquery/dist/jquery.slim.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/popper.js/dist/umd/popper.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n```\n- Why we put javascript at bottom of page\n\u003e Because when you are loading the page from a web server, you want the CSS classes to be loaded immediately so that as the page starts rendering, when the JavaScript is fetched, the JavaScript needs to execute in order to make changes to your page with the JavaScript code, and that will take a little bit of time. So you don't want the user to be waiting for the entire page to be loaded before they see something in their browser window. So that's why we normally load the JavaScript classes towards the end of our html page just before the body tech.\n\n# Responsive Design\n- important aspects\n  1. Grid System\n  2. Fluid Image\n  3. Media Queries\n\n## 1. Grid System\n- Bootstrap grid system designed to be responsive, Mobile first and fluid\n- Grid system take advantage of \"CSS Flexbox layout\"\n\n### Useful bootstrap4 classes :\n1. `container` `row` `col-*` `col-xs*` `col-sm*` `col-md*` `col-lg*` `col-xl*`\n2. Horizontal Alignment\n  - `justify-content-center`: class for align div horizontally center\n  - `justify-content-around`: space around/surrounding divs equally spaced\n  - `justify-content-between`: space in-between divs equally spaced\n  - also have option like `justify-content-start` `justify-content-end`\n3. Vertical Alignment\n  - `align-items-center`: class for align child-div vertically center\n  - also have option like `align-items-start` `align-items-end`\n  - `align-self-center`: class for align self-div vertically center\n  - also have option like `align-self-start` `align-self-end`\n4. Reordering Columns\n  - .flex-first - Displayed first.\n  - .flex-last - Displayed last.\n  - .flex-unordered - Displayed between first and last.\n  - there is also option like `*-pull-*` `*-push-*`\n- `list-unstyled`\n\n### Navbars and Breadcumbs\n1. .navbar .navbar-dark .navbar-expand-sm\n  - navbar-brand\n  - navbar-nav\n    - nav-item\n    - nav-link\n2. .navbar-toggler\n3. .navbar-collapse\n4. .breadcrumb\n  - .breadcrumb-item\n\n### Fonts\n1. Font Awesome\n  - `npm install font-awesome --save`\n2. Bootstrap Social Icon\n  - `npm install bootstrap-social --save`\n3. Information Architecture\n    - [Information Architecture 101: Techniques and Best Practices](https://www.webfx.com/blog/web-design/information-architecture-101-techniques-and-best-practices/) (Quick introduction to Information architecture with respect to website design)\n    - [What is information architecture?](https://www.steptwo.com.au/papers/kmc_whatisinfoarch/) (Good definition and explanation about the topic)\n    - [Designing A Winning Navigation Menu: Ideas and Inspirations](https://www.hongkiat.com/blog/navigation-design-ideas-inspiration/) (Good suggestions on how to design navigation for a website)\n    - [Are You Making These Common Website Navigation Mistakes?](https://neilpatel.com/blog/common-website-navigation-mistakes/) (Worth reading at least to learn what not to do)\n    - [3 Reasons We Should Stop Using Navigation Bars](http://www.webdesignerdepot.com/2014/01/3-reasons-we-should-stop-using-navigation-bars/) (A provocative view on navigation bars)\n4. Breadcrumbs\n    - [Breadcrumb Navigation Examined: Best Practices \u0026 Examples](https://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/) (Great suggestions on using breadcrumbs for navigation)\n    - [Breadcrumb Navigation: A Guide On Types, Benefits And Best Practices](https://www.woorank.com/en/blog/breadcrumb-navigation-a-guide-to-types-benefits-and-best-practices) (Another great resource on types and usage of breadcrumbs)\n5. Icon Fonts\n    - [Why And How To Use Icon Fonts](http://vanseodesign.com/web-design/icon-fonts/) (a good overview of icon fonts)\n    - [Icon Fonts are Awesome](https://css-tricks.com/examples/IconFont/) (another good introduction to icon fonts)\n    - [Font Awesome](https://fontawesome.com/6?next=%2F%3Ffrom%3Dio) (one of the most popular icon fonts)\n    - [Get started with FontAwesome](https://fontawesome.com/start) (good official help)\n    - [Bootstrap-Social](http://lipis.github.io/bootstrap-social/)\n    - [The Final Nail in the Icon Fonts Coffin?](https://www.sitepoint.com/final-nail-icon-fonts-coffin/) (a controversial opinion piece on icon fonts)\n    - [Using SVGs](https://gomakethings.com/using-svgs/) (alternative to icon fonts)\n### Forms\n1. .form-group\n  - label(.col-form-label)[for]\n  - .input(.form-control, .form-check-input) [type, id, name, placeholder] (NOTE: `id` == `for` in label)\n    - type: text, tel, email, checkbox, submit\n  - .form-check\n  - select((.form-control)\n    - option\n  - textarea((.form-control)[e.g. rows=\"12\"]\n\n2. [When To Use The Button Element](https://css-tricks.com/use-button-element/) (The multifaceted button element)\n\n### Table and Cards\n#### Description List\n- Description List Tag - `dl`\n  - Description term - `dt`\n  - Term description - `dd`\n- The \u003cdd\u003e tag is used to describe a term/name in a description list.\n- The \u003cdd\u003e tag is used in conjunction with \u003cdl\u003e (defines a description list) and \u003cdt\u003e (defines terms/names).\n\n#### BLockquote\n- `blockquote` tag with `.blockquote` css class\n- `footer` tag with `.blockquote-footer` css class\n- `cite` tag\n```html\n\u003cblockquote class=\"blockquote\"\u003e\n    \u003cp class=\"mb-0\"\u003eYou better cut the pizza in four pieces because\n        I'm not hungry enough to eat six.\u003c/p\u003e\n    \u003cfooter class=\"blockquote-footer\"\u003eYogi Berra,\n        \u003ccite title=\"Source Title\"\u003eThe Wit and Wisdom of Yogi Berra,\n            P. Pepe, Diversion Books, 2014\u003c/cite\u003e\n    \u003c/footer\u003e\n\u003c/blockquote\u003e\n```\n\n### Images and Media\n#### Images\n- `img-fluid` - for responsive image\n- `img-thumbnail` - for border\n- `rounded`*{top|bottom|left|right} - for rounded edge\n- `rounded-circle` - for circle image\n- Images with cards\n  - card-img-top\n\n#### Media\n- `.media` class\n- `.media-body`\n- `img` tag need some `.d-flex` class to show img to left side of content\n- `.media-top`, `.media-bottom` to align image to media\n\n#### Responsive embed\n- `.embed-responsive` `.embed-responsive-16by9`\n- `iframe`, `video` \u0026 `object` tag with class `.embed-responsive-item`\n\n### Alerts, Badges, Progress bars\n\n#### Badge\n- .badge .badge-danger .badge-pill .badge-secondary\n\n#### Alert\n- .alert .alert-warning .alert-success \n- .alert-dismissible : allow to include cross sign which user can use to close\n- \u003cdiv role=\"alert\"\u003e\u003c/div\u003e\n\n#### progress bar\n- .progress\n  - .progress-bar .progress-bar-striped .bg-danger\n- \u003cdiv role=\"progressbar\"\u003e\u003c/div\u003e\n\n## Bootstrap JavaScript Components\n- to include **javascript** in html code you need to write lot of code in JS. need separate js file\n- to avoid this next best things is **jquery** which also need code but little. which we include in \n\u003cscript\u003e\u003c/script\u003e tags.\n- Where as **Bootstrap Js Component** don't need writie single line of code and we can use in HTML markup easily.\ni.e. `data-*` attributes in tags (data-toggle, data-spy)\n\n1. Tabs and Tabbed Navigation\n2. Collapse and Accordion\n\n### 1. Tabs and Tabbed Navigation\n- Tabs require Javascript support to be enabled for navigating the content.\n- below, `data-toggle` is bootstrap JS component\n- ul.nav.nav-tabs\n  - li.nav-item\n    - a.nav-link.active[role=\"tab\", data-toggle=\"tab\" href=demo]\n- div.tab-content\n  - div.tab-pane.fade.show.active#demo[role=\"tabpanel\"]\n```html\n\u003c!-- Tab Navigation --\u003e\n\u003cul class=\"nav nav-tabs\"\u003e\n  \u003cli class=\"nav-item\"\u003e\n      \u003ca href=\"#peter\" class=\"nav-link active\" role=\"tab\" data-toggle=\"tab\"\u003ePeter Pan, CEO \u003c/a\u003e\n  \u003c/li\u003e\n  ..\n  .\n  \u003cli class=\"nav-item\"\u003e\n      \u003ca href=\"#saurabh\" class=\"nav-link\" role=\"tab\" data-toggle=\"tab\"\u003eSaurabh Zinjad, Founder \u003c/a\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\u003c!-- Tab Content --\u003e\n\u003cdiv class=\"tab-content\"\u003e\n  \u003cdiv class=\"tab-pane fade show active\" id=\"peter\" role=\"tabpanel\"\u003e\n    \u003c!-- Content --\u003e\n  \u003c/div\u003e\n  ..\n  .\n  \u003cdiv class=\"tab-pane fade\" id=\"peter\" role=\"tabpanel\"\u003e\n    \u003c!-- Content --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### 2. Collapse and Accordion\n- Accordion's Emmet formula\n```html\n#accordion\u003e(.card\u003e(.card-header#agumbehead[role=\"tab\"]\u003eh3.mb-0\u003ea.collapsed[data-toggle=\"collapse\" data-target=\"#agumbe\"])+(.collapse#agumbe[data-parent=\"#accordion\"]\u003e.card-body))*number_of_cards\n```\n\n```html\n\u003cdiv id=\"accordion\"\u003e\n  \u003cdiv class=\"card\"\u003e\n      \u003cdiv class=\"card-header\" role=\"tab\" id=\"peterhead\"\u003e\n          \u003ch3 class=\"mb-0\"\u003e\n              \u003ca data-toggle=\"collapse\" data-target=\"#peter\"\u003e\n                  \u003c!-- Heading --\u003e\n              \u003c/a\u003e\n          \u003c/h3\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"collapse show\" id=\"peter\" data-parent=\"#accordion\"\u003e\n          \u003cdiv class=\"card-body\"\u003e\n            \u003c!-- Content --\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  ...Other cards\n\u003c/div\u003e\n```\n\n### 3. Revealing Content\n1. tooltips\n2. popovers\n3. modals\n\n#### 1. Tooltip\n- `data-html=true`: can style tooltip content using html markup.\n```html\n\u003ca role=\"button\" href=\"#reserveform\" class=\"btn-block nav-link btn-warning\" data-toggle=\"tooltip\" data-html=\"true\" title=\"Or Call  us at \u003cbr\u003e\u003cstrong\u003e+852 12345678\u003c/strong\u003e\" data-placement=\"bottom\"\u003e\n    Reserve Table\n\u003c/a\u003e\n\n\u003cscript\u003e\n    $(document).ready(function () {\n        $('[data-toggle=\"tooltip\"]').tooltip();\n    })\n\u003c/script\u003e\n```\n\n## Note: A single button can support only one Javascript plugin(bootstrap JS Component) via the data-* attributes.\n\n### Bootstrap and JQuery\nBootstrap Js Components build upon jquery\n#### JQuery\n-  Lightweight Javascript Library\n- Feature-rich:\n  - HTML/DOM/CSS Manipulation\n  - HTML Event Methods\n  - AJAX\n  - Effects and animation\n#### usage\n```js\n$(selector).action()\n```\n- $: Define/access JQuery\n- selector: to query and find html element\n- action: action to be performed on the elements\n- e.g. $(\"p\").hide()\n\n### CSS Preprocessors\n1. LESS\n2. SCSS/SASS\n\nyou can import custom defined scss/less file into other scss/less file.\n```css\n@import \"foo.min.css\"\n```\n\n#### 1. LESS\n- define variables\n\n\n#### 1. Variable Declaration and Usage\n```css\n/*2. SCSS*/\n$my-var: 300px;\n.nav-height {\n  height: $my-var;\n}\n\n/*1. LESS*/\n@my-var: 300px;\n.nav-height {\n  height: @my-var;\n}\n```\n\n#### 2. Nesting\n```css\n.carousel {\n  background: black;\n  .carousel-item {\n    height: 300px;\n    .img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      min-height: 300px;\n    }\n  }\n}\n```\n\n#### 3. Mixin\n```css\n/*Scss*/\n@mixin .zero-margin {\n  margin: 0 auto;\n  background: white;\n}\n\n.row-header {\n  @include zero-margin;\n  padding: 0px auto;\n}\n\n/*Less*/\n.zero-margin {\n  margin: 0 auto;\n  background: white;\n}\n\n.row-header {\n  .zero-margin;\n  padding: 0px auto;\n}\n```\n\n#### 3. Mixin with parameters\n```css\n/*Scss*/\n@mixin .zero-margin($pad-up-dn, $pad-left-right) {\n  margin: 0 auto;\n  padding: $pad-up-dn $pad-left-right;\n}\n\n.row-header {\n  @include zero-margin(0px, 0px);\n  padding: 0px auto;\n}\n\n.row-content {\n  @include zero-margin(50px, 70px);\n  padding: 0px auto;\n  background: white;\n}\n\n/*Less*/\n.zero-margin(@pad-up-dn: 0px, @pad-left-right: 0px) {\n  margin: 0 auto;\n  padding: @pad-up-dn @pad-left-right;\n}\n\n.row-header {\n  .zero-margin();\n  padding: 0px auto;\n}\n\n.row-content {\n  .zero-margin(50px, 0px);\n  min-height: 400px;\n}\n```\n\n#### 4. Mathematical Operation\n```css\n/*SCSS*/\n$carousel-height: 300px;\n.carousel.item {\n  min-height: $carousel-height * 2;\n}\n\n/*LESS*/\n@carousel-height: 300px;\n.carousel.item {\n  min-height: @carousel-height * 2;\n}\n```\n\n## Building and Deployment\n- Example CSS Task for Building deployment\n  - compling sass or less into css\n  - Running autofixer to add any vendor prefixes that are needded\n  - Minification: complier don't care about comments, whitespaces and newline, so it remove it\n  - Concatenation: concate all css files into single file\n- Javascript Task\n  - JShint: check for error and potential problems\n  - concatenation\n  - Uglification: minificaton + mangling (reduce local variable to single letters)\n  - rechecking error\n\n### Automatically recomplie code on-change the file\n- we need to set watch on file\n- NPM model : watch, onChange\n- parallel shell: can execute multiple NPM script parallel\n\n### NPM Scripts\n - Watch\n - onchange\n - parallelshell\n\n## Build a distribution folder for deployement\n- We saving all deployemeny related file into single distribution folder - **dist**.\n- Open .gitignore and update it as follows. We do not want the dist folder to be checked into the git repository.\n```.gitignore\nnode_modules\ndist\n```\n##### Clean out a folder using the clean NPM module.\n```sh\nnpm install --save-dev rimraf\n```\n- past into scripts of package.json\n```json\n\"clean\": \"rimraf dist\",\n```\n##### Copy files from one folder to another / copying fonts\n- Our project uses font-awesome fonts. These need to be copied to the distribution folder. To help us do this, install the copyfiles NPM module globally as follows:\n```sh\nnpm -g install copyfiles\n```\n- past into scripts of package.json\n```json\n\"copyfonts\": \"copyfiles -f node_modules/font-awesome/fonts/* dist/fonts\",\n```\n##### Prepare a minified and concatenated css file from all the css files used in your project\n- We use the imagemin-cli NPM module to help us to compress our images to reduce the size of the images being used in our project. Install the imagemin-cli module as follows:\n```sh\nnpm -g install imagemin-cli\n```\n- past into scripts of package.json\n```json\n\"imagemin\": \"imagemin img/* --out-dir=\\\"dist/img\\\"\",\n```\n\n##### Prepare an uglified and concatenated JS file containing all the JS code used in your project\n- Usemin do concatenation, uglifiaction other task. it requires support of other packages (uglifyjs, cssmin and htmlmin)\n- Then, install the usemin-cli, cssmin, uglifyjs and htmlmin NPM packages as follows:\n```sh\nnpm install --save-dev usemin-cli cssmin uglifyjs htmlmin\n```\n- past into scripts of package.json\n```json\n\"usemin\": \"usemin contactus.html -d dist --htmlmin -o dist/contactus.html \u0026\u0026 usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html \u0026\u0026 usemin index.html -d dist --htmlmin -o dist/index.html\",\n    \"build\": \"npm run clean \u0026\u0026 npm run imagemin \u0026\u0026 npm run copyfonts \u0026\u0026 npm run usemin\"\n```\n- Further we going to combine all css file into single css file. same for js.\n- Open index.html and surround the css links inclusion code as follows.\n- notice `\u003c!-- build:css css/main.css --\u003e` and `\u003c!-- endbuild --\u003e`. These are important\n```html\n\u003c!-- build:css css/main.css --\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/bootstrap/dist/css/bootstrap.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/font-awesome/css/font-awesome.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/bootstrap-social/bootstrap-social.css\"\u003e\n    \u003clink href=\"css/styles.css\" rel=\"stylesheet\"\u003e\n    \u003c!-- endbuild --\u003e\n```\n- Similarly, open index.html and surround the js script inclusion code as follows:\n```html\n    \u003c!-- build:js js/main.js --\u003e\n    \u003cscript src=\"node_modules/jquery/dist/jquery.slim.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/popper.js/dist/umd/popper.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"js/scripts.js\"\u003e\u003c/script\u003e\n    \u003c!-- endbuild --\u003e\n```\n\n## Task Runners - Grunt and Gulp\n\n### Grunt\n#### Installation\n```sh\nnpm install -g grunt-cli\n```\n- This will install the Grunt CLI globally so that you can use them in all projects.\n```sh\nnpm install grunt --save-dev\n```\n- This will install local per-project Grunt to use within your project.\n#### Compiling SCSS to CSS\n- grunt-sass: for SCSS to CSS conversion.\n- time-grunt: generates time statistics about how much time each task consumes\n- jit-grunt: enables us to include the necessary downloaded Grunt modules when needed for the tasks.\n```sh\nnpm install grunt-sass --save-dev\nnpm install time-grunt --save-dev\nnpm install jit-grunt --save-dev\nnpm install node-sass --save-dev \n```\n#### Creating a Grunt File as Gruntfile.js\n```js\n'use strict';\n\nmodule.exports = function (grunt) {\n    // Time how long tasks take. Can help when optimizing build times\n    require('time-grunt')(grunt);\n\n    const sass = require('node-sass');\n\n    // Automatically load required Grunt tasks\n    require('jit-grunt')(grunt);\n\n    // Define the configuration for all the tasks\n    grunt.initConfig({\n        sass: {\n            options: {\n                implementation: sass,\n                outputStyle: 'expanded',\n                sourceMap: true,\n                quiet: true // stop depreciation errors\n            },\n            dist: {\n                files: {\n                    'css/styles.css': 'css/styles.scss'\n                }\n            }\n        }\n    },\n    watch: {\n      files: 'css/*.scss',\n      tasks: ['sass']\n    },\n      browserSync: {\n        dev: {\n          bsFiles: {\n            src : [\n                'css/*.css',\n                '*.html',\n                'js/*.js'\n            ]\n        },\n        options: {\n            watchTask: true,\n            server: {\n                baseDir: \"./\"\n              }\n          }\n      }\n    }\n    );\n\n    grunt.registerTask('css', ['sass']);\n    grunt.registerTask('default', ['browserSync', 'watch']);\n\n};\n```\n- you can run the grunt SASS task by typing the following at the prompt: `grunt css`\n\n#### Watch and Serve Tasks\n```sh\nnpm install grunt-contrib-watch --save-dev\nnpm install grunt-browser-sync --save-dev\n```\n- append further code in Gruntfile.js\n```js\nsass: {\n  // Sass options and configuration\n}\n,watch: {\n  files: 'css/*.scss',\n  tasks: ['sass']\n},\n  browserSync: {\n    dev: {\n      bsFiles: {\n        src : [\n            'css/*.css',\n            '*.html',\n            'js/*.js'\n        ]\n    },\n    options: {\n        watchTask: true,\n        server: {\n            baseDir: \"./\"\n          }\n      }\n  }\n}\n```\n- also add the following task to the Grunt file:\n```js\ngrunt.registerTask('default', ['browserSync', 'watch']);\n```\n- Now if you type the following at the command prompt, it will start the server, and open the web page in your default browser. It will also keep a watch on the files in the css folder, and if you update any of them, it will compile the scss file into css file and load the updated page into the browser (livereload)\n```sh\ngrunt\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fztrimus%2Fbootstrap4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fztrimus%2Fbootstrap4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fztrimus%2Fbootstrap4/lists"}