App tema

Generička tema bazirana je na Bootstrapu - za aplikaciju na Code for Croatia internetskim stranicama.

Preuzmi na Githubu

Primjeri upotrebe

Single pager example Jedna stranica
App example Applikacija
Dashboard example Dashboard
Pricing example Troškovnik

Getting Started

This theme is a lightly modified version of what you get out of the box with Bootstrap. If you are not familiar with Bootstrap, a good first step would be to check out the docs here.

CDN (Content Delivery Network)

Thanks to jsDelivr, we can provide CDN links for our latest compiled and minified CSS and JavaScript:

<!-- CfC Panel CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/codeforcroatia/assets/assets/html/cfc/panel/assets/css/frontend.css">

<!-- CfC App Theme CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/css/main.css">

<!-- Optional Modernizr -->
<script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/vendor/modernizr-2.8.3.min.js"></script>

<!-- JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- CfC App Theme plugins JS -->
<script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/plugins.min.js"></script>

<!-- CfC Panel JS -->
<script src="//cdn.jsdelivr.net/gh/codeforcroatia/assets/assets/html/cfc/panel/assets/js/frontend.js"></script>

<!-- CfC App Theme JS -->
<script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/main.min.js"></script>

Source Code

All the theme files can be downloaded from here. This repository contains both the precompiled CSS and JavaScript referenced above, as well as the source files.

SASS

Stylesheets for this theme are compiled from SASS files found in css/sass. Bootstrap (3.3.3) makes up the majority of these files css/sass/bootstrap. If you make changes to the SASS files, they will need to be recompiled to css/main.css.

CSS

The main CSS file for this theme can be found here css/main.css. Additional CSS files for the Goodtables and Spending Dashboard examples, can be found in the examples folder.

JS

Javascript files can be found in js. This folder contains main.js where you can add any custom javascript, plugins.js for jQuery/helper plugins, and vendor where you’ll find Jquery, Bootstrap and Modernizr.

Plugins included:
  • equalize.js
  • smooth-scroll
  • prism.js

Markup

As a starting point, you can use the basic template below, or modify one the above examples. This HTML closely resembles what you might use with a vanilla Bootstrap instance, there are a few notable additions however.

Code for Croatia Ribbon & Panel

Lines 11, 24, 28 and 108 collectively contain all the parts required for the Code for Croatia Panel.

Logo Icon

The theme includes a quick and easy way to give your project a graphical logo. Choose one of the Bootstrap glyphicons and use it as demonstrated on line 38.

Release Badge

On line 41 you’ll see a method of adding an “alpha” or “beta” badge, after the logo.

Smooth Scroll

This theme includes a ‘smooth scroll’ plugin. Activate the scroll animation on ID links by adding data-scroll to the anchor. Example on line 47.

Inverse Jumbotron

The Bootstrap ‘Jumbotron’ can be given alternative styling by adding a class of inverse. See line 54.

Code for Croatia Footer

From line 68 to 99 you’ll find the standard Code for Croatia footer.

Full Width Panels

A .panel placed directly inside the body is styled slightly differently. See quote section in single page example.

Additional Markup

Code for Croatia Cookie Bar

There is a lot of mystery and fuss surrounding the new EU cookie legislation, but it's essentially really simple. Cookies are files used to track site activity and most websites use them. Site owners need to make the use of cookies very obvious to visitors.

Cookie bar makes it simple and clear to visitors that cookies are in use and tells them how to adjust browser settings if they are concerned. Find instructions how to use it at Code for Croatia Cookie Bar.

Code for Croatia Consent

Find instructions how to include it at Code for Croatia Consent.

Basic template
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>My Awesome App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CfC Panel CSS -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/codeforcroatia/assets/assets/html/cfc/panel/assets/css/frontend.css">

  <!-- CfC App Theme CSS -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/css/main.css">

  <!-- Optional Modernizr -->
  <script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
  <!--[if lt IE 8]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div id="cfc-panel" class="closed"><div class="container"><iframe src="//a.codeforcroatia.org/assets/html/cfc/panel/panel.html" scrolling="no"></iframe></div></div>

  <nav class="navbar navbar-static-top">
    <div class="container">
      <a class="cfc-ribbon" href="//codeforcroatia.org/"><img src="//a.codeforcroatia.org/assets/html/cfc/panel/assets/images/cfc-ribbon.png" alt="Code for Croatia"></a>

      <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 has-icon" href="./">
          <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
          <span class="text">My Awesome App</span>
        </a>
        <span class="release badge">alpha</span>
      </div>

      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="page.html">Link to page</a></li>
          <li><a href="#anID" data-scroll >Link to section of page</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- page content start -->
  <div class="jumbotron inverse">
    <div class="container">
      <h1>My Awesome App</h1>
      <p>Introductory sentence or tagline.</p>
    </div>
  </div>

  <div class="container">

    <p>Hello, world!</p>

  </div>

  <!-- footer start -->
    <footer class="site-footer">
      <div class="container">
        <a class="footer-logo" href="https://codeforcroatia.org">
          <img src="https://a.codeforcroatia.org/assets/media/codeforcroatia/landscape-white-468x122.png" alt="Code for Croatia">
        </a>
        <div class="footer-links">
          <ul>
            <li><a href="https://codeforcroatia.org/privacy">Politika privatnosti</a></li>
            <li><a href="https://codeforcroatia.org/privacy#cookie">Kolačići</a></li>
            <li><a href="https://codeforcroatia.org/tos">Uvjeti korištenja</a></li>
          </ul>
          <ul class="footer-social">
            <li><a href="https://facebook.com/programirajzahrvatsku">
              <img src="https://raw.githubusercontent.com/codeforcroatia/codeforcroatia-theme/master/img/facebook-logo-circle.png" alt="Facebook">
              </a></li>
            <li>
              <a href="https://twitter.com/codeforcroatia">
                <img src="https://raw.githubusercontent.com/codeforcroatia/codeforcroatia-theme/master/img/twitter-logo-circle.png" alt="Twitter">
              </a>
            </li>
            <li>
              <a href="https://www.youtube.com/channel/UC7prtSlc8O1YzSwiL8CI6wg">
                <img src="https://raw.githubusercontent.com/codeforcroatia/codeforcroatia-theme/master/img/youtube-logo-circle.png" alt="YouTube">
              </a>
            </li>
            <li>
              <a href="https://www.linkedin.com/company/code-for-croatia">
                <img src="https://raw.githubusercontent.com/codeforcroatia/codeforcroatia-theme/master/img/indesign-logo-circle.png" alt="LinkedIn">
              </a>
            </li>
          </ul>
        </div>
        <hr>
        <p>Code for Croatia je neformalna inicijativa pozitivnih ljudi koji žele napraviti promjenu. Otključavamo zaključane podatke. Bavimo se civilnim hakiranjem, radimo društveno korisne projekte i uvijek smo otvoreni za nove ideje. Code for Croatia je križanje aktivizma, IT-a i istraživačkog novinarstva.</p>
      </div>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
    <script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/vendor/bootstrap.min.js"></script>
    <script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/plugins.js"></script>
    <script src="//cdn.jsdelivr.net/gh/codeforcroatia/assets/assets/html/cfc/panel/assets/js/frontend.js" type="text/javascript"></script>
    <script src="//cdn.jsdelivr.net/gh/codeforcroatia/codeforcroatia-theme@v1/js/main.js"></script>
  </body>
</html>