Let me explain the concept
of a Terrific frontend to you

 

Structure

The Terrific module structure helps you to organize your project in a very natural way. It reduces the complexity by splitting your code up in little pieces.

Maintainability

A new feature? Need to change an existing one? Terrific makes it perfectly clear where to put your hands on – without having to worry about breaking your site.

Reusability

Modules are like Legos. Use them in your grid in every combination you can think of. Use them once, twice or as many times you like – even on the same page.

High Complexity

  • index.html
  • css/
  • styles.css
  • js/
  • scripts.js

Low Complexity

    • index.html
    • Navigation/
    • navigation.html
    • css/
    • navigation.css
    • js/
    • Tc.Module.Navigation.js
A Terrific module is made of HTML, JS and CSS 
<!-- Logo/logo.html -->
<div class="mod mod-logo">
<!-- here comes your markup -->
</div>

<!-- another logo module instance -->
<div class="mod mod-logo">
<!-- your other markup -->
</div>
HTML

Give your HTML some semantics…

Simply mark your modules by giving them a name. 

/* Logo/css/logo.css */

.mod-logo {
  ...
}

.mod-logo ul {
  ...
}
CSS

Prefix your CSS rules…

This prevents you from strange side-effects when using your modules in different parts of your layout. 

/* Logo/js/Tc.Module.Logo.js */
(function($) {
  Tc.Module.Logo = Tc.Module.extend({
    on: function(callback) {
        callback();
    },
    after: function() { }
  });
})(Tc.$);
JS

Flavor it with a little JS magic…

Create a TerrificJS module with the same name & fill it with your jQuery/Zepto code.

Learn more about the Naming Conventions that wire up everything for you in the background.

Composer

To make your life easier I created the Terrific Composer. The Composer is a Frontend Development Framework specifically designed for building deluxe frontends based on the Terrific concept
Learn More Download Composer
Toolbar Create

Create

Add new Modules & Skins to your project. The Skeleton is generated for you so that you can start right away.

Toolbar Create

Open

The Open dialog provides you fast access to all of your Modules and Pages.

Toolbar Create

Inspect

Stay on top of things! The inspect mode shows you which modules are in use on the current page.

API

TerrificJS provides you a Scalable Javascript Architecture, that helps you to modularize your jQuery/Zepto Code in a very intuitive and natural way
Learn More Download TerrificJS

Integrations

Integrate your Terrific Frontend in your CMS/Framework of choice
Coming Soon
Coming Soon
Coming Soon
Close