Giter VIP home page Giter VIP logo

adapt-contrib-codiscope-house's Introduction

adapt-contrib-vanilla

Vanilla is a theme bundled with the Adapt framework.

sample colors from the vanilla theme

It provides specific values to styles, including colors, padding, margins, and assets such as fonts and background images. Visit the Vanilla wiki for more information about its functionality and for explanations of key properties.

##Installation

As Adapt's core theme, Vanilla is included with the installation of the Adapt framework and the installation of the Adapt authoring tool.

  • If Vanilla has been uninstalled from the Adapt framework, it may be reinstalled. With the Adapt CLI installed, run the following from the command line:
    adapt install adapt-contrib-vanilla

    Alternatively, this component can also be installed by adding the following line of code to the adapt.json file:
    "adapt-contrib-vanilla": "*"
    Then running the command:
    adapt install
    (This second method will reinstall all plug-ins listed in adapt.json.)

  • If Vanilla has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plug-in Manager.

##Uninstallation
The Adapt framework does not allow the installation of more than one theme at a time. In order to replace Vanilla it must be uninstalled. With the root of your framework installation as your current working directory, run the following command:
adapt uninstall adapt-contrib-vanilla

Settings overview

Unlike most Adapt plug-ins, the Vanilla theme has no attributes that are required to be configured in the course JSON files. There is, however, an option to alter the background color of blocks as desired. Configure the attributes highlighted below in blocks.json. These attributes are properly formatted as JSON in example.json.

blocks.json

_theme (object): The theme attributes group contains attributes that override those set in Vanilla. These include _backgroundColor, _minimumHeights, and _isDividerBlock.

_backgroundColor (string): This value is the name of a color variable that has been defined in less/colors.less. Omit the initial @ that is a part of the variable declaration. For example, an acceptable value is "background-color-inverted".

_minimumHeights (object): The minimum heights attribute group specifies the minimum height of the block at different device widths (_large, _medium, and _small).

_large (number): This value specifies the CSS minimum height when Adapt.device.screenSize' evaluates to "_large".

_medium (number): This value specifies the CSS minimum height when Adapt.device.screenSize' evaluates to "_medium".

_small (number): This value specifies the CSS minimum height when Adapt.device.screenSize' evaluates to "_small".

_isDividerBlock (boolean): - Determines whether the CSS class divider-block (less/src/theme-extras.less) will be applied. Acceptable values are true and false.

Visit the Vanilla wiki for more information about how to use and manipulate the theme.

Structure

Folder/File Description
theme.json Pixel values for screenSize(small, medium, and large)
selection.json File used for selecting icons at IcoMoon.io that are packaged in fonts/vanilla.*
assets Location of theme assets (for example: images, loading gif, etc.)
fonts/vanilla.* Icon font referenced in the associated .less files
js JavaScript files on which the theme depends
less Location of any LESS based CSS files
less/generic.less Variables that are not covered by those defined in colors.less, fonts.less, and paddings.less
less/src Location of LESS files for various Adapt elements
less/src/theme-extras.less Classes used for bespoke styling
templates Location of pre-defined HTML (.hbs) templates
templates/partials Location of pre-defined HTML (.hbs) templates required by other templates, specifically buttons.hbs, component.hbs, and state.hbs

##Templates

Vanilla supports customisation for the rendering of various Adapt elements through the use of Handlebars templates. The file name of the template indicates the element it affects. Among the available templates are:

  • article.hbs
  • block.hbs
  • loading.hbs
  • navigation.hbs
  • page.hbs

Limitations

No known limitations.


Version number: 2.0.4 adapt learning logo Framework versions: 2.0
Author / maintainer: Adapt Core Team with contributors
Accessibility support: WAI AA
RTL support: yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge 12, IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 8+9), Safari for iPad (iOS 8+9), Safari 8, Opera

adapt-contrib-codiscope-house's People

Contributors

darylhedley avatar lc-thomasberger avatar kirsty-hames avatar oliverfoster avatar taylortom avatar guywillis avatar moloko avatar zenduo avatar dancgray avatar brian-learningpool avatar chucklorenz avatar tomgreenfield avatar dennis-learningpool avatar himanshu1618 avatar davidmichaelfinnerty avatar chris-steele avatar laurahaselum avatar lukaszgrela avatar ratnadeeprajput avatar sarveshwar-gavhane avatar simondate avatar tomallpress avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.