Getting started with Bento
Bento is a set of mix and matchable highly performant web components that are easily customizable to meet your site functionality needs. Bento components are well-tested, compatible across modern browsers, and work in many development environments. You can use one, some or all Bento components on your site! And, since Bento components are self-maintaining, they work with any other framework or components library.
Start using Bento Components in your site by following these easy steps:
1.
Identify which path fits your site’s environment. If you’re using React or Preact to render your pages, go with the React version, in all other cases, try the Web Components version.
2.
Choose a component that fits your needs and install or import it.
3.
Use the component’s API to customize functionality.
4.
Sit back, relax, and enjoy your out-of-the-box component!
React and Preact
Bento components are fundamentally React functional components, released as Preact or React, and in regular or minified builds. Install each Bento component as needed, via npm, then import it as desired. The shown example uses the React <BentoFitText> in regular build.
And that’s it!
npm install @bentoproject/bento-fit-textimport React from "react";
import { BentoFitText } from "@bentoproject/bento-fit-text/react";
import "@bentoproject/bento-fit-text/styles.css";
function App() {
return (
<BentoFitText>
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
inermis reprehendunt.
</BentoFitText>
);
}Web Components
There are two options to integrate Bento components into an HTML document:
1. Install and import the element usingnpm. 2. Include the component <script> in the head of your document.You must include each Bento component's required CSS library before adding custom styles to avoid layout shifts on load. To guarantee best loading performance, it’s best to inline the light-weight pre-upgrade styles directly into the page. See each component's section on layout and style for further details.
Install `bento-fit-text` via npm
npm install @bentoproject/bento-fit-textimport '@bentoproject/bento-fit-text';Use `bento-fit-text`via CDN
<!DOCTYPE html>
<html>
<head>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
async
type="module"
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script
async
nomodule
src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
></script>
<script
async
type="module"
src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
/>
</head>
<body>
<bento-fit-text style="width: 400px; height: 300px">
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
inermis reprehendunt.
</bento-fit-text>
</body>
</html>Browser Support
Bento components support the latest two versions of most major browsers like Chrome, Firefox, Edge, Safari, Opera and UC Browser. We support desktop, phone, tablet and the web view version of these respective browsers.
