Hey guys. Here is a little component I made today. feel free to use it, learn a little about polymer from it, extend it or whatever else you like. 🤝
![[Image: DYSbejx.png]](https://i.imgur.com/DYSbejx.png)
![[Image: vEHIjFw.png]](https://i.imgur.com/vEHIjFw.png)
Its basically a website header that is fixed (scrolls with the page), responsive (flexbox) and is a web component which is what the kool kids are doing. Its important to keep in mind that you should not use this on a site that people will be accessing from old browsers. Polymer makes it work in all modern browsers but if you start going back further then it will fail. This is new technology so basic browser support applies like always.
On the plus side though: its very easy to set up, literally put polymer at the top of your page then copy the one line import below, then you're ready to roll!
GET POLYMER HERE
Then just put this in your <head> :
Thats all you need to start building the navigation bar using your new custom elements (thats part of web components for those who don't know)
For example:
Will give you the result in the image above. Also a good thing to note is that the css, classes and id's inside the component will not leak out into the rest of your app, so don't worry about conflicting styles etc.
I have tried to lay the components, styles and javascript out as neatly as possible so that it should be relatively easy to read through and change/extend for anyone who wants to learn/use/fuck with it.
Feel free to post anything you dont like or just your 2 cents here, its definitely not a work of art so I'm expecting some constructive criticism for sure. 🤝
Get it here: https://github.com/Tasemu/simpl-site-header
Its basically a website header that is fixed (scrolls with the page), responsive (flexbox) and is a web component which is what the kool kids are doing. Its important to keep in mind that you should not use this on a site that people will be accessing from old browsers. Polymer makes it work in all modern browsers but if you start going back further then it will fail. This is new technology so basic browser support applies like always.
On the plus side though: its very easy to set up, literally put polymer at the top of your page then copy the one line import below, then you're ready to roll!
GET POLYMER HERE
Then just put this in your <head> :
Code
<link rel="import" href="/path/to/simpl-site-header.html">Thats all you need to start building the navigation bar using your new custom elements (thats part of web components for those who don't know)
For example:
Code
<site-header>
<a href="#" class="home">Home</a>
<mobile-menu-button></mobile-menu-button>
<header-links>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</header-links>
</site-header>Will give you the result in the image above. Also a good thing to note is that the css, classes and id's inside the component will not leak out into the rest of your app, so don't worry about conflicting styles etc.
I have tried to lay the components, styles and javascript out as neatly as possible so that it should be relatively easy to read through and change/extend for anyone who wants to learn/use/fuck with it.
Feel free to post anything you dont like or just your 2 cents here, its definitely not a work of art so I'm expecting some constructive criticism for sure. 🤝
Get it here: https://github.com/Tasemu/simpl-site-header
