1.0.2 • Published 6 years ago
isite-client v1.0.2
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
cd apps
git clone https://github.com/absunstar/isite-client- Or Install in Any FOLDER_PATH
- Then Use in Your Site Like This
const site = require('isite')({port : 8080}) // Required Isite
site.importApp(FOLDER_PATH)- Install From npm
npm install isite-clientconst site = require('isite')({port : 8080}) // Required Isite
require('isite-client')(site)- to use site theme css
<link rel="stylesheet" href="/x-css/site.css">- to use bootstrap3 css
<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
<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
<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
<link rel="stylesheet" href="/x-css/font-awesome.css">- to use jquery js
<script src="/x-js/jquery.js"></script>- to use angular js
<script src="/x-js/angular.js"></script>- to use site js
<script src="/x-js/site.js"></script>Work With site Theme
Default Page with Angular Support
<!DOCTYPE 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">
</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
<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
<div class="row">
<div class="col3"></div>
<div class="col6"></div>
<div class="col3"></div>
</div>Form
<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
<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
<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>