nuxeo/website-styles

Name: website-styles

Owner: Nuxeo

Description: Styles to be used on Nuxeo websites

Created: 2017-01-20 16:47:04.0

Updated: 2018-05-03 17:03:51.0

Pushed: 2018-05-03 17:03:54.0

Homepage: null

Size: 233961

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Nuxeo Website Components

Please use EditorConfig plugin for your code editor/IDE.

Using the package

Include with npm

Add the following in your package.json:

endencies": {
"nuxeo-website-styles": "nuxeo/website-styles#v1.0.1",
...

SCSS components

Add path to SCSS compiler

In compiling the SCSS you need to include the path --include-path ./node_modules/nuxeo-website-styles/scss/ e.g. npm scripts

ld_css": "node-sass --source-map true --source-map-contents --include-path ./client/scss/ --include-path ./node_modules/nuxeo-website-styles/scss/ --output-style compressed --output ./client/css/ ./client/scss/"

Include styles

In SCSS import and include the appropriate styles:

ort 'nuxeo_styles';

lude 'nuxeo-base-styles';
lude 'nuxeo-typography';

Polymer elements

Copy elements

Copy elements into some assets location in your project e.g. npm scripts

tcopy_assets": "cp -r node_modules/nuxeo-website-styles/satellite/latest/* ./site/assets/"

Include elements

In the header include the elements e.g.

ipt src="/assets/js/webcomponents-lite.min.js"></script>
k rel="import" href="/assets/elements.build.min.html" />

Usage without Node

In the header of your page:

 0. Include Nuxeo Font. -->
k rel="stylesheet" href="https://static.nuxeo.com/satellite/nuxeo-font.css" media="screen" title="Nuxeo Font">

 1. Load webcomponents-lite.min.js for polyfill support. -->
ipt src="https://static.nuxeo.com/satellite/latest/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
ipt src="https://static.nuxeo.com/satellite/latest/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

 2. Use an HTML Import to bring in some elements. -->
k rel="import" href="https://static.nuxeo.com/satellite/latest/elements/elements.html">

Available mixins

Mixin name | Description ———–|———— nuxeo-base | Base styles required nuxeo-typography | Standard typography styles nuxeo-codeblock | Codeblock with HighlightJS styling and copy button

Available elements

Element | Description | Parameters | Sub elements | Sub element parameters ———–|————|————|————|———— <nuxeo-header></nuxeo-header> | Nuxeo standard header | show-nuxeo-menu: if set to true show corporate website menu | <nuxeo-banner></nuxeo-banner>

<nuxeo-menu></nuxeo-menu> | background-id: the background image id to use (currently only “1”)
title: the title to display (h1)

site-name: the site name
site-url: the homepage URL
menu-items: menu items to display on the left
menu-items-right: menu items to display on the right (not visible on mobile version) <nuxeo-footer></nuxeo-footer> | Nuxeo standard footer | year: the year to display
show-license: if set to true show CC Licence logo | | footer-items: footer link items to display

Standard usage

See Usage example setup.

Header

eo-header></nuxeo-header>

Footer

eo-footer year="2018" show-license="true"></nuxeo-footer>

Development (Local)

Requirements

• git — make sure your Privacy & Security settings allow to download applications from anywhere
• Node.js — Stable: See Release schedule(version >= v6.9)
  • nvm install lts/* will get the latest Long Term Support version
  • Test with node --version
  • Remember: Run nvm use at the start of your session.
• libsass — Might not be necessary.
• A decent code editor (https://atom.io/ or https://www.sublimetext.com/ for example) with ideally the following:
• EditorConfig plugin.
• ESLint
• Sass-Lint

To install on mac:

• install homebrew (http://brew.sh/)
• run `brew update`
• use brew to install (or use upgrade if you have already some installed):

   install git nodejs libsass
  

Installation

Clone the repository to your local machine, using your favourite Git client or the command line:

clone https://github.com/nuxeo/website-styles
ebsite-styles

Run Locally

run dev

Change browser

The broswer defaults to chromium-browser but can be changed with the following command and then locally as usual.

config set Nuxeo-website:browser firefox

Contributing

Please keep the available mixins table and available elements table up to date if you add or amend mixins and/or elements.

Releasing changes

This module is used via npm, please bump the version when changes are made.

Node packages follow Semantic Versioning (SemVer), versions a described by a MAJOR.MINOR.PATCH version.

After you've committed your code, run one of the following:

version major # incompatible API changes
version minor # add functionality in a backwards-compatible manner
version patch # backwards-compatible bug fixes

Then push the version commit and the tags:

push && git push --tags