There are countless tricks to add a little motion to the page CSS and HTML alone; while I love JavaScript and JQuery, if you can find a native CSS solution it is good practice to take it.

I’m not a web-designer so, perhaps it’s silly for me to even post on this. There are terrific references out there on the web and these are pretty basic.

Still, because I used these within this blog’s Jekyll template, I thought I’d point out how they work.

None of the code below requires Jekyll.

Hover over the portions of the sentence below(I’ll explain the code after):

Demo:
See something SWELL.
The modal box tool-tip is on the top right on this one.
This tool tip is in absolute position to the parent 'div'.
No, the text around the resized items doesn't move!

With the use of “_includes” and Jekyll variables you can use front matter to populate more complex ‘flyouts’ like I use on my “about-me” page.

Both of the above examples are really simple.

HTML: There really isn’t anything to this, other than the nested tool-tip div which will be hidden until the hover pseudo-class triggers:

<div class="demo-swell-tooltip">  
  <div>Demo:</div>
  <span class="demo-flyout-left">
    See something SWELL.
  </span>
  <div class="demo-for-top-right">
    The modal box tool-tip is on the top right on this one.
    <div class="demo-tooltip">
      This tool tip is in absolute position to the parent 'div'
    </div>   
  </div>
  <div>
    No, the text around the resized items doesn't move!
  </div>
</div>

CSS:

Be sure to make the span container: position: relative and

  • If you’d like it smooth, use a transition effect like ‘ease’: transition: all 525ms ease;

  • for the ‘swelling’ technique to transition both ways set the initial scale to 1 transform: scale(1.0);.

On the :hover pseudo-class all you really need for the ‘swelling’ is

  • the size you want to increase to transform: scale(2.7);
  • and to be sure to set the z-index in front of the other content if you use a background color especially z-index: 600;

Here is the CSS for the swell effect including some stying for a change in color

Note the class name and hover syntax:


.demo-flyout-left{
    color: green;
    position: relative;
    transform: scale(1.0);
    display: inline-block;
    transition: all 525ms ease;
}

.demo-flyout-left:hover{
    color: red;
    background-color: white;
    transform: scale(2.7);
    z-index: 600;
}


CODE: for a simple tool-tip:

Here I’m using the “absolute” property as well as “display: none” to reveal the tool tip upon hovering over a trigger “<span>”.

Note: you also have choices of hiding the elements with opacity: 0 or visibility: hidden as alternatives to the display: none I use here. Here is a discussion of the rendering differences at StackOverflow

HTML: Again, the HTML is very simple:


<div class="demo-for-top-right">
  The modal box tool-tip is on the top right on this one.
  <div class="demo-tooltip">
    This tool tip is in absolute position to the parent 'div'
  </div>   
</div>

CSS:

The CSS is also very simple but, like CSS can be, it’s that ‘one thing’ you miss that gets you.

The container or “trigger” span or div must be position: relative as well as an ‘display:inline-block’ element to give the position absolute something to anchor onto. You can then display the styled tooltip at offsets to the left, right, top, or bottom of the trigger block. (you’ll likely want to add a width, border, different colors too)

As for the “trigger”, we use the CSS pseudo-element :hover again. The tooltip is initially hidden using display:none and drawn (see linked discussion) by changing the tip CSS to display:inline-block on hover.


.demo-tooltip-trigger{
    color: navy;
    position: relative;
    display: inline-block;
}

.demo-tooltip{
    display: none;
    color: black;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;
    font-size: .75em;
    padding: 5px;
    transition: all 525ms ease;
}

.demo-tooltip-trigger:hover .demo-tooltip{
    color: black;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;
    font-size: .75em;
    padding: 5px;
    z-index: 600;
    display: inline-block;
    position: absolute;
    width: 140px;
    right: -130px;
    bottom: .75em;
}

Well, again, I’m not a designer and I haven’t broken any new ground here.

That being said, from personal experience, I know it sometimes helps to see another example a specific use case.

Now,

….for a completely cheesy finish:

Hover over this:

That's All Folks


<div class="demo-thats-all-container">  
    <div class="demo-thats-all-folks">
      That's All Folks
    </div>
</div>


.demo-thats-all-container{
    display: block;
    position:relative;
    text-align: center;
    font-size: 1.5em;
    color: maroon;
}

.demo-thats-all-folks{
    position: relative;
    display: inline-block;
    padding: 10px;
    transition: all 525ms ease;
    height: 100px;
}


.demo-thats-all-folks:hover{
    font-family: cursive;
    transform: translateY(-5em) rotate(360deg) scale(4.0);
    background-color: maroon;
    color: white;
    transition: all 525ms ease;
    z-index: 700;
    border: solid 2px black;
    background: maroon; /* For browsers that do not support gradients */
    background: -webkit-repeating-radial-gradient(circle, red, maroon 10%, black 15%);
    /* For Opera 11.6 to 12.0 */
    background: -o-repeating-radial-gradient(circle, red, maroon 10%, black 15%);
    /* For Firefox 3.6 to 15 */
    background: -moz-repeating-radial-gradient(circle, red, maroon 10%, black 15%);
    /* Standard syntax */
    background: repeating-radial-gradient(circle, red, maroon 10%, black 15%);
}




For alternative access, I include the READ_ME.md file for this site’s Jekyll template below:




Cheap and Easy Jekyll Blog Template for Web Developers

Usage

Once you have Jekyll fully installed clone the repository and delete my content in Posts, and the collection folders after you’ve used them as demos.

git clone https://github.com/Tom2277/tn-easy-weblog.io my-blog

Getting started with Jekyll ?

See my links in this post: Jekyll Blogging for Web Developers

The post above discusses some of the choices I made as well as links to other posts about how some of the template features are implemented.

You’ll also want to consult those external links for actual deployment.

Global Variables

  • Go to the _global.yml file in the _data directory and substitute in your own information
    • Note that you’ll need to switch back and forth between the base URL of your local host and your production server address when you run the server locally.

Front-matter Conventions for this Template

  • page-label: < optional page title that will appear in addition to the title of your post header >
    • for example Blog at the top of the blog role or Site-Index ? Attention Cat Owners for cat posts?
  • post-title: < insert a title you want to give a post like “Wonder Cats” >
  • post-subtitle: < insert a line like “including information on feeding”>
  • lead-image: < image file name or URL within images folder i.e. my_photo.png or blog/my_phot.jpg >
    • This image will be displayed in post or collection item’s header and in menus*>
  • post.excerpt is standard Jekyll functionality (It does not need to be included in front matter.)
    • on this template, insert <!–more–> within your posts to set the break point.
  • author: < type in name of author or creator(collection) >
    • optional: if left blank no author will appear
  • subject-tags: < insert an array of tags on separate lines below with a ‘-‘ in front.>
    • ‘Subject tags’ bypass the Jekyll tagging and category system. I chose this custom method to allow the same tags to work with both ‘posts’ and ‘collections’
  • activity-tags < insert an array of tags on separate lines below with a ‘-‘ in front.> *
  • website-name: < external website-name under post image if desired>
  • website-url: < external website full URL if desired - will open in new tab >

Markdown info

  • Kramdown This template uses the Kramdown flavor of mardown. Most standard markdown works
  • Code Blocks Use three back ticks followed by a lower case language name, on separate lines before and after your code.
    • this template uses the pygments gem an I’ve chosen the ‘monokai’ code highlighting scheme (with a few alterations).
    • you can include a different color scheme by substituting it’s scss files in the appropriate folders
  • See my blog for custom tags: external links, inline images, toggle code blocks, including markdown segments within HTML and more.

Credits:

I initially started with the Bootstrap Blog template included with this tutorial by Nicholas Cerminara at Scotch.io. There is little left of his code although his folder structure and a few css features, including pagination, still remain. Either way, thanks are due.

The entire CSS layout structure is built using Twitter’s Bootstrap

Most of all we need to thank the Jekyll community.

You are welcome to reuse my code as per the following license. (as Twitter and N Cerminara used as well)

The MIT License (MIT)

Copyright (c) 2016-2017 Thomas Norian,

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.




Why a Blog ?

I’m using Jekyll to build a blog to share bits and pieces of my coding experiences. We all help each other out when we share approaches.

Why Jekyll ?

Jekyll is a tool that generates static HTML sites that have the rich features of blogs that use a CMS like Wordpress, Joomla, or Drupal.

Try Jekyll Out

You can deploy static HTML in a S3 bucket or using as simple web host. Many people use their free GitHub account (although there are some special circumstances for Github - but you can always push only the pre-compiled code).

‘Cheap and Easy’ is good! You don’t need to spend time with server mechanics or pay that fee for a database that might cost you a night on the town every other month. Jekyll is written in ruby, but you really don’t need to use any ruby at all if you load a theme someone else has constructed. Use a text editor to write your content and fill in a few values for things like title, author and tags. You might want to learn something about Jekyll and “liquid”, a domain specific language, but you don’t need to to use the Template as it is.

Sites for Learning Jekyll

I’m not going to reinvent the wheel. There are some great tutorials done by very experienced Jekyll users. To learn Jekyll and all it can do, visit:

JekyllRB, the primary Jekyll site . with easy to read glossaries and more.

JekyllTips JekyllCasts is a really great beginner through intermediate site with both video and written tutorials, cheat sheets, and more.

Scotch.IO: Getting Started with Jekyll I used this tutorial on my first Jekyll projects(although it might be getting dated). I got in a few habits from what I learned there.

A Google search will find you others. Find one that’s right for you.

What I’m adding with this post: a Template!

You are welcome to use and share this template that I’m using on this blog.

Once you have Jekyll fully installed,(see the external tutorials above) you can install my template available here or using the following command:

###NOT PUBLIC YET - (check back next week!)


git clone https://github.com/Tom2277/jekyll-blog-template-private.git my-blog
                                                              

In other posts I will share code on how I created custom parts of the template:

License and Directions

Inline Photos

Toggle Sections