Setting up the Gumby Framework: A Step-by-Step

Question

Setting up the Gumby Framework: A Step-by-Step

As I begin to delve into learning a Responsive CSS Framework, I've decided to do a comparison between Foundation 4, Gumby, and Bootstrap on my own.

I had success running Foundation 4 and Bootstrap, but unfortunately Gumby didn't cooperate.

Upon including the framework files, my web page just kept loading endlessly. After some investigation, I discovered that the issue lies with the inclusion of gumby.css

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/gumby.css">
        <title>
            Title
        </title>
    </head>
    <body>
        asd
    </body>
</html>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/libs/gumby.min.js">
</script><script type="text/javascript" src="js/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/libs/modernizr-2.6.2.min.js"></script>

It seems likely that I may have included incorrect files causing this dilemma, does that sound plausible?

html css frameworks installation responsive-design

Answer 1

Answer №1

Your issue is clear to me. To resolve it, you must either run this on a live web server or adjust the // hrefs to http:// in both index.html and css/gumby.css. This adjustment will prevent the jquery/custom font http requests from taking too long to time out, enabling the fallback to local versions.

An observation: I noticed that you have eliminated many lines of code from Gumby's default template files. It would be advisable to retain them as removing those may lead to significant inconsistencies across various browsers. Below is the code snippet I typically use:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="humans.txt">

    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

    <link rel="stylesheet" href="css/gumby.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>

<body>



    <script>
    var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
    if(!oldieCheck) {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
    } else {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
    }
    </script>
    <script>
    if(!window.jQuery) {
    if(!oldieCheck) {
      document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
    } else {
      document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
    }
    }
    </script>

    <script src="js/libs/gumby.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
    </script>

    <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    <![endif]-->

  </body>
</html>

Answer 2

Your issue is clear to me. To resolve it, you must either run this on a live web server or adjust the // hrefs to http:// in both index.html and css/gumby.css. This adjustment will prevent the jquery/custom font http requests from taking too long to time out, enabling the fallback to local versions.

An observation: I noticed that you have eliminated many lines of code from Gumby's default template files. It would be advisable to retain them as removing those may lead to significant inconsistencies across various browsers. Below is the code snippet I typically use:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="humans.txt">

    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

    <link rel="stylesheet" href="css/gumby.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>

<body>



    <script>
    var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
    if(!oldieCheck) {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
    } else {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
    }
    </script>
    <script>
    if(!window.jQuery) {
    if(!oldieCheck) {
      document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
    } else {
      document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
    }
    }
    </script>

    <script src="js/libs/gumby.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
    </script>

    <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    <![endif]-->

  </body>
</html>

Answer 3

Answer №2

Consider relocating modernizr to the beginning of the document, followed by jquery before the main and gumby.js files.

I'm not entirely clear on what you mean by "the web doesn't stop loading", but it seems to suggest that there may be an issue with JS being blocked.

It would also be wise to include the following snippet in the head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 4

Consider relocating modernizr to the beginning of the document, followed by jquery before the main and gumby.js files.

I'm not entirely clear on what you mean by "the web doesn't stop loading", but it seems to suggest that there may be an issue with JS being blocked.

It would also be wise to include the following snippet in the head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 5

Answer №3

Upon downloading and extracting the files, be sure to check out the demo.html file located in the main directory. Within this file, you will find a comprehensive example showcasing the included css and main js libraries, as well as some validations for IE compatibility issues. Additionally, there are commented js modules that can easily be integrated.

Answer 6

Upon downloading and extracting the files, be sure to check out the demo.html file located in the main directory. Within this file, you will find a comprehensive example showcasing the included css and main js libraries, as well as some validations for IE compatibility issues. Additionally, there are commented js modules that can easily be integrated.

Setting up the Gumby Framework: A Step-by-Step

Answer №1

Answer №2

Answer №3

Similar questions

Searching for elements in Selenium using Python without a specified name

What is the best way to extract text from a class using selenium?

Flickering Button Displayed After Fade-In Animation

Attempting to store an array in a database while avoiding duplicate entries

Attempt to apply border-bottom style results in negligible changes

Using a PHP variable to trigger the jQuery .show() function

A guide on accessing every element within a "div" tag that begins with a specified text

Angular 2 is experiencing difficulty in loading the image

How can I restrict input to only numbers and one decimal point using JavaScript?

What is the best method to eliminate a bizarre border from a text gradient in Safari?

How to vertically center a card between a search bar and the bottom of the viewport using Bootstrap?

Tips for changing the background color depending on the value

What steps can I take to prevent the div from exiting the screen during animations?

Is zone.js responsible for the issue of CSS not being rendered properly?

The integration of CSS into an HTML file is ineffective

JSP generates unconventional HTML output

Using Bootstrap to Implement Special CSS Styles for Various Devices

Guide to centering a Material UI Table on a webpage

What is the best way to include a variable or literal as a value in styled components?

Introducing Filterizr, the innovative gallery filter plugin with a unique mix filter mode