isite
Version:
Create High Level Multi-Language Web Site [Fast and Easy]
227 lines (176 loc) • 4.75 kB
Markdown
# Client Side Files Integrated With Isite Framework
- For More Info About Isite Framework https://github.com/absunstar/isite
- custom css , bootstrap , font-awesome
- custom js , jquery , angular
- All Required Fonts
## How To Use
- Goto your Site Folder
- Then Run This Code
```sh
cd apps
git clone https://github.com/absunstar/isite-client
```
- Or Install in Any FOLDER_PATH
- Then Use in Your Site Like This
```js
const site = require('isite')({port : 8080}) // Required Isite
site.importApp(FOLDER_PATH)
```
- Install From npm
```sh
npm install isite-client
```
```js
const site = require('isite')({port : 8080}) // Required Isite
require('isite-client')(site)
```
- to use site theme css
```html
<link rel="stylesheet" href="/x-css/site.css">
```
- to use bootstrap3 css
```html
<link rel="stylesheet" href="/x-css/bootstrap3.css">
<script src="/x-js/jquery.js"></script>
<script src="/x-js/bootstrap3.js"></script>
```
- to use bootstrap4 css
```html
<link rel="stylesheet" href="/x-css/bootstrap4.css">
<script src="/x-js/jquery.js"></script>
<script src="/x-js/bootstrap4.js"></script>
```
- to use semantic css
```html
<link rel="stylesheet" href="/x-css/semantic.css">
<script src="/x-js/jquery.js"></script>
<script src="/x-js/semantic.js"></script>
```
- to use font-awesome css
```html
<link rel="stylesheet" href="/x-css/font-awesome.css">
```
- to use jquery js
```html
<script src="/x-js/jquery.js"></script>
```
- to use angular js
```html
<script src="/x-js/angular.js"></script>
```
- to use site js
```html
<script src="/x-js/site.js"></script>
```
## Work With site Theme
### Default Page with Angular Support
```html
<html lang="En" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/x-css/site.css">
<style x-lang="Ar">
:root {
--direction: rtl;
--text-align: right;
--float: right;
}
</style>
</head>
<body ng-controller="mainController">
<script src="x-js/site.js"></script>
<script src="x-js/angular.js"></script>
<script>
var app = angular.module('myApp', [])
app.controller('mainController', ($scope, $http, $timeout, $rootScope) => {
})
</script>
</body>
</html>
```
### Navbar
```html
<nav class="navbar">
<div class="brand">
<a href="/"> موقع تجريبى </a>
</div>
<ul class="links">
<li>
<a href="/"> لينك 1 </a>
<a href="/"> لينك 2 </a>
<a href="/"> لينك 3 </a>
<a href="/"> لينك 4 </a>
</li>
</ul>
</nav>
```
### Layout
```html
<div class="row">
<div class="col3"></div>
<div class="col6"></div>
<div class="col3"></div>
</div>
```
### Form
```html
<form class="form">
<div class="row10 ">
<div class="col5">
<div class="control">
<label>User Name</label>
<input type="text">
</div>
</div>
<div class="col5">
<div class="control">
<label>User Email</label>
<input type="email">
</div>
</div>
</div>
<div class="row">
<div class="control">
<label>Select Gender</label>
<select>
<option> Male </option>
<option> Female </option>
</select>
</div>
</div>
</form>
```
### Modal
```html
<div id="testModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2> Title Here </h2>
</div>
<div class="modal-body">
Body Here
</div>
<div class="modal-footer center">
<a class="btn bg-red" onclick="site.hideModal('#testModal')"> Close </a>
</div>
</div>
</div>
<a class="btn bg-blue" onclick="site.showModal('#testModal')"> Show Test Modal </a>
```
### Fixed Menu
- right-fixed-menu
- left-fixed-menu
- bottom-fixed-menu
```html
<ul class="right-fixed-menu">
<li><a href=""> Item 1 </a></li>
<li><a href=""> Item 1 </a></li>
<li><a href=""> Item 1 </a></li>
<li><a href=""> Item 1 </a></li>
</ul>
```