Gathering detailed insights and metrics for @smui/layout-grid
Installations
npm install @smui/layout-gridDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
22.12.0
NPM Version
lerna/8.1.9/node@v22.12.0+x64 (linux)
Score
80.2
Supply Chain
84.8
Quality
85.8
Maintenance
100
Vulnerability
99.3
License
Releases
Unable to fetch releases
Contributors
49
Languages
6
Svelte
SCSS
TypeScript
JavaScript
HTML
Shell
Svelte (81.85%)
SCSS (8.68%)
TypeScript (8.37%)
JavaScript (0.72%)
HTML (0.35%)
Shell (0.03%)
Developer
Download Statistics
Total Downloads
884,490
Last Day
708
Last Week
3,228
Last Month
15,406
Last Year
305,533
GitHub Statistics
3,350 Stars
1,416 Commits
283 Forks
33 Watching
15 Branches
49 Contributors
Maintainers
1
Package Meta Information
Latest Version
8.0.0-beta.3
Package Id
@smui/layout-grid@8.0.0-beta.3
Unpacked Size
63.21 kB
Size
13.38 kB
File Count
20
NPM Version
lerna/8.1.9/node@v22.12.0+x64 (linux)
Node Version
22.12.0
Publised On
22 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
884,490
Last day
-19.1%
708
Compared to previous day
Last week
-20%
3,228
Compared to previous week
Last month
-18.5%
15,406
Compared to previous month
Last year
-15.5%
305,533
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
5
Versions
A library of Svelte Material UI components, based on Material Design Components - Web.
Demos, Code Samples, and Guides
Features
Here are some unique features that help SMUI stand out:
- Full TypeScript support, including HTML attributes.
- You can add arbitrary attributes to all of the components and many of the elements within them.
- You can add actions to the components with
use={[Action1, [Action2, action2Props], Action3]}. - You can add props to lower components and elements with "$" props, like
input$maxlength="15". - SMUI supports RTL languages.
Installation
To get started, check out the installation docs or the SvelteKit docs.
Need Help?
If you need help installing or using SMUI, join the Discord server.
Svelte 5
SMUI v8 requires Svelte 5. This is the documentation for v8, which is still in development (and is currently in a prerelease state).
If you are using Svelte 4, you can use SMUI v7, which is the current stable version. Check out the v7 branch for the current docs.
Migration
Upgrading from an old version? Be sure to read the migration doc.
Upgrading from v7? You need Svelte 5. Event listeners no longer to use the CustomEvent type. Check out the upgrade instructions.
Upgrading from v6? You need Svelte 4. No more elemental components; you can now use the "tag" prop to change the element. No more "ComponentDev" types; components can now be used as their type. Check out the upgrade instructions.
Upgrading from v5? If you're still using the advanced styling method, it's really time to switch to the easy styling method. '/styled' endpoints are no longer provided. Check out the upgrade instructions.
Upgrading from v4? SMUI v5 requires the TypeScript preprocessor. SMUI v6 does not though, so if you upgrade straight to v6, don't worry. Check out the upgrade instructions.
Upgrading from v3? SMUI's styling method has been simplified. Check out the upgrade instructions.
Upgrading from v2? There are lots of changes listed in the upgrade instructions.
Old Docs
You can find older versions of the docs on their respective branch:
Icons
You can include icons in a number of ways, but the easiest is the Material Icon Font. This will give you the standard set of Material Icons, available with the CSS class "material-icons".
1<link 2 href="https://fonts.googleapis.com/icon?family=Material+Icons" 3 rel="stylesheet" 4/>
However, there are two downsides. First is that all icons are downloaded, no matter which ones you use, so the size over the wire will almost certainly be more than necessary. Second is that it only includes the Material Icons from Google.
Another option is the Material Design Icons library. See the "Using SVGs" demo on the Icon Button demo page for instructions to use icons from the @mdi/js package (or any other SVG icons).
You can even use them in data URLs. To get a data URL for the icon:
- Find your icon and click "Copy SVG" button (it looks like
</>). - Base64 encode the document.
- Format the URL like this
data:image/svg+xml;base64,encodedcontent, replacing "encodedcontent" with the Base64 results. - Now you have an image URL you can use in an "img" tag src attribute or anywhere else you put an image URL (like
background-image: url();).
Components
Click a component/package below to go to the documentation. (Note that this documentation is a work in progress. The demo code should be your main source of truth for how something works.)
- Accordion‡
- Action Buttons
- App Bars
- Badge‡
- Banner
- Card
- Common
- Data Table
- Dialog
- Drawer
- Elevation†
- Image List
- Inputs and Controls
- Layout Grid
- List
- Menu Surface
- Menu
- Paper‡
- Progress Indicators
- Ripple
- Snackbar
- Tabs
- Tooltip
- Touch Target
- Typography†
† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.
‡ This is not an MDC-Web component (upstream library). It is an addition that SMUI provides.
- Labels and icons are named exports in the components that use them, or you can use the 'Label' and 'Icon' exports from '@smui/common'. (Except for chips labels and icons, textfield icons, and select icons, because they are special snowflakes.)
License
Copyright 2019-2024 Hunter Perrin
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
No vulnerabilities found.
Reason
30 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 10
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
no binaries found in the repo
Reason
2 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Score
4.1
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More