Skip to content

Instantly share code, notes, and snippets.

@josanua

josanua/front-end.html

Last active December 15, 2023 09:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save josanua/51e9c8cdb52084dd904009e17bddab5d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save josanua/51e9c8cdb52084dd904009e17bddab5d to your computer and use it in GitHub Desktop.
Download ZIP
Front End Helper
Raw
front-end.html
<!-- Util links -->
Font-awesome v.5: https://kit.fontawesome.com/a076d05399.js
Meta tags
<!-- For bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- To prevent Mobile Safari from automatically detecting phone numbers, add the following meta tag to the top of the page: -->
<meta name="format-detection" content="telephone=no">
<!-- Meta keywords, SEO -->
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Full Social Media Tag Template: Article -->
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />
<!-- Ico img -->
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/images/studio.ico" sizes="64x64" type="image/png">
<!-- Include CSS -->
<link rel="stylesheet" href="style.css" >
<!-- Block Elements -->
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1><h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
<!-- Inline Elements -->
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script></script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
<!-- General -->
display:
block,
inline,
inline-block,
none;
- ****** Forms ****** -
<!-- HTML5 Input Types, HTML5 added several new input types: -->
color
date
datetime-local
email
month
number
range
search
tel
time
url
week
<!-- All input types -->
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<!-- link call, phone link, tel link, mail link -->
<a href="tel:1-562-867-5309">Click to Call!</a>
<a href="mailto:someone@example.com">Send email</a>
- ****** js plugins ****** -
Magnific Popup - https://dimsemenov.com/plugins/magnific-popup/documentation.html#including-files
Slider Slick JS - http://kenwheeler.github.io/slick/
<!-- retina img's -->
https://brianflove.com/2014/08/07/retina-display-images/
<!-- use srcset -->
<img src="/images/foo.png" alt="bar" srcset="/images/foo.png 2x" />
<img
src="/images/foo.png"
alt="bar"
srcset="/images/foo-medium.png 1024w,
/images/foo-large.png 2048w,
/images/foo.png 800w"
/>
<!-- use picture -->
<picture>
<source media="(min-width: 1024px)" srcset="foo-large.jpg 1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />
<source srcset="foo@2x.jpg 2x, foo.jpg 1x" />
<img src="foo.jpg" alt="Bar" />
</picture>
<!-- old, simple, alternative method, use mediaqueries -->
<img src="foo.jpg" height="150" width="150">
img{
width: 50%;
height: 50%;
}
<!-- if bg -->
.box{
background-image: url(myIMG.png);
background-size: 150px 150px;
}
<!-- in the last one we have script retina.js -->
- ****** Simple BS4 and Vanila JS Validation ****** -
<!-- Form novalidate atribute -->
<!-- Form class needs-validation -->
<!-- Input required -->
<form target="#" id="subscribe-form" class="needs-validation" novalidate>
<div class="form-group">
<input type="email" class="form-control" id="subscribe-email" placeholder="E-mail" required>
</div>
<button type="submit" class="btn btn-primary">Abonare</button>
</form><!-- ./END Form -->
<script type="text/javascript">
var subscribe_form = document.getElementById('subscribe-form');
form.addEventListener('submit', function(event){
if(form.checkValidity() === false ){
event.preventDefault();
event.stopPropagation();
document.getElementById("username").placeholder = "Introduceți nume utilizator!";
document.getElementById("password").placeholder = "Introduceți Parola!";
}
form.classList.add('was-validated');
});
</script>
- ****** jQuery ****** -
//include jQuery
$( document ).ready(function() {
console.log( "ready!" );
});
/* Download button */
https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript
/* Working good */
<button type="submit" class="btn btn-dark d-none d-lg-inline-block" onclick="window.location.href='CV.pages'">Download!</button>
/* jQuery method */
$("#download-button").click(function(){ window.location = 'CV.pages' });
/* another method, some artefacts then loading*/
<button type="submit" onclick="window.open('file.doc')">Download!</button>
- ****** Masonry Effect ****** -
https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/#article-header-id-0
<!-- Simple Library -->
https://github.com/desandro/colcade
<!-- ****** bootstrap open submenu on open ****** -->
<!-- https://bootstrap-menu.com/detail-basic-hover.html -->
<!-- with JS -->
<script>
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {
document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
everyitem.addEventListener('mouseover', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = el_link.nextElementSibling;
el_link.classList.add('show');
nextEl.classList.add('show');
}
});
everyitem.addEventListener('mouseleave', function(e){
let el_link = this.querySelector('a[data-bs-toggle]');
if(el_link != null){
let nextEl = el_link.nextElementSibling;
el_link.classList.remove('show');
nextEl.classList.remove('show');
}
})
});
}
// end if innerWidth
});
// DOMContentLoaded end
</script>
<!-- or with CSS -->
<style>
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link{ }
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
</style>
<!-- scss BS5 breakpoints for using in templates -->
/* Breakpoints (for using in my code)
--------------------------------------------- */
$xs: 0;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400px;
/* nice toggling, bs5 toggler */
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<!-- <span class="navbar-toggler-icon"></span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!-- <span class="navbar-toggler-text">Menu</span> -->
</button>
.navbar-toggler {
float: none;
border: 0;
margin-right: 0;
border-color: #ddd;
color: #ff0844;
&:focus {
box-shadow: none;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
border: 1px solid;
transition: .3s ease;
position: relative;
background-color: #888;
margin-top: 4px;
&+.icon-bar {
margin-top: 4px;
}
}
}
.navbar-toggler {
&[aria-expanded=false] {
.icon-bar {
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
top: 0;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center
}
}
}
&[aria-expanded=true] {
.icon-bar {
&:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 6px
}
&:nth-child(2) {
width: 0;
opacity: 0
}
&:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: -6px
}
}
}
}
<!-- ****** Responsive image tech ****** -->
<!-- https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ -->
<!-- with srcset tech -->
sizes="[media query] [length],
[media query] [length],
etc…
[default length]"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment