{"id":18667977,"url":"https://github.com/polar-nik/blank-layout","last_synced_at":"2026-02-05T06:01:39.225Z","repository":{"id":208421488,"uuid":"87692565","full_name":"polar-nik/blank-layout","owner":"polar-nik","description":"Small blank template for creating layouts","archived":false,"fork":false,"pushed_at":"2024-12-20T09:17:16.000Z","size":6014,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T20:05:07.820Z","etag":null,"topics":["css","html","html5-layout","quick-start","quick-start-template","starter-kit","template","web"],"latest_commit_sha":null,"homepage":"https://polar-nik.github.io/blank-layout/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/polar-nik.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-04-09T08:02:25.000Z","updated_at":"2025-01-28T13:42:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"bec76414-d9b5-420a-9125-64e69a76b328","html_url":"https://github.com/polar-nik/blank-layout","commit_stats":null,"previous_names":["polar-nik/blank-layout"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polar-nik%2Fblank-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polar-nik%2Fblank-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polar-nik%2Fblank-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polar-nik%2Fblank-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polar-nik","download_url":"https://codeload.github.com/polar-nik/blank-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248496385,"owners_count":21113826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","html5-layout","quick-start","quick-start-template","starter-kit","template","web"],"created_at":"2024-11-07T08:40:51.351Z","updated_at":"2026-02-05T06:01:39.219Z","avatar_url":"https://github.com/polar-nik.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# blank-layout\n\n![Static Badge](https://badgen.net/static/stable/1.4.2)\n\n\nThis is small template to quick start in layout creating.\n\n## What technologies using?\n- HTML5\n- CSS3 + SASS\n- [Bootstrap v5.3.2](https://getbootstrap.com/docs/5.3/getting-started/introduction/)\n- [jQuery v3.7.1](https://jquery.com/)\n\n## What Plugins included?\n- [Swipper v11.0.4](https://swiperjs.com/get-started)\n- [fancyapps/ui v5.0.28](https://fancyapps.com/docs/ui/installation/) (ex. fancybox)\n- [FontAwesome icons v6.4.2](http://fontawesome.com)\n- [axios v1.6.7](https://github.com/axios/axios) (**Warning!** This script need to create simple `POST`/`GET` queries **only** if you are **not using jQuery**. On example page this script commented!)\n\n## How to use Swipper plugin?*\nIt's very simple:\n```html\n\u003c!-- In addition to Swiper's CSS styles, we may need to add some custom styles to set Swiper size --\u003e\n\u003cstyle\u003e\n    .swiper {\n        width: 600px;\n        height: 300px;\n    }\n\u003c/style\u003e\n\n\u003c!-- Slider main container --\u003e\n\u003cdiv class=\"swiper\"\u003e\n    \u003c!-- Additional required wrapper --\u003e\n    \u003cdiv class=\"swiper-wrapper\"\u003e\n        \u003c!-- Slides --\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 1\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 2\u003c/div\u003e\n        \u003cdiv class=\"swiper-slide\"\u003eSlide 3\u003c/div\u003e\n        ...\n    \u003c/div\u003e\n    \u003c!-- If we need pagination --\u003e\n    \u003cdiv class=\"swiper-pagination\"\u003e\u003c/div\u003e\n\n    \u003c!-- If we need navigation buttons --\u003e\n    \u003cdiv class=\"swiper-button-prev\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"swiper-button-next\"\u003e\u003c/div\u003e\n\n    \u003c!-- If we need scrollbar --\u003e\n    \u003cdiv class=\"swiper-scrollbar\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n$(document).ready(function(){\n    const swiper = new Swiper('.swiper', {\n        // Optional parameters\n        direction: 'vertical',\n        loop: true,\n\n        // If we need pagination\n        pagination: {\n            el: '.swiper-pagination',\n        },\n\n        // Navigation arrows\n        navigation: {\n            nextEl: '.swiper-button-next',\n            prevEl: '.swiper-button-prev',\n        },\n\n        // And if we need scrollbar\n        scrollbar: {\n            el: '.swiper-scrollbar',\n        },\n    });\n});\n\u003c/script\u003e\n```\n\n## How to use fancybox plugin?*\nIt's much easier than using swipper slider :)\n```html\n\u003ca data-fancybox=\"gallery\" href=\"big_image.jpg\"\u003e\u003cimg src=\"small_image.jpg\" alt=\"imagee\"\u003e\u003c/a\u003e\n\u003cscript\u003eFancybox.bind(\"[data-fancybox]\");\u003c/script\u003e\n```\n\n### If there's a modal window and how to use them?\n\nThis will help us a fancybox plugin:\n\nYou have to place a `DIV` container into the content of the page:\n```html\n\u003ca data-fancybox data-src=\"#hidden-content\" href=\"javascript:;\"\u003e\n  Show modal window\n\u003c/a\u003e\n```\n\nThen simply create a link using `data-src` attribute that matches CSS id selector of the element you want to open (`#hidden-content` in this example):\n```html\n\u003cdiv style=\"display: none;\" id=\"hidden-content\"\u003e\n  \u003ch2\u003eHello\u003c/h2\u003e\n  \u003cp\u003eWorld!\u003c/p\u003e\n\u003c/div\u003e\n```\n\nAnd don't forget to initialize it!\n```html\n\u003cscript\u003e\n    Fancybox.bind(\"[data-fancybox]\", {\n        // Your custom options\n    });\n\u003c/script\u003e\n```\n\n## How to use axios?*\n**axios** - Promise based HTTP client for the browser and node.js\n\nPerforming a `GET` request:\n```javascript\naxios.get('/user', {\n    params: {\n      ID: 12345\n    }\n  })\n  .then(function (response) {\n    console.log(response);\n  })\n  .catch(function (error) {\n    console.log(error);\n  }\n);\n```\nPerforming a `POST` request:\n```javascript\naxios.post('/user', {\n    firstName: 'Fred',\n    lastName: 'Flintstone'\n  })\n  .then(function (response) {\n    console.log(response);\n  })\n  .catch(function (error) {\n    console.log(error);\n  }\n);\n```\n\n## In 1.4.2 version:\n\n**updates:**\n- preloader remover in `example.html` has been updated for smoother hiding\n\n***\n\n*\\* For more documentation please visit official site.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolar-nik%2Fblank-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolar-nik%2Fblank-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolar-nik%2Fblank-layout/lists"}