0% found this document useful (0 votes)
86 views5 pages

Native Fier (NPM)

The document lists several tools and libraries for building applications, including Nativefier for converting websites to desktop apps, CSS for hamburger menus, OkayNav for responsive menus, Vue.js for better user interactions, and Flexbox CSS for positioning elements. Links are provided for each tool describing its use and providing examples. The document serves as a reference list of resources for developing applications.

Uploaded by

Milos Cvijić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
86 views5 pages

Native Fier (NPM)

The document lists several tools and libraries for building applications, including Nativefier for converting websites to desktop apps, CSS for hamburger menus, OkayNav for responsive menus, Vue.js for better user interactions, and Flexbox CSS for positioning elements. Links are provided for each tool describing its use and providing examples. The document serves as a reference list of resources for developing applications.

Uploaded by

Milos Cvijić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 5

Milos Cvijic

Spisak biblioteka za izradu app

NATIVE FIER (npm)


NATIVE FIER pretvara web site u aplikaciju. Pre koriscenja istog instalirati
node.js, NATIVE FIER je baziran na electron-u.
Vise o NATIVE FIER-U
https://www.npmjs.com/package/nativefier
http://electron.atom.io/

CSS Hamburger
"Super dugmici" Slika ispod govori vise o njima.

Exaple code:
<!DOCTYPE html>
<html>
<head>
<title>HAMBURGER</title>
<link rel="stylesheet" type="text/css" href="hamburgers.min.css">
</head>

<body>

<button class="hamburger hamburger--elastic" style="outline:none"


type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>

<script>
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
</script>

</body>
</html>
Demo Page: https://jonsuh.com/hamburgers/

Github Page: https://github.com/jonsuh/hamburgers

okayNav
okayNav is a simple to use jQuery plugin that lets you turn any regular menu
into a responsive menu. Be sure to checkout okayNav here:
https://github.com/VPenkov/okayNav

Example:
<!DOCTYPE html>
<html>
<head>
<title>Okay Nav</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="okaynav.css">
</head>
<body>

<nav id="mynav" class="okayNav">


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
<li><a href="#">Nav 8</a></li>
</ul>
</nav>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scri
pt>
<script type="text/javascript" src="okaynav.js"></script>

<script>
$(document).ready(function(){
$('#mynav').okayNav();
});
</script>

</body>
</html>

style.css
body{
padding:0px;
margin:0px;
text-align:center;
}

#mynav ul{
margin:0px auto;
padding:0px;
border:0px;
display:block;
}

#mynav ul li{
display:inline-block;
margin:0px;

clear:both;
}

#mynav ul li a{
padding:10px;
display:block;
}

VUE.JS
JavaScript Biblioteka, namenjena boljoj interakciji sa korisnikom obavezno
pogledati!
https://vuejs.org

FLEXBOX CSS
Za centriranje i pozicioniranje elemenata u CSS-u ozbiljno stivo obavezno!
https://devdojo.com/episode/flexbox-intro
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Predprocesor: http://www.sitepoint.com/6-current-options-css-preprocessors/

You might also like