Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@uifabric/styling
Advanced tools
Defines the core Office UI Fabric styles through a JavaScript interface.
Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as webpack which can resolve NPM package imports in your code and can bundle the specific things you import.
Within an npm project, you should install the package and save it as a dependency:
npm install --save @uifabric/styling
This will add the styling package which gives you access to the Fabric Core style classes through JavaScript.
Fonts, colors, icons and animations are exported through the classNames
export. The export exposes class names for colors
, fonts
, animations
, and icons
.
Example of returning markup that is themePrimary
colored using the medium
font:
import {
colorClassNames,
fontClassNames
} from '@uifabric/styling';
function renderHtml() {
return (
`<div class="${ [
colorClassNames.themePrimary,
fontClassNamed.medium
].join(' ') }">Hello world!</div>`
);
}
There are a number of classes available under colorClassNames
, fontClassNames
, AnimationClassNames
, and iconClassNames
exports. See the available classes below.
Using animations works the same way:
import {
AnimationClassNames
} from '@uifabric/styling';
function renderHtml() {
return (
`<div class="${ AnimationClassNames.fadeIn }">Hello world!</div>`
);
}
Rendering icons is also simplified:
import {
classNames
} from '@uifabric/styling';
function renderHtml() {
return (
`<i class="${ classNames.icons.snow }" />`
);
}
If you need access to the raw JavaScript style objects so that you can mix them into other classes and use via a css library such as Glamor or Aphrodite, you can access the raw classes like so:
import {
styles
} from '@uifabric/styling';
import { css } from 'glamor';
function renderHtml() {
let className = css({
...styles.fonts.large,
background: 'red'
});
return (
`<div class="${ css(styles.fonts.large, { background: 'red' }) }">Hello!</div>`
);
}
The default palette of colors matches the default Fabric core styling conventions. However, it is possible to override the color slots to match your product requirements:
import {
loadTheme({
colors: {
themePrimary: 'red',
themeSeconary: 'blue'
}
});
}
If you override theme settings, you need to do this before accessing theme colors. Otherwise you won't get a notification that the theme changed.
Members of classNames.colors
:
Name | Description |
---|
Members of classNames.fonts
:
Name | Description |
---|
Members of classNames.animations
:
Name | Description |
---|
Members of classNames.icons
:
Name | Description |
---|
FAQs
Styling helpers for Fluent UI React.
The npm package @uifabric/styling receives a total of 24,049 weekly downloads. As such, @uifabric/styling popularity was classified as popular.
We found that @uifabric/styling demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 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
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.