GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → mdbootstrap → mdbsvelte

mdbootstrap / mdbsvelte

Licence: MIT license
Svelte Bootstrap with Material Design

Programming Languages

Svelte
593 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

sveltemdbmdbootstrapmdbsvelte

Projects that are alternatives of or similar to mdbsvelte

mdb4-react-ui-kit
React Bootstrap with Material Design - Powerful and free UI KIT
Stars: ✭ 74 (+13.85%)
Mutual labels:  mdb, mdbootstrap
mdb-docs-and-content
Content of the mdbootstrap.com website
Stars: ✭ 56 (-13.85%)
Mutual labels:  mdbootstrap
Blockly Samples
Plugins, codelabs, and examples related to the Blockly library.
Stars: ✭ 222 (+241.54%)
Mutual labels:  svelte
Svelte Notifications
Simple and flexible notifications system
Stars: ✭ 217 (+233.85%)
Mutual labels:  svelte
Svelte Mui
Simple Svelte 3 UI components
Stars: ✭ 234 (+260%)
Mutual labels:  svelte
carbon-preprocess-svelte
Collection of Svelte preprocessors for the Carbon Design System
Stars: ✭ 39 (-40%)
Mutual labels:  svelte
svelte-multistep-form
Svelte MultiStep Form like, this component is still in beta stage
Stars: ✭ 29 (-55.38%)
Mutual labels:  svelte
Junglejs
The Jamstack static site framework for Svelte
Stars: ✭ 246 (+278.46%)
Mutual labels:  svelte
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+103661.54%)
Mutual labels:  svelte
sensor.community
✨ new shiny website built with svelte ❤️ for dust and noise measuring project 👉 https://sensor.community
Stars: ✭ 45 (-30.77%)
Mutual labels:  svelte
Svelte Forms Lib
📝. A lightweight library for managing forms in Svelte
Stars: ✭ 238 (+266.15%)
Mutual labels:  svelte
Music Grid
A Music Grid you can play around and create short music.
Stars: ✭ 248 (+281.54%)
Mutual labels:  svelte
pos-mamba-sdk
SDK for developing in the Mamba web environment
Stars: ✭ 34 (-47.69%)
Mutual labels:  svelte
Modular Css
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Stars: ✭ 234 (+260%)
Mutual labels:  svelte
simple-todo
A browser extension that replaces the new tab page with a simple todo list
Stars: ✭ 56 (-13.85%)
Mutual labels:  svelte
Svelte Loadable
Dynamically load a svelte component
Stars: ✭ 223 (+243.08%)
Mutual labels:  svelte
upswyng
UpSwyng is a mobile-ready, digital directory of resources to assist the unhoused and at-risk communities of Boulder, CO
Stars: ✭ 19 (-70.77%)
Mutual labels:  svelte
SyncedStore
SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.
Stars: ✭ 1,053 (+1520%)
Mutual labels:  svelte
svelte-vscode
Svelte language support for VS Code
Stars: ✭ 211 (+224.62%)
Mutual labels:  svelte
svelte-lottie-player
Lottie Player component for Svelte
Stars: ✭ 90 (+38.46%)
Mutual labels:  svelte
View All Similar Projects ➔

Svelte Bootstrap with Material Design

Based on the latest Bootstrap 4 and Svelte 3. Absolutely no jQuery.

npm npm version

Read full documentaion at saurav.tech/mdbsvelte

Getting started

Step 1: Install the package

npm i mdbsvelte

Step 2: Add CSS

This package does not contains any css you need to add in your project manually

Add in your HTML layout:

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.16.0/css/mdb.min.css" rel="stylesheet">

or you can add it your svelte app:

<svelte:head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.16.0/css/mdb.min.css" rel="stylesheet">
</svelte:head>

Step 3: Import in your svelte component

<script>
  import {MDBBtn} from "mdbsvelte";
</script>
<MDBBtn>Default</MDBBtn>

For server-side side rendering (Sapper)

You need to import from the component source directly.

<script>
  import MDBBtn from "mdbsvelte/src/MDBBtn.svelte";
</script>

Components

License

FOSSA Status

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].