outsystems-ui - v2.30.0
    Preparing search index...

    outsystems-ui - v2.30.0

    OutSystems UI · v2.30.0

    GitHub License PRs Welcome

    Create modern experiences with fully customizable responsive Screen Templates and UI Patterns for Native Mobile and Reactive Web Apps.

    One Framework Fully Integrated Responsive by Default Limitless Possibilities
    Create seamless experiences for Reactive Web and Native Mobile Applications. Drag and drop UI Patterns and Screen Templates from OutSystems Service Studio. Ready-to-use Layouts and UI Patterns that automatically adapt to the device size. Extend the styles of over 70 UI Patterns and Screen Templates to make them yours.

    See CONTRIBUTING.md for development setup, workflow, code standards, and PR requirements.

    • More than 70 UI patterns
    • Easily customizable and extendable design system
    • Responsive UI
    • Right-to-left support
    • Accessibility compliance with WCAG 2.1
    • Actions to deal with different device types
    • Built for Reactive Web and Mobile apps

    Find out more in OutSystems UI website.

    The OutSystems UI component, like all components, can be found in OutSystems Forge and OutSystems Forge Component Page (ODC).

    The documentation can be found in the OutSystems UI website and in OutSystems product documentation.

    We also use the TypeDoc to automatically generate documentation. TypeDoc converts comments in TypeScript source code into rendered HTML documentation, alongside UML diagrams for each class and Interface.

    Take a look at it, at OutSystemsUI Framework Documentation.

    OutSystems UI allows you to create applications with great user experience and beautiful design at unbeatable speed. This is how all the pieces come together and how you can go from creating your first application to see it working in minutes!

    This repository contains the code that is used to control/style the OutSystems UI patterns. The code is written in TypeScript🖤 and SCSS.
    You can fork it then branch it and PR your proposals!

    We highly recommend the usage of the following tools:

    • Visual Studio Code
    • With these extensions:
      • Document This
      • ESLint
      • Prettier - Code formatter
    • Volta — manages Node.js and npm versions for this project

    This project pins Node.js and npm versions in package.json. Install Volta once and the correct versions are applied automatically when you work in this repository.

    Install Volta: follow the official Getting Started guide (macOS, Windows, and Linux).

    Verify Volta is active:

    volta --version          # Volta is installed
    volta which node         # pinned Node version for this project
    volta which npm          # pinned npm version for this project
    node -v
    npm -v
    1. Do a Repository Fork
    2. Create a branch based in the branch master (latest & greatest release) - branch master is dev
    3. Open your branch Code in Visual Studio Code
    4. Run the following command in Visual Studio Code terminal: npm run setup (this will install all the dependencies that you need to compile the code)
    5. Do your magic! 😎
    6. Document your code (with the extension "Document This", start typing /** and the extension will give you a good starting point
    7. Compile and fix errors and warnings (in Visual Studio Code terminal: npm run build)
    8. Check if the code format is following our conventions (in Visual Studio Code terminal: npm run lint)
      1. Some of the conventions can be fixed automatically by lint (in Visual Studio Code terminal: npm run lintfix)
      2. Although the script above executes the prettier conventions, you may want to run it over all project files (in Visual Studio Code terminal: npm run prettier)
    9. Fix all errors & warnings! ✅
    10. Kept the branch updated with the master branch and also synchronized with the upstream master
    11. Create a PR, describing what was the (mis)behavior, and what you changed and please provide a sample

    After completing your changes, and testing, please proceed with submitting a Pull Request.

    To be accepted, a Pull Request needs to:

    1. Fulfill the following requirements

      • Needs to compile without errors
      • Needs to follow the code style rules (without warnings and errors)
      • Needs to be approved by 2 team members (owners of the repo)
      • The Pull Request template, should be filled up by the Pull Requestor:
        • Provide a short description
        • A link to a sample page showing the fixed behavior or the new feature
        • What was happening?
        • What was done?
        • Tests steps
        • Screenshots
        • Checklist

    2. Follow best practices

      • The submitted code should be well documented (e.g. comments).
      • Avoid changes outside the scope of the issue in hands.
      • Avoid exposing sensible information of any kind (e.g. internal server link, process, etc).

    Write us on the component support page!

    Available internally on Slack channel #rd-uicomponents-contributors.

    GitHub - OutSystems - OutSystemsUI - UIFramework

    Settings
    Member Visibility

    On This Page
    OutSystems UI · v2.30.0