Skip to content

Commit

Permalink
fix: correct typo in docs introduction (#3725)
Browse files Browse the repository at this point in the history
  • Loading branch information
jazibjafri authored Aug 14, 2020
1 parent 8c76a11 commit ad102ea
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion sites/website/src/docs/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ To understand how FAST can help you, let's take a look at the FAST tech stack fr

At the top of the stack FAST provides two sets of Web Components: `@fluentui/web-components` and `@microsoft/fast-components`. Both of these libraries include a common set of components found in many websites and apps. Example components include button, menu, tree-view, tab, card, modal, and more. So, what is the difference between these two libraries? The answer is that each library implements a different *design system*. `@fluentui/web-components` implements Microsoft's Fluent Design System. They look and feel like the components found in products like Windows, Office, Teams, and Edge. If you like the Fluent Design System or are building experiences designed to fit naturally into the Microsoft ecosystem, this is the component set you'll want to use. Alternatively, `@microsoft/fast-components` provides an industry-focused design system with more customization options. We call this system "FAST Frame". If you're looking to integrate FAST components into an existing site or app, or if you need more control over the theme of the components, this is the option you'll want to start with.

What if you're not just looking for a set of components to use, but you also need to implement a custom *design system*? This is where the second level of the stack comes into play. `@microsoft/fast-foundation` provides foundational building blocks that can be assembled to create new design systems and component libraries. For example, if you wanted to implement Google's Material Design, you could do that using `@microsoft/fast-foundation`. You could also implement something like Twitter Bootstrap. Both `@fluentui/web-components` and `@microsoft/fast-components` assemble the building blocks of `@microsoft/fast-foundation` to create their component sets. What types of building blocks are we talking about though? Perhaps the most valuable feature of the foundation is that it provides base component behaviors and templates for the standard components. So, if you want to implement a tree-view in your design system, for example, you would use the foundation base component behavior and template, but combine it with your own styles. The foundation components implement the state management, accessibility, keyboard navigation, and extensibility/composition model so you don't have to write that code. Additionally, foundation provides facilities for dynamic style behaviors, CSS property management, algorithmic color, RTL, high contract, and more. You don't have to write any of that. Just assemble the building blocks and add your styles to create your own component library, expressing your own design system.
What if you're not just looking for a set of components to use, but you also need to implement a custom *design system*? This is where the second level of the stack comes into play. `@microsoft/fast-foundation` provides foundational building blocks that can be assembled to create new design systems and component libraries. For example, if you wanted to implement Google's Material Design, you could do that using `@microsoft/fast-foundation`. You could also implement something like Twitter Bootstrap. Both `@fluentui/web-components` and `@microsoft/fast-components` assemble the building blocks of `@microsoft/fast-foundation` to create their component sets. What types of building blocks are we talking about though? Perhaps the most valuable feature of the foundation is that it provides base component behaviors and templates for the standard components. So, if you want to implement a tree-view in your design system, for example, you would use the foundation base component behavior and template, but combine it with your own styles. The foundation components implement the state management, accessibility, keyboard navigation, and extensibility/composition model so you don't have to write that code. Additionally, foundation provides facilities for dynamic style behaviors, CSS property management, algorithmic color, RTL, high contrast, and more. You don't have to write any of that. Just assemble the building blocks and add your styles to create your own component library, expressing your own design system.

So far we've talked about using existing components and creating new design systems and component libraries from existing pieces. But FAST enables you to create completely new web components as well. Enter `@microsoft/fast-element`, the lowest level part of the FAST tech stack. `@microsoft/fast-element` provides a thin layer of opinions on top of Web Components, lifting the level of abstraction just enough to make it easier and FASTer to build components. `@microsoft/fast-element` helps by providing attribute/property syncing, rich Model-View-ViewModel (MVVM), efficient template rendering/update, style composition, and much more. The entire `@microsoft/fast-element` library, *without* tree-shaking, is around 10kb minified and GZipped. It was designed for tree-shaking from the beginning, so any feature you don't use when building a component will be removed during build, allowing for highly efficient optimized payloads.

Expand Down

0 comments on commit ad102ea

Please sign in to comment.