Tagged with css

Mon May 07, 2018 1:48 PM
activity
Turbolinks and Font Awesome 5 SVG with Javascript
Mon May 07, 2018 1:18 PM
guide
Font Awesome 5 SVG icons use javascript to find <i> tags with an icon class and replaces them with an <svg> tag. Turbolinks online displays these icons on initial page load and/or refresh, however when following a link, Turbolinks reloads the page and not the icons. This guide assumes that you have already loaded font awesome into your project using your preferred method. For what its worth, this guide uses the font awesome CDN more
Thu Apr 26, 2018 4:22 PM
activity
moved sticky footer blog
Thu Apr 26, 2018 2:00 PM
guide
Add style options when initializing the Stripe Element object, like so: var style = { base: { // Add your base input styles here. For example: fontSize: '16px', lineHeight: '24px', iconColor: '#c4f0ff', color: '#fff', fontSmoothing: 'antialiased', fontWeight: 500, '::placeholder': { color: '#ffffff', }, ':-webkit-autofill': { color: '#ffffff', } }, invalid: { iconColor: '#FFC7EE', color: '#FFC7EE', }, }; View all Element options more
Tue Dec 12, 2017 5:00 PM
guide
When your content doesn't fill the page, the footer won't stay at the bottom of the page by default.  There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed.  I don't like these hacky solutions that provide inconsistent results.  Using CSS flex, you can achieve the desired results consistently using only CSS. First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample. <body class="sample-body"> ... </div> Next, wrap your content like so: <body class="sample-body"> <div class="sample-content"> ... </div>  ...more