https://github.com/polar-nik/blank-layout
Small blank template for creating layouts
https://github.com/polar-nik/blank-layout
css html html5-layout quick-start quick-start-template starter-kit template web
Last synced: 5 months ago
JSON representation
Small blank template for creating layouts
- Host: GitHub
- URL: https://github.com/polar-nik/blank-layout
- Owner: polar-nik
- License: mit
- Created: 2017-04-09T08:02:25.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-12-20T09:17:16.000Z (over 1 year ago)
- Last Synced: 2025-03-25T20:05:07.820Z (about 1 year ago)
- Topics: css, html, html5-layout, quick-start, quick-start-template, starter-kit, template, web
- Language: SCSS
- Homepage: https://polar-nik.github.io/blank-layout/
- Size: 5.74 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# blank-layout
This is small template to quick start in layout creating.
## What technologies using?
- HTML5
- CSS3 + SASS
- [Bootstrap v5.3.2](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [jQuery v3.7.1](https://jquery.com/)
## What Plugins included?
- [Swipper v11.0.4](https://swiperjs.com/get-started)
- [fancyapps/ui v5.0.28](https://fancyapps.com/docs/ui/installation/) (ex. fancybox)
- [FontAwesome icons v6.4.2](http://fontawesome.com)
- [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!)
## How to use Swipper plugin?*
It's very simple:
```html
.swiper {
width: 600px;
height: 300px;
}
...
$(document).ready(function(){
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
});
```
## How to use fancybox plugin?*
It's much easier than using swipper slider :)
```html
Fancybox.bind("[data-fancybox]");
```
### If there's a modal window and how to use them?
This will help us a fancybox plugin:
You have to place a `DIV` container into the content of the page:
```html
Show modal window
```
Then 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):
```html
Hello
World!
```
And don't forget to initialize it!
```html
Fancybox.bind("[data-fancybox]", {
// Your custom options
});
```
## How to use axios?*
**axios** - Promise based HTTP client for the browser and node.js
Performing a `GET` request:
```javascript
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}
);
```
Performing a `POST` request:
```javascript
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}
);
```
## In 1.4.2 version:
**updates:**
- preloader remover in `example.html` has been updated for smoother hiding
***
*\* For more documentation please visit official site.*
