Styles to be used on Nuxeo websites
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
SMAKK
demo
elements
scss
src
static
.editorconfig
.eslintdefaults
.eslintignore
.eslintrc
.gitignore
.postcssrc
.prettierignore
.prettierrc
.sass-lint.yml
.stylelintrc
README.md
STYLES.md
bower.json
nodemon.json
package-lock.json
package.json
polymer.json
postcss.json

README.md

Nuxeo Website Components

Please use EditorConfig plugin for your code editor/IDE.

Helpful reference for styles

Using the package

Include with npm

Add the following in your package.json:

"dependencies": {
    "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

"build_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:

@import 'nuxeo_styles';

@include 'nuxeo-base-styles';
@include 'nuxeo-typography';

Polymer elements

Copy elements

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

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

Include elements

In the header include the elements e.g.

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

Usage without Node

In the header of your page:

<!-- 0. Include Nuxeo Font. -->
<link 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. -->
<script src="https://static.nuxeo.com/satellite/latest/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="https://static.nuxeo.com/satellite/latest/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

<!-- 2. Use an HTML Import to bring in some elements. -->
<link 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

<nuxeo-header></nuxeo-header>

Footer

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

Development (Local)

Requirements

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):
brew install git nodejs libsass

Installation

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

git clone https://github.com/nuxeo/website-styles
cd website-styles

Run Locally

npm run dev

Change browser

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

npm 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:

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

Then push the version commit and the tags:

git push && git push --tags