View theme.md

This page is a legacy page and should be considered outdated. It's strongly recommended to consider looking at the up-to-date React example instead.

All JavaScript for this example will be written in ES6 using imports and exports. The project will consist of 4 modules and 1 theme. The complete folder structure will be as follows:

|-- modules
|   |-- buttons
|   |   |-- _buttons.scss
|   |-- grid
|   |   |-- _grid.scss
View accordion-withState.jsx
Accordion.defaultProps = {
name: 'accordion'
};
class Accordion extends React.Component {
constructor(props) {
super(props);
this.panels = [];
this.state = { activePanel: null };
View accordion.jsx
Accordion.defaultProps = {
name: 'accordion'
};
class Accordion extends React.Component {
toggle(event) {
const panel = event.target.closest.component('panel');
const operator = panel.modifier('active') ? 'unset' : 'set';
panel.modifier('active', operator);
View preview.md

GitHub license GitHub license npm version npm version

Synergy

A front-end framework for creating modular, configurable and scalable UI components for the web

Useful Wiki Pages

View form.jsx
<app.Form fields={[
{
type: 'fieldset',
id: 'loginDetails',
legend: {
title: 'Login Details',
className: 'foo'
},
fields: [
{
View signup.js
<app.Form fields={[
{
type: 'fieldset',
id: 'loginDetails',
legend: 'Login Details',
fields: [
{
type: 'text',
label: 'Username',
id: 'username',
View module.sass
// input
@include module('alert', (
component('icon'): (
margin-right: 0.5em,
line-height: 1.25,
modifier('close'): (
cursor: pointer
),
// same as above
View get-param.scss
/// Get parmater from config string
///
/// @author [@esr360](http://twitter.com/esr360)
/// @access public
///
/// @param {string} $string - the string from which to retrieve param
@function get-param($string) {
@if str-index($string, 'component("') == 1 {
$string: str-replace($string, 'component("', '');
$string: str-replace($string, '")', '');
View alert.jsx
import defaults from './alert.json';
/**
* Render Alert component
*
* @prop {String} name
* @prop {String} alert
* @prop {Bool} bar
* @prop {Bool} box
* @prop {(Bool|Array} icon
View thing3.jsx
<Alert success bar withWrapper />
<Alert success bar withWrapper />
<Alert success bar />
//
<Alert wrapper>
<Alert success bar />
<Alert success bar />
</Alert>