Customisation

Flexible and fully customisable!

How it works

You can use Remark with vanilla JavaScript new Remark(element, options). The Remark() constructor accepts two arguments, the container element and the options object.

How to initialize the plugin

<script>
  var elem = document.getElementsByTagName('body');
  var foo = new Remark(elem, {
    // options
    panels: true,
    layout: 'boxed'
  });
    
  // the element argument can be an individual element class or id
  var bar = new Remark('.container', { panels: true, layout: 'boxed' });
</script>

// using jQuery ready function and constructor function name.
<script>
$js(document).ready(function () {
  $js('body').remarkable({
    tabbable: true,
    searchable: true,
    placeholder: 'Type to filter the list below...'
  });
});
</script>

Options

Name	Type	Default	Description
layout	string	default	Use 'boxed' to create a boxed-layout.
lazyload	boolean	false	Enable LazyLoad on people panels.
panels	boolean	false	Enhance the default HighQ Publisher panels.
searchable	boolean	false	Add search box to people panels.
placeholder	string	Search	Custom placeholder text for searchable. Requires searchable.
tabbable	boolean	false	Turn panels in the same column to tabbable regions.
collapsible	boolean	false	Turn panels into collapsible panels.
timeline	boolean	false	Turn panels in a single column to show in a vertical timeline.

CSS variables

Remark includes a few CSS custom properties (variables) in its compiled CSS. These provide easy access to commonly used values like its theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --lighter: #f5f5f5;
  --dark: #343a40;
  --muted: #777;
  --default-rgb: rgba(0,0,0,.125);
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1600px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compiling before being served to the browser. For example, this is how to set link styles with CSS variables.

a {
  color: var(--blue);
}

Breakpoint variables

While Remark includes breakpoints in its CSS variables (e.g., --breakpoint-xl), these are not supported in media queries, but they can still be used within rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript.

Not supported

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Supported

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}

Colour contrast

Most colours that currently make up Remark's default palette—used throughout the framework lead to insufficient colour contrast when used against a light background. Authors will need to manually modify/extend these default colours to ensure adequate colour contrast ratios.