optimizely-oui
Advanced tools
Meet Louis, the official mascot of OUI.
This document contains three parts:
http://design.optimizely.com/docs/oui/
This is "living" style guide uses ScribeSass to construct single-page documentation from comments inside each Sass partial.
You can include this pre-compiled version of OUI in your application:
<link rel="stylesheet" href="https://oui.cdn.optimizely.com/9.0.8/oui.css">
<link rel="stylesheet" href="https://oui.cdn.optimizely.com/9.0.8/oui-extras.css">
Replace 9.0.8 with the latest release if needed.
oui.css contains the core CSS and oui-extras.css currently contains only classes to render OUI icons. If you plan to use OUI icons you'll need to include both oui.css and oui-extras.css in your project.
OUI is published as an npm module called optimizely-oui. To install:
npm install optimizely-oui --save
If using Gulp for your project:
gulp.task('sass', function() {
gulp.src('scss/**/*.scss')
.pipe(sass({
errLogToConsole: true,
includePaths : [
require('optimizely-oui').includePath
]
}))
.pipe(gulp.dest('path/to/css'));
});
Download OUI starter code that includes the required file structure for new projects. Note that the paths to oui/... will only work if the above gulp task is in place.
OUI consists of two parts:
mobile)
For example, if you're building a mobile site, mobile.scss would contain:
// # Mobile
// Root file driving the Mobile CSS.
// ## OUI functions
@import 'oui/partials/sass/functions';
// ## OUI and p13n variables
// Import `oui` and `mobile` variables
@import 'oui/oui-variables';
@import 'mobile/mobile-variables';
// ## OUI and mobile partials
// Import `oui` and `mobile` partials
@import 'oui/oui-partials';
@import 'mobile/mobile-partials';
// ## Trumps
// Trumps use `!important` classes for overrides and should always be loaded last.
@import 'oui/partials/trumps/background';
@import 'oui/partials/trumps/borders';
@import 'oui/partials/trumps/layout';
@import 'oui/partials/trumps/margin';
@import 'oui/partials/trumps/padding';
@import 'oui/partials/trumps/type';
@import 'oui/partials/trumps/sizing';
The following is for users planning to make contributions to OUI.
Important: see CONTRIBUTING.md for details on our versioning system.
After cloning the oui repo, run npm start to install dependencies and a linter post-commit hook.
gulp : Runs the default compass watch process.npm test : Attempts to compile SCSS and runs the linter.gulp svg : Builds svg sprite and demo page into dist.gulp sass : Builds OUI-only css file for testing into dist.To output OUI CSS file to the dist directory run:
gulp sass
SVGs are maintained by the https://github.com/optimizely/oui-icons repository. The sprite file that is generated by the repo, svg-symbols.svg, needs to be included as the first child of the <body> on any page that needs svg icons.
Icons are in three sizes but the most common is 16x16.
<svg class="icon">
<use xlink:href="#add-16"></use>
</svg>
By using this method including the icon color can be changed by using the fill CSS property.
If you're including OUI by including the stylesheet link to the rendered CSS (that is, you're not including it with Sass) you can still use the method described above or reference the icons by using CSS classes.
<div class="icon icon--add-16"></div>
This is an easier implementation as it does not required an svg sprite but you cannot change the color of the icons.
Use existing HTML or add new HTML to /tests/ to confirm any OUI changes in Chrome, Firefox, Safari and IE 10+. Run:
gulp html-tests
This will start browsersync and will watch and reload the browser after any Sass or HTML changes.
OUI stands for Optimizely User Interface. It's a collection of CSS/HTML/JS elements and objects meant to be combined and extended to create larger interfaces, influenced primarily by Harry Robert's work on inuit.css and Johnathon Snooks SMACSS. The goals of this library are to provide code that is...
By achieving these goals our code becomes...
@extend functionality, we cut down on CSS bloat. Less code means fewer bugs.In order to write HTML and CSS classes that provide meaning for developers we're using the BEM syntax. BEM stands for Block, Element, Modifier and is becoming a popular approach to building CSS and HTML that describes an object's internal relationships.
<div class="grid grid--gutter">
<div class="grid__cell">
grid cell
</div>
<div class="grid__cell">
grid cell
</div>
</div>
<div class="grid__cell">
grid cell
</div>
</div>
In the example above...
grid and is the parent class of the object.grid__cell.grid--gutter. This provides spacing between the cells.Though somewhat verbose, this syntax makes it easy to determine the child/parent relationships between bits of code, especially when different objects are mixed together. It can be tricky naming elements so some judgment is required. This becomes easier over time.
For a longer discussion Harry Roberts provides a good introduction to the syntax.
@extend in Sass.FAQs
Optimizely's Component Library.
We found that optimizely-oui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.