We use this UI Framework to reduce development time when building apps, provide a default blanket of test coverage to our apps' view layer, and ensure consistency throughout our apps' UIs.
This framework provides a number of UI components and generic UI-related services. It's built upon React and SCSS.
See the live examples at http://smaato.github.io/ui-framework/.
Install this repo as an NPM dependency to gain access to its UI components.
In your JS:
import {
AccountNav,
AccountPicture,
Accordion,
AccordionItem,
AddOnControl,
AddOnDropdown,
AddOnDropdownOption,
AddOnLabel,
AppHeader,
AppHeaderButton,
AppHeaderDivider,
AppLogo,
AppNav,
AppTitle,
AppTitleContainer,
BasicButton,
Body,
BodyMaxWidthLayout,
BodyPanel,
BodyPanelItem,
Box,
Button,
ButtonGroup,
CallOutButton,
Card,
CardHolder,
Chart,
ChartDot,
CheckBox,
Column,
ColumnLayout,
DateRange,
DescriptionText,
Dropdown,
DropdownDot,
DropdownOption,
FieldMessage,
FilterControl,
Form,
FormFooter,
FormPanel,
Grid,
GridBody,
GridBodyCell,
GridBodyEditableCell,
GridControls,
GridEmptyRow,
GridFakeRow,
GridFooter,
GridHeader,
GridHeaderCell,
GridHeaderSortableCell,
GridIcon,
GridLoadingRow,
GridRow,
GridSearch,
GroupedButton,
Heading,
HollowButton,
HorizontalLine,
Kpi,
KpiNegative,
KpiPositive,
Label,
LabeledControl,
LabeledField,
LeftFixedLayout,
LineChart,
Link,
Menu,
MenuItem,
Modal,
ModalBody,
ModalConfirmationBody,
ModalConfirmationFooter,
ModalFooter,
ModalHeader,
ModalOverlay,
ModalStack,
OrganizationSwitcher,
OrganizationSwitcherItem,
Pagination,
Panel,
PanelLayout,
PanelProgress,
PickedList,
PickedListItem,
PickedSummary,
PrimaryButton,
Progress,
ProgressModal,
ProgressSuccess,
RecycledList,
SearchBox,
StatusDropdown,
StatusDropdownOption,
StatusDropdownOptionIcon,
StickyGrid,
SubLabel,
SummaryControl,
Text,
TextArea,
TextInput,
TitleBar,
VerticalLayout,
ViewHeader,
ViewHeaderNav,
} from 'ui-framework';
import {
ComparisonTypes,
Entity,
EscapeKeyHandler,
Filter,
FilterableItems,
FilterOption,
GridStencil,
Number,
polyfillCustomEvent,
ScrollPosition,
Sorter,
SortState,
ThrottledEventDispatcher,
} from 'ui-framework/services';In your SCSS:
@import 'path/to/node_modules/ui-framework/src/framework/index';
// Now you can use the SCSS styles, mixins, functions, and variables.Keep in mind that you will be expected to use PostCSS and Autoprefixer to add vendor-prefixed properties to your compiled CSS.
Also keep in mind in order to use the ModalOverlay component, you need to have
a div#portal-div inside your HTML <body />.
This is not yet supported but we can add the compiled CSS file to the repo, so that simpler projects will have access to the CSS, if such a use case arises.
Work on examples in the src/examples directory.
Work on framework components in the src/framework directory.
gem install sass; gem install compass
npm install
npm install -g gulp
npm run install-peers
gulpopen http://localhost:8000/gem install scss_lintInstall the Ruby gem for SCSS linting.
Here is a simplified view of the folder structure of the framework source.
src
├── assets
│ └── icons
├── examples
│ ├── _partials
│ │ ├── _componentLayout.jade
│ │ ├── _head.jade
│ │ ├── _integrationLayout.jade
│ │ └── _nav.jade
│ ├── components
│ │ └── titleBar.jade
│ ├── index.js
│ ├── index.scss
│ └── integrations
│ └── tableView.jade
└── framework
├── _index.scss
├── index.js
└── titleBar
├── TitleBar.jsx
├── TitleBar.spec.jsx
├── TitleBarButton.jsx
├── _index.scss
├── _titleBar.scss
└── _titleBarButton.scssexamples
Contains the files the demo the different components in the framework. Documents their use from a UX/UI point of view, as well as how to use their interfaces as React components.
framework
Contains the SCSS and JSX files that form the core of the framework.
Make sure each component has the following:
- A component .jsx file (obviously)
- A corresponding .spec.jsx test file and adequate tests
- An example .jsx file that demonstrates component use cases and states
- The component is exported in framework.js
- The component export is tested in framework.spec.js
- The README is updated to demonstrate how the component can be imported
- Test the component in Chrome, Firefox, Safari, and IE
Use the Yeoman UI Generator to automatically create the component and test files.
In the TitleBar example above, this would be the TitleBar.jsx file, the TitleBar.spec.jsx file, and the _titleBar.scss file. (The _index.scss file doesn't count since it isn't supposed to contain any styles; instead it just imports the component SCSS files.)
If additional components live inside the same folder (e.g. TitleBarButton above), they should also consist of an additional set of these 3 files.
This means that each component (and its associated components, such as TitleBarButton)
should be documented in a file in the examples/components directory.
Composing components together into common UI patterns should be documented in
the examples/integrations directory.
gulp productionThis command generates minified distribution with sourcemaps in ./dist/.
gulp deployThis command will run the production gulp task, and then deploy the contents
of ./dist/ to http://smaato.github.io/ui-framework/.
Use this gulp task to deploy the UI Framework to AWS S3 (typically used for internal review):
gulp deployToAwsThis command expects the following environment variables to be set:
- AWS_ACCESS_KEY_ID (the AWS access key ID)
- AWS_BUCKET_UI_FRAMEWORK (the AWS S3 bucket)
- AWS_SECRET_ACCESS_KEY (the AWS secret access key)