Using HTML Kickstart Framework with Volatyl

Basic support is open to all members of Volatyl Themes but what about those who need a little more? That's what Volatyl Themes subscriptions are for. The Priority Support subscription gets you more detailed, personal support while the Advanced Development subscription not only includes Priority Support, but also grants you access to premium content only seen by subscribers. This premium content will help you take your Volatyl websites to the next level with advanced development techniques, integration tips, and more information on how to really put Volatyl to use. Check out the subscriptions!

The Affordable WordPress Framework Forums Basic Support Child Theme Development Using HTML Kickstart Framework with Volatyl

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  sdavis2702 4 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3908

    Roberto Porcar
    Participant

    Hello everybody!

    This week I’m using HTML Kickstart with volatyl. You can download this html framework for free:

    http://www.99lime.com/elements/

    and extract the files inside your child theme.

    Add the required scripts on the header editing the functions.php file of your theme. I’m using the starter theme for my test as you see below.

    function child_theme_head_script() { ?>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    	<script src="<?php echo get_theme_root_uri(); ?>/starter/js/kickstart.js"></script> <!-- KICKSTART -->
    	<link rel="stylesheet" href="<?php echo get_theme_root_uri(); ?>/starter/css/kickstart.css" media="all" /> <!-- KICKSTART -->
    <?php }
    add_action( 'wp_head', 'child_theme_head_script' );

    You have to fix some css too.

    For the body line-height, volatyl sets this by default:

    BODY, INPUT, TEXTAREA, .cancel-reply
    {
    font-size: 15px;
    line-height:1.6em;
    font-family: Georgia, “Times New Roman”, Times, serif;
    margin: 0;
    }

    Having the body font with a line-height of 1.6 causes some trouble in the TABS control. You should reset the line-height on the tabs class to fix this.

    .tabs
    {
    line-height: normal;
    }

    .site-content LI has a border:

    border: 1px solid rgba(0,0,0,.1);

    set to none in your child, overwriting the default, like this:

    .site-content LI
    {
    border-style: none;
    }

    The last one was

    .menu li + li {
    margin-top: -1px;
    }

    set this value to 0px in your child theme. This one produced a bad alignment in the menu color fill.

    All this should fix the menus and tabs from HTML Kickstart.

    Maybe there are more “issues”, but I think you can take this as starting point. Its very easy to use.

    You have many elements to use. Enjoy!

    #3910

    sdavis2702
    Keymaster
    Post count: 72

    This is great, man. I may end up using this one some custom layout pages eventually. Are its components responsive right out of the box or will it take a few media query additions?

    #3909

    Roberto Porcar
    Participant

    Its responsive out of the box.. but sometimes is optional 🙂

    Just adding a class does the trick.

    Its very lightweight too, thats why I like it.

    And you can lighten it more, because it has separate css blocks (not SASS, simply some css files).

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.