Website template for Cardshifter game

Question

I'm putting together a template for easy formatting of content pages, to be used in putting together a website for an online trading card game.

I've been using the Bootstrap library (and finding it wonderful) and since we will be using this template for basically all pages, I want to make sure it's top-notch before we deploy anything. Any and all useful feedback is appreciated.

I have also been told that there is a way to use this boilerplate navigation menu code in a more modular fashion using JavaScript or other such. I'm not asking for any gimme-teh-codez but if you have any link to anything useful I can dig into, I'm all ears.

P.S.: The CSh- prefix in class names is used to differentiate Cardshifter custom classes vs. Bootstrap classes.

index.html

<!DOCTYPE html>
<html lang="en">

<!-- MAKE NO CHANGE TO ANYTHING IN THE <head> </head> SECTION -->

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Cardshifter card game / TCG, open source github with Java 8 & JavaFX">
    <meta name="author" content="github.com/Phrancis">
    <link rel="icon" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/favicon.ico">

    <title>Cardshifter</title>

    <!-- Bootstrap core CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="cardshifter-formatting.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

<!-- THIS CODE GENERATES THE NAVIGATION MENUS; DO NOT CHANGE IT -->      

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand CSh-top-link" href="#">Cardshifter</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar CSh-nav-background CSh-nav-padding">
          <ul class="nav nav-sidebar">
            <h4><a class="nav-link" href="home.html">Home</a></h4>
            <h4><a class="nav-link" href="play-cardshifter.html">Play Cardshifter!</a></h4>
            <h4><a class="nav-link" href="news.html">News</a></h4>
            <h5><a class="nav-link" href="latest-release.html">Latest Release</a></h5>
            <h5><a class="nav-link" href="new-git-issues.html">New Git issues</a></h5>
            <h4><a class="nav-link" href="project.html">Project</a></h5>
            <h5><a class="nav-link" href="controbutors.html">Contributors</a></h5>
            <h5><a class="nav-link" href="images.html">Images</a></h5>
            <h5><a class="nav-link" href="wiki.html">Wiki</a></h5>
            <h5><a class="nav-link" href="contribute.html">Contribute!</a></h5>
            <h4><a class="nav-link" href="mods.html">Mods</a></h4>
            <h5><a class="nav-link" href="cyborg-chronicles.html">Cyborg Chronicles</a></h5>
            <h5><a class="nav-link" href="new-mod.html">Start a New Mod!</a></h5>
            <h4><a class="nav-link" href="contact-us.html">Contact Us</a></h5>
            <h5><a class="nav-link" href="report-bug.html">Report a bug</a></h5>
            <h5><a class="nav-link" href="request-feature.html">Request a feature</a></h5>
            <h5><a class="nav-link" href="chat-room.html">Chat room</a></h5>
          </ul>
        </div>
        <div class="col-sm-9 col-md-10 main"><br />
          <h1 class="page-header">Header 1</h1>

<!-- END OF NAVIGATION MENUS -->

      <div>        

<!-- PAGE CONTENT STARTS HERE -->

      <div class="default-template CSh-body-padding">
        <h2>Header 2</h2>
        <h3>Header 3</h3> 
        <p>Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rutrum velit et sagittis. Nullam vitae mi sed sapien ornare tincidunt. Suspendisse vel magna a nulla consectetur consectetur.</p>
        <span>
          <a href = "www.google.com">Link to Google.</a><br />
          <strong>Strong text</strong><br />
          <i>Italic text</i><br />
          <u>Underlined text</u><br />
          <strike>Strikethrough text</strike><br />
          <code>Inline code</code><br />
        </span><br />

        <pre>
        class Cardshifter {
            public static void main(String[] args) {
                System.out.println("Hello Cardshifter!");
            }
        }</pre><br />
        <blockquote>“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”<br />- Martin Golding</blockquote>
          <img src="facepalm.jpg" class="img-thumbnail" alt="An immemorial facepalm." height="300" width="300"><br /><br />

          <p>
            <button type="button" class="btn btn-default">Clear &raquo;</button>
            <button type="button" class="btn btn-primary">Blue &raquo;</button>
            <button type="button" class="btn btn-success">Green &raquo;</button>
            <button type="button" class="btn btn-info">Light blue &raquo;</button>
            <button type="button" class="btn btn-warning">Yellow &raquo;</button>
            <button type="button" class="btn btn-danger">Red &raquo;</button>
          </p>
          <div class="row">
            <div class="col-sm-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">White panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-primary">
                <div class="panel-heading">
                  <h3 class="panel-title">Blue panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-success">
                <div class="panel-heading">
                  <h3 class="panel-title">Green panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-info">
                <div class="panel-heading">
                  <h3 class="panel-title">Light blue panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-warning">
                <div class="panel-heading">
                  <h3 class="panel-title">Yellow panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-danger">
                <div class="panel-heading">
                  <h3 class="panel-title">Red panel</h3>
                </div>
                <div class="panel-body">
                  Panel content
                </div>
              </div>
            </div>
          </div>

        <table width="50%">
          <tr>
            <th>FooBar</th>
            <th>Name</th>
            <th>Number</th>
          </tr>
          <tr>
            <td>Fizz</td>
            <td>John Q. Developer</td>
            <td>1</td>
          </tr>
          <tr>
            <td>Buzz</td>
            <td>Jane Q. Maintainer</td>
            <td>2</td>
          </tr>
        </table>

<!-- END PAGE CONTENT -->          

      </div>

<!-- FOOTER - DO NOT REMOVE -->

      <br />&copy; Copyright 2014<script>new Date().getFullYear()>2014&&document.write("-"+new Date().getFullYear());</script>, Cardshifter.
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/assets/js/ie10-viewport-bug-workaround.js"></script>


  </body>
</html>

cardshifter-formatting.css

body {
    font-size: 120%;
    font-family: Verdana, Geneva, sans-serif;
}

/* FORMATTING FOR TOP NAV BAR */

a.CSh-top-link {
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #FFFFFF;
    font-size: 2em;
}

/* FORMATTING FOR LEFT SIDE NAV MENU */

/* h4 and h5 are used for left nav bar links */

h4 {
    font-size: 1.2em;
    font-weight: bold;
}

h5 {
    font-size: 1em;
    font-weight: normal;
}

a.CSh-nav-link { 
    color: #000000;
}

div.CSh-nav-background {
    background-color: #EEEEEE; 
}

div.CSh-nav-padding {
    padding-top: 50px;
}

/* FORMATTING FOR PAGE BODY */

div.CSh-body-padding {
    padding-left: 15px;
}


/* FORMATTING FOR COMMON PAGE ELEMENTS */

h1, h2, h3, blockquote {
    font-family: Georgia, Times, "Times New Roman", serif;
}

p, span, blockquote, table {
    font-size: 1.2em;
    font-weight: normal;
}

pre {
    font-family: Monaco, Consolas, Courier New;
    font-size: 1.2em;
    font-weight: normal;
}

/* FORMATTING FOR TABLES */

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
}

th {
    background-color: #EEEEEE;
    color: #000000;
}

/* FORMATTING FOR BUTTONS, ALERTS, ETC. */

a.CSh-button-formatting {
    font-size: 1.2em;
    font-weight: normal;
}
div.CSh-alert-formatting {
    font-size: 1.2em;
}

The layout is temporarily hosted here

Here is what it looks like in my browser, Chrome Version 38.0.2125.111 for Mac:

cardshifter-chrome cardshifter-chrome2

Phrancis · Accepted Answer · 2014-11-25 01:28:42Z

There is a "bug" in your template :

I did notice an odd phenomenon, where the links on the left displayed as text color #000000 in most other browsers, as I had intended. They do in Firefox and IE (for Windows) as well, but not in Safari. Guess Macs' browsers interpret CSS differently. I'll figure this out on my own though.

There is no problem of browser compatibility or anything. The style applied to the color on links is :

a.CSh-nav-link { 
    color: #000000;
}

In your HTML you're using :

<a class="nav-link" href="home.html">

The classes don't not match, so the color of the link is the default one in Bootstrap.

I would not recommend to use <br> to create space between components/div. While it may do the job, it's not a good way to work with them. There are plenty of way to manage space between components and those will probably give better results.

 <br />&copy; Copyright 2014<script>new Date().getFullYear()>2014&&document.write("-"+new Date().getFullYear());</script>, Cardshifter.

This is the footer and it is directly in your HTML. I would have used a <div> here and work with managing the space between the other components with the div.

janos · Accepted Answer · 2014-11-13 07:14:00Z

I'm no HTML / CSS guru so take this with a grain of sand (and wait for better).

This kind of CSS class name looks like a bad idea:

div.CSh-body-padding {
    padding-left: 15px;
}

Including styling hints in the class name seems to go against the philosophy of stylesheets. The HTML markup should not contain things like this, and focus on the logical structure and elements of the document.

To put that in contrast, this is a good name:

a.CSh-top-link {
    // ...
}

The name contains no styling hints, it's about a logical element in the document.

The word "formatting" in this style name is superfluous:

div.CSh-alert-formatting {
    font-size: 1.2em;
}

All CSS is about formatting, so no need to include that in the name. Also note the names Bootstrap uses for interesting variations in formatting:

alert
alert alert-danger
alert alert-success
...

I would also rename the file itself to cardshifter.css instead of cardshifter-formatting.css.

I very rarely see mixed case CSS class names like CSh-.... Of course if you lowercase it becomes csh-, reminiscent of the C shell in UNIX, but I think that's still ok, and might be better (and easier to type).

This looks an interesting guide for writing efficient CSS.

(I'll be very interested to see what solution you come up with for generating the navigation. That is, without duplicating the (almost) same menu code code on all pages that need it.)

Thanks for the link about writting efficient CSS. I'm updating the css at the moment and it was handy! — Marc-Andre, Apr 25, 2015 at 17:40

Community · Accepted Answer · 2017-05-23 12:41:02Z

(a) As also explained in your sister question, the author name is for names, not URLs (assuming that "github.com/Phrancis" is not your name ;)).

(b) In the ul with the classes nav nav-sidebar, you have several navigation links. You should use the nav element as a container. And while you are using ul, you don’t have any li children. Instead, you are using heading elements (h4/h5), which creates a wrong document outline: each of these links would create an own entry in the document outline, without having any content in its scope.

(c) You are misusing the br element. It must only be used for meaningful line breaks, i.e., those that are "actually part of the content". Use CSS instead.

(d) For displaying the code, you are using only the pre element, but you might want to use code in addition (<pre><code>…</code></pre>): "To represent a block of computer code, the pre element can be used with a code element".

(e) You have a citation inside of blockquote (the author name), but you must use the cite and/or footer element for it (see examples). Everything not in cite/footer has to be actually quoted.

(f) Except for nav, you aren’t using any sectioning content elements. This is not wrong, but it’s recommended to always use sections explicitly if you use heading elements. Whenever you have a heading element (which is not the heading of a section), you can use section (or, if appropriate, article, aside, nav). For example, you might want to use section for each panel.

(g) You could use the small element for the copyright notice.

(h) If possible, the site heading (in h1) should come before any other section. Currently, nav is your first section, so the document outline starts with an entry for the untitled section (level 1) that has a sub-entry for the navigation (level 2), followed by the actual site heading (again, level 1).

Stack Exchange Network

Website template for Cardshifter game

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged
game
html
css
or ask your own question.

Linked

Hot Network Questions

Website template for Cardshifter game

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged gamehtmlcss or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
game
html
css
or ask your own question.