A JavaScript framework which helps you create awesome dynamic single page websites quickly...
First you need to get the cdn of css and js file
CSS: https://shreyanshshri.github.io/quark/quark.css
JS: https://shreyanshshri.github.io/quark/quark.js
Here is a starter template from where you can start
<DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" ref="https://shreyanshshri.github.io/quark/quark.css" type="text/css" />
</head>
<body>
<script src="https://shreyanshshri.github.io/quark/quark.js"></script>
<script>
const root = div([
// your code goes here
], {
id: 'root'
})
document.body.append(root)
</script>
</body>
</html>
Remember that everything you type should be in the div#root
p('Hello World'),
Bingo we have created our very first quark app
We use ',' at the end instead of ';' as you can see it is a array of elements
- div
- button
- span
- input
- h1 to h5
- img
- ul
- ol
You can also pass an abject as a second parameter to add attributes to elements
p('Hello World' , {
id: 'hello',
classes: 'class1'
}),
- classes
- id
- src
- href
- onclick
- onmouseover
- action
- method But ofcourse you can add more and create a PR :)
You can add multiple classes by passing them as an array
p('Hello World, {
id: 'para',
classes: ['class1', 'class2']
}),
In order to use nasted elements you need to pass the first parameter as an array... It is important to use array even if you have only one element
div([
h1('Hello World'),
p('This is a tiny quark')
], {
id: 'hello',
classes: ['class1', 'class2']
}),
This is a example of how to add Event Listeners to elements..
Currently we have only two... onclick and onmouseover
button('Click Me', {
onclick: someFunc
})
function someFunc(){
alert('Hello')
}
Some elements need different params as follows
input(<placeholder>, <type>, <params (object containing classes etc)> )
img({
src: <src>
})
ol(<items(an array)>, params)
For this we are gonna using map function and Spread Operator
We will be using a sample data but you can fetch it using any api
const data = ['apple', 'mango', 'pineapple, 'guava', 'grapes']
const ele = data.map(fruit => {
return (
p(fruit)
)
})
const root = div([
...ele
], {
id: 'root'
})
document.body.append(root)
Quark also provides some csutom inbuit elements such as navs, alerts and cards.
For now there are only 4 but we will be adding much more in future updates
nav({
name: <name of the company>',
links: [
{
link: <route>,
name: <name to be shown>
}
]
}, {
id: 'nav'
}),
Thats it and you have a responsive nav... Boom
Also you can change the theme of the navbars by adding a few classes
By default is dark
- nav-primary (blue)
- nav-success (green)
- nav-danger (red)
card({
imgSrc,
title,
subtitle,
text,
buttonText
}, {
classes: 'card'
}),
Its quiet simple
loader(),
showAlert({
text: <text-content>
logo
// logo is under development
})
This ends the custom tags section... If you see any bugs, plz create an issue
Or make a PR...
Quark also provides you some default css styling which you can easily implement in your code
Remember how we added classes to element...
We are gonna do exactly the same
p("Hello World", {
classes: ["ml-2", "pl-2" ]
})
Here ml-2 defines margin left of 2rems and same with pl except for it is for padding
- margin-left: ml
- margin-right: mr
- margin-top: mt
- margin-bottom: mb
- margin-left & margin-right: mx
- margin-top & margin-bottom: my
Then you can give the number b/w 1 to 5 like "mb-2" for margin-bottom: 2rem
Same thing for padding except its "p" inplace of "m"
Other stylings are
- container: for 20px padding
- d-inline: for display-inline
- d-block: for display block
- d-flex: for display: flex
- align-center: for align-items: center
- justify-center: for justify-content: center
- text-muted: for light text
- bg-dark: for a darker background
You can styles to buttons as well (defualt is blue)
- btn-success (green)
- btn-danger (red)
- btn-dark (w & B)
So thats it for basic styling... If you want to add more feel free to make a PR :)