Roots/Sage Customisations
Add Hamburgers menu:
yarn add hamburgers
Add following to common.js:
init() {
// JavaScript to be fired on all pages
$('.hamburger').click(function() {
$(this).toggleClass('is-active');
});
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
},
};
Then follow class names and styling info here - https://jonsuh.com/hamburgers/
Add rfs responsive text resizing:
yarn add rfs
Add animate.css (jquery might be better option if complex animations required but this is more lightweight:
yarn add animate.css
Add fontawesome the right way: Load the core files:
yarn add fortawesome/fontawesome-svg-core
Load whichever library of icons you want/all of them:
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
In main.js: // import then needed Font Awesome functionality
import { library, dom } from '@fortawesome/fontawesome-svg-core';
// import the Facebook and Twitter icons
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons';
// add the imported icons to the library
library.add(faFacebook, faTwitter);
// tell FontAwesome to watch the DOM and add the SVGs when it detects icon markup
dom.watch();
Lightweight facebook and liknedin share button on any post:
<a href="https://www.facebook.com/sharer.php?u={{ get_permalink() }}" target="_blank" style="color: #636363;"><i class="fab fa-facebook"></i></a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ get_permalink() }}&title={{ get_the_title() }}" target="_blank" style="color: #636363;"><i class="fab fa-linkedin"></i></a>
Add Google fonts: In setup.php right under namespace App > use ...... :
function google_fonts_url()
{
return 'https://fonts.googleapis.com/css?family=' . urlencode('Montserrat:400,600|Roboto:300,400&display=swap');
}
in setup.php right above the wp_enqueue_style('sage/main.css', line under add_action('wp_enqueue_scripts', function:
wp_enqueue_style('google/fonts', \App\google_fonts_url(), false, null);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent