Focus.js is a replacement for CSS (and even HTML) in web development.
It is a series of JavaScript functions that are using DOM to manipulate HTML element color, position, dimension, and more.
Traditional web development needs more than 3 programming skills to write a single website:html, javascript, and CSS (+ many libraries/frameworks).
The easier approach is to focus on javascript which is more capable and easier.
Js is able to produce and manipulate the HTML elements Using its DOM Class.
In this way, your efforts will be more effective. Focus.js is the answer to such a need.
Focus.js is a framework for making coding and debugging web development much more straightforward, by focusing on one skill instead of 3.
It generates Html DOM elements dynamically on the fly. So you even don't need to have any html code!
- ➡️ Focus on coding instead of disruption made by switching between skills.
- ☁️ Separation of real concerns in front-end development: layout, look and feel, Intractions, and states.
- ♓ Much less coding.
- 📵 Much fewer errors.
- 🔁 Much easier to follow your code.
- ✳️ Straightforward debugging.
- ⏩ Much more speed of product delivery.
- 💠 Endless possibilities and extensibility
- 🚯 no dependency on other libraries.
- 🔐 Full compatibility.
- 👀 Minimum learning curve and easy to use.
- ☁️ Lightweight.
- 🔁 Extensibility: Base Objects are in focusBase.js but you can make Composite objects on top of it.
- ☁️ Can be used both in server side and in local.
When you use Focus.js functions, It generates Html elements dynamically on the fly.
For example when you write:
Layout.RadioBoxes("Choose one: ",["Conventinal","none-conventional"]);
it generates these codes dynamically on the fly :
<div>
<p> Type </p>
<input name='rb1' type='radio' />Conventinal</input>
<input name='rb2' type='radio' />none-Conventinal</input>
</div>
Using Focus.js elements inside your HTML:
For example to insert a radio button inside div2
<div id="div1">
<script src='mysrc1.js'></script>
</div>
<div id="div2">
<script src='mysrc2.js'></script>
</div>
//mysrc2.js
const parentElement = document.currentScript.parentNode;
Layout.RadioBoxes(parentElement,"Choose one: ",["Conventinal","none-conventional"]);
There are two demos for two editions of NodeJs and local edition:
1- In \Demo -NodeJs\ folder: for server side version 2- In \Demo -local\ folder : for local usage
FocusLayout functions:
NewLine ( parent) // is <br>
RadioBoxes ( parent, title,arrItems, name) // is a group of radio boxes
CheckBoxes ( parent, title, arrItems) // is a group of checkBoxes
Range ( parent, title, arrValues ) // is a numbers range selector
Lists( parent, arrItems) // is a unordered list
Image ( parent, source,CSS) // is an image
Button ( parent, title,onclickFunction)
Div ( parent)
Container ( parent)
Link ( parent, title, url)
Label ( parent, title)
CheckBox ( parent, title)
TextBox ( parent, title, val)
DropDown ( parent, title, arrItems)
Table ( parent)
Header ( parent, title)
LookFeel functions
Css (obj,cssName) // set css to the object
Border(obj,width,color)
BoxShadow(obj)
Dimensions(obj,width,height)
FullWidth(obj)
StyleButton(objBtn)
Margin(obj,val)
Padding(obj,val)
AlignHCenter(obj)
AlignVCenter(obj)
align(obj,vertical,horizontal)
font(obj,family,size)
colors(obj,color,backColor)
hoverStyle(obj,style)
ComplexComponents
simpleDatePicker(parent,title)