fullit

Make Your Jekyll Website Amazing

2017-03-20T00:00:00+00:00

How you can make an Amazing Website?

Jekyll can give you the possibility to make awesome websites in minutes that are more faster than major other sites in the world

Use this template to generate a great jekyll website via a full of slide system make by fullpage.js and build quick your pages using the last version of Bootstrap 4.

Syntax Highlight Example

2017-02-15T00:00:00+00:00

An example post about code insertion into posts.

Testing code snippet highlight

The following example shows how to highlight a piece of code throughout the use of Javascript:

    /*jshint browser: true, strict: true, undef: true */
    /*global define: false */

    ( function( window ) {

    'use strict';

    // class helper functions from bonzo https://github.com/ded/bonzo

    function classReg( className ) {
      return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
    }

    // classList support for class management
    // altho to be fair, the api sucks because it won't accept multiple classes at once
    var hasClass, addClass, removeClass;

    if ( 'classList' in document.documentElement ) {
      hasClass = function( elem, c ) {
        return elem.classList.contains( c );
      };
      addClass = function( elem, c ) {
        elem.classList.add( c );
      };
      removeClass = function( elem, c ) {
        elem.classList.remove( c );
      };
    }
    else {
      hasClass = function( elem, c ) {
        return classReg( c ).test( elem.className );
      };
      addClass = function( elem, c ) {
        if ( !hasClass( elem, c ) ) {
          elem.className = elem.className + ' ' + c;
        }
      };
      removeClass = function( elem, c ) {
        elem.className = elem.className.replace( classReg( c ), ' ' );
      };
    }

    function toggleClass( elem, c ) {
      var fn = hasClass( elem, c ) ? removeClass : addClass;
      fn( elem, c );
    }

    var classie = {
      // full names
      hasClass: hasClass,
      addClass: addClass,
      removeClass: removeClass,
      toggleClass: toggleClass,
      // short names
      has: hasClass,
      add: addClass,
      remove: removeClass,
      toggle: toggleClass
    };

    // transport
    if ( typeof define === 'function' && define.amd ) {
      // AMD
      define( classie );
    } else {
      // browser global
      window.classie = classie;
    }

    })( window );

Code highlighting with rounge and Prism

Another snippet rendered with the CSS code syntax:

    @import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Gentium+Book+Basic');
    /* Reset CSS
     * --------------------------------------- */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
    form,fieldset,input,textarea,p,blockquote,th,td {
        padding: 0;
        margin: 0;
    }
    a{
        text-decoration:none;
    }
    table {
        border-spacing: 0;
    }
    fieldset,img {
        border: 0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
        font-weight: normal;
        font-style: normal;
    }

Using snippet rendered with the HTML code syntax


<div id="fullpage">
    <div data-anchor="0section" class="section" id="section0">

        <h1 class="heavy">Ready to follow <br />your <span class="pink">dreams?</span></h1>
        <br /><h2 class="large-blur">
            <span class="highlight-container"><span class="highlight">
                Put your dreams on first and follow that!
            </span></span>

            <br />

                            

        </h2>
            <div class="intro-scroll-down">
              <a data-menuanchor="1section" href="#1section">
                <span class="mouse">
                  <span class="mouse-dot"></span>
                </span>
              </a>
            </div>



    </div>

Check the markdown of this example in order to fully comprehend the correct syntax.

Here you can find more detailed information.

Testing Locally

2017-01-17T00:00:00+00:00

In this tutorial I will teach you how to test your Jekyll Bootstrap3 site locally.

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as “a simple, blog aware, static site generator”.

To test your site locally, you’ll need

Installing ruby

There are lots of different ways to install ruby.

In Mac OS X, older versions of ruby will already be installed. But I use the Ruby Version Manager (RVM) to have a more recent version. You could also use Homebrew.

In Windows, use RubyInstaller. (In most of this tutorial, I’ve assumed you’re using a Mac or some flavor of Unix. It’s possible that none of this was usable for Windows folks. Sorry!)

Installing the github-pages gem

Run the following command:

    gem install github-pages

This will install the github-pages gem and all dependencies (including jekyll).

Later, to update the gem, type:

    gem update github-pages

Testing your site locally

To construct and test your site locally, go into the directory and type

    jekyll build

This will create (or modify) a _site/ directory, containing everything from assets/, and then the index.md and all pages/*.md files, converted to html. (So there’ll be _site/index.html and the various _site/pages/*.html.)

Type the following in order to “serve” the site. This will first run build, and so it does not need to be preceded by jekyll build.

    jekyll serve

To make jekyll automatically re-build your changes you can also add the --watch option:

    jekyll serve --watch

Now open your browser and go to http://localhost:4000.

Read the complete tutorial on http://jekyllrb.com/docs/usage/.

Testing images

#Code

	
	![Lost in space](https://fullit.github.io/assets/img/big/lost_in_404_space.jpg){: .image-fluid }

IMG With description on hover

#Code

	
	![Lost in space with description](https://fullit.github.io/assets/img/big/universe1.jpg "Description of lost in space image"){: .image-fluid }

With floating in markdown

In markdown you can quikly use tables to align your images in right way, remember to style as you like the CSS of your table to have a amazing results. Use to size your pics in right way for best results.

#Code


	| In markdown you can quikly use tables to align your images in right way, remember to style as you like the CSS of your table to have a amazing results. Use to size your pics in right way for best results. | ![Lost in space with description](https://fullit.github.io/assets/img/big/universe2.jpg "Description of lost in space image"){: .image-fluid } |

I am text to the right I am text to the right I am text to the right I am text to the right

#Code


	| ![Lost in space with description](https://fullit.github.io/assets/img/big/universe3.jpg "Description of lost in space image"){: .image-fluid } | I am text to the right I am text to the right I am text to the right I am text to the right |

Video embed sample

#Code

	<div class="video-container">
	<iframe width="100%" height="auto" src="https://www.youtube.com/embed/ikbYpAHkurs?ecver=1" frameborder="0" allowfullscreen></iframe>
	</div>

License

MIT