309 lines
14 KiB
HTML
309 lines
14 KiB
HTML
<h1 id="awesome-mdbootstrap-awesome">Awesome MDBootstrap <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://awesome.re/badge.svg" alt="Awesome" /></a> <a
|
||
href="https://mdbootstrap.com"><img src="https://mdbootstrap.com/img/Marketing/general/logo/huge/mdb.png" width="380" align="right" alt="MDBootstrap"></a></h1>
|
||
<blockquote>
|
||
<p>A curated list of the best resources in the MDBootstrap
|
||
community.</p>
|
||
</blockquote>
|
||
<p><a href="https://github.com/mdbootstrap/mdb-ui-kit">MDBootstrap</a>
|
||
is a set of slick, responsive page templates, layouts, components, and
|
||
widgets to rapidly build web pages.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#resources">Resources</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#useful-links">Useful Links</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#tools">Tools</a></li>
|
||
<li><a href="#data-grid">Data Grid</a></li>
|
||
<li><a href="#cli--hosting">CLI & hosting</a></li>
|
||
<li><a href="#education">Education</a></li>
|
||
</ul>
|
||
<h2 id="resources">Resources</h2>
|
||
<p>Official projects and resources of MDBootstrap.</p>
|
||
<p>Free</p>
|
||
<ul>
|
||
<li><a href="https://mdbootstrap.com/docs/standard/">MDB Standard
|
||
Free</a> - Free to download, open-source Bootstrap 5 UI Kit.</li>
|
||
<li><a href="https://mdbootstrap.com/docs/angular/">MDB Angular Free</a>
|
||
- Bootstrap 5 & Angular 11 Free UI KIT with Material Design.</li>
|
||
<li><a href="https://mdbootstrap.com/docs/react/">MDB React Free</a> -
|
||
Bootstrap 5 & React 17 Free UI KIT with Material Design.</li>
|
||
<li><a href="https://mdbootstrap.com/docs/vue/">MDB Vue Free</a> -
|
||
Bootstrap 5 & Vue 3 Free UI KIT with Material Design.</li>
|
||
</ul>
|
||
<p>Pro</p>
|
||
<ul>
|
||
<li><a href="https://mdbootstrap.com/docs/standard/pro/">MDB Standard
|
||
Pro</a> - Premium UI Kit for the latest Bootstrap 5. Lifetime usage of
|
||
5000+ premium components, thousands of templates, plugins, design
|
||
blocks.</li>
|
||
<li><a href="https://mdbootstrap.com/docs/angular/pro/">MDB Angular
|
||
Pro</a> - Material Design for Bootstrap 5 with Angular.</li>
|
||
<li><a href="https://mdbootstrap.com/docs/react/pro/">MDB React Pro</a>
|
||
- Material Design for Bootstrap 5 with React.</li>
|
||
<li><a href="https://mdbootstrap.com/docs/vue/pro/">MDB Vue Pro</a> -
|
||
Material Design for Bootstrap 5 with Vue.</li>
|
||
</ul>
|
||
<h2 id="community">Community</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://mdbootstrap.com/snippets/?tag=community">Snippets</a> -
|
||
Projects created with MDBootstrap.</li>
|
||
<li><a href="https://mdbootstrap.com/support/">Support</a> - Place where
|
||
you can solve your technical problems.</li>
|
||
</ul>
|
||
<h2 id="useful-links">Useful Links</h2>
|
||
<p>Official projects and resources of MDBootstrap.</p>
|
||
<ul>
|
||
<li><a href="https://mdbootstrap.com/snippets/">Snippets</a> - Best
|
||
source of Bootstrap code examples & plugins.</li>
|
||
<li><a href="https://mdbootstrap.com/docs/standard/lab/">LAB</a> -
|
||
Inspirational concepts & experiments created by the community of
|
||
MDB.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/customization/ui-ux-tips/">UI/UX
|
||
Tips</a> - Quick and easy-to-implement tips to improve your design.</li>
|
||
<li><a href="https://mdbootstrap.com/services/">Services</a> - We
|
||
incorporate all of them in our own products, so our developers are
|
||
uniquely experienced with these tools. We also use a variety of other
|
||
solutions.</li>
|
||
<li><a href="https://github.com/mdbootstrap/MDB-VSCode-snippets">Visual
|
||
Studio Code snippets</a> - An extension that allows you to add useful
|
||
snippets of the most popular MDB 5 components to Visual Studio
|
||
Code.</li>
|
||
<li><a
|
||
href="https://github.com/mdbootstrap/mdb-angular-vscode-snippets">Angular
|
||
Visual Studio Code snippets</a> - This extension adds snippets for MDB
|
||
Angular - Angular Bootstrap UI KIT.</li>
|
||
<li><a href="https://github.com/mdbootstrap/mdb-webpack-starter">Webpack
|
||
starter</a> - This guide describes in detail the capabilities of Webpack
|
||
Starter.</li>
|
||
<li><a
|
||
href="https://www.g2.com/products/material-design-for-bootstrap/reviews">Reviews</a>
|
||
- User feedback on mdbootstrap.</li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<p>Contribute to the community and share your technical knowledge - or
|
||
just read the articles written by others.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/technology-comparison/">Technology
|
||
comparision</a> - What will be the best JavaScript framework in
|
||
2022?</li>
|
||
<li><a href="https://mdbootstrap.com/articles/">Articles</a> -
|
||
Contribute to the community and share your technical knowledge - or just
|
||
read the articles written by others.</li>
|
||
</ul>
|
||
<h2 id="rankings">Rankings</h2>
|
||
<ul>
|
||
<li><a href="https://mdbootstrap.com/publications/ui-kits/">UI Kits
|
||
& Themes</a> - Bootstrap, Angular, React, Vue UI Kits.</li>
|
||
<li><a href="https://mdbootstrap.com/publications/free-templates/">Free
|
||
Bootstrap Templates & Themes</a> - Stunning, Responsive Material
|
||
Design Themes.</li>
|
||
<li><a href="https://mdbootstrap.com/publications/templates/">Premium
|
||
Bootstrap Templates & Themes</a> - Blog, Portfolio, eCommerce,
|
||
Magazine, Admin Angular & React & Vue Templates.</li>
|
||
<li><a href="https://mdbootstrap.com/publications/backend/">Backend
|
||
Bootstrap Templates & Themes</a> - Jamstack, PHP, MySQL, Python,
|
||
NodeJS, Tailwind, Laravel Backend Integrations UI Kits.</li>
|
||
</ul>
|
||
<h2 id="tools">Tools</h2>
|
||
<p>Tools and utilities to help build apps using MDBootstrap.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/design/logo-generator/">Logo
|
||
generator</a> - Create an elegant and stylish logo in 5 minutes.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/design/masks/">CSS
|
||
Masks & Glassmorphism Generator</a> - Generate the perfect masks for
|
||
your design.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/design/instagram-filters/">Instagram
|
||
filters CSS generator</a> - Use famous Instagram filters via CSS and
|
||
apply them to your project.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/design/gradients/">CSS
|
||
gradients generator</a> - Generate the perfect gradient for your
|
||
design.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/">Fancy
|
||
border radius generator</a> - Generate unusual shapes with our
|
||
border-radius generator.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/meta-tags/">Meta
|
||
tags generator</a> - Take care of your SEO generate the most accurate
|
||
meta data for Google and social media.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/cards/">Cards
|
||
generator</a> - Create bootstrap cards with custom shapes, buttons,
|
||
colors, sizes.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/buttons/">Buttons
|
||
generator</a> - Create bootstrap buttons with custom icons, text,
|
||
shapes, colors, sizes.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/charts/">Charts
|
||
creator</a> - Easy to use chart builder (pie charts, line charts, bar
|
||
charts).</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/design/shadows/">Shadows
|
||
generator</a> - Generate the perfect shadow for your design.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/design/waves/">SVG
|
||
waves generator</a> - Easily generate beautiful SVG shapes and apply
|
||
them to your design.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/datatables/">Datatables
|
||
builder</a> - Create an elegant and stylish logo in 5 minutes.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/alerts/">Alerts
|
||
generator</a> - Create bootstrap alerts with custom shapes, buttons,
|
||
colors, sizes.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/modals/">Modals
|
||
generator</a> - Create bootstrap modals with custom shapes, sizes,
|
||
animations.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/icons/">Icons
|
||
generator</a> - 1600+ icons. Create bootstrap icons custom with sizes,
|
||
colors, animations.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/table/">Table
|
||
generator</a> - Create bootstrap table custom with sizes, colors,
|
||
animations.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/flexbox/">Flexbox
|
||
generator</a> - The easiest and fastest way to create and test flexbox
|
||
in Bootstrap 5.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/footer/">Footer
|
||
generator</a> - Create bootstrap footer with custom coprytight, buttons,
|
||
forms, links colors, sizes.</li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/standard/tools/builders/navbar/">Navbar
|
||
generator</a> - Create bootstrap navbar with custom colors, brand,
|
||
icons, forms, placement.</li>
|
||
</ul>
|
||
<h2 id="data-grid">Data Grid</h2>
|
||
<p>Extend your projects functionality with a table component</p>
|
||
<ul>
|
||
<li><a href="https://getdataden.com/">GetDataDen</a> - The ultimate
|
||
customizable Data Grid</li>
|
||
<li><a
|
||
href="https://getdataden.com/docs/grid/features/data-loader/#client-side-data-example">Advanced
|
||
data structure</a> - The latest and most advanced data structure allows
|
||
customizing each column (sort, width, resize, field) and matches values
|
||
from each row to a column in which the <code>field</code> equals a given
|
||
key value.</li>
|
||
<li><a
|
||
href="https://getdataden.com/docs/grid/features/drag-and-drop/#basic-section">Draggable
|
||
columns</a> - Experience seamless interactivity with our draggable
|
||
columns feature. Effortlessly rearrange your data grid to suit your
|
||
workflow, ensuring optimal organization and efficiency. Just click,
|
||
drag, and drop to customize your data display exactly as you need.</li>
|
||
<li><a
|
||
href="https://getdataden.com/docs/grid/features/pagination/#basic-section">Pagination</a>
|
||
- Explore efficient data navigation with our pagination example. Learn
|
||
to seamlessly handle large datasets by integrating simple, intuitive
|
||
pagination controls.</li>
|
||
<li><a
|
||
href="https://getdataden.com/docs/grid/features/filtering/header-filters/#basic-section">Column
|
||
search</a> - Discover the power of quick data retrieval with our search
|
||
column feature. Easily locate the information you need within your
|
||
DataDen grids for a more streamlined and productive data management
|
||
experience.</li>
|
||
<li><a
|
||
href="https://getdataden.com/docs/grid/layout/custom-css/#cell-formatting-section">Cell
|
||
formatting</a> - Enhance your data grid with our versatile cell
|
||
formatting options. Tailor each cell’s appearance for clarity and
|
||
impact, using colors, fonts, and styles that make your data speak
|
||
volumes. Perfect for highlighting critical insights and personalizing
|
||
your data view</li>
|
||
<li><a
|
||
href="https://getdataden.com/docs/grid/layout/custom-css/">Compact
|
||
version</a> - Unlock the full potential of your data grid with advanced
|
||
CSS customization. Style every aspect to match your brand or personal
|
||
preference, from colors and fonts to layouts. Create a visually cohesive
|
||
and highly functional data interface with ease.</li>
|
||
</ul>
|
||
<h2 id="cli-hosting">CLI & hosting</h2>
|
||
<p>Powerful tool which allows you to create different projects. No more
|
||
difficult configuration and deployment.</p>
|
||
<ul>
|
||
<li><a href="https://mdbgo.com/">MDB CLI</a> - Create, deploy and host
|
||
your project with a single command.</li>
|
||
<li><a href="https://mdbgo.com/docs/getting-started/quick-start/">Quick
|
||
Start</a> - Get started with MDB CLI easily and quickly and how to use
|
||
its full potential.</li>
|
||
<li><a
|
||
href="https://mdbgo.com/docs/getting-started/installation/">Getting
|
||
Started</a> - Step by step on how to create your project and
|
||
deploy.</li>
|
||
<li><a
|
||
href="https://mdbgo.com/docs/getting-started/overview/">Overview</a> -
|
||
Guide which will take you on how to perform different actions.</li>
|
||
</ul>
|
||
<h2 id="tw-elements-useful-links-tailwind-css">TW Elements useful links
|
||
(Tailwind CSS)</h2>
|
||
<p>An open-source collection of components, templates and plugins for
|
||
Tailwind CSS. Easily customizable & optimized for performance.</p>
|
||
<ul>
|
||
<li><a href="https://tw-elements.com/">UI Kit</a> - Bootstrap components
|
||
recreated with Tailwind CSS, but with better design and more
|
||
functionalities</li>
|
||
</ul>
|
||
<p><a href="https://tw-elements.com/docs/standard/integrations/">TW
|
||
Elements integrations</a> with popular technologies.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/django-integration/">Django
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/angular-integration/">Angular
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/express-integration/">Express
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/laravel-integration/">Laravel
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/next-integration/">Next
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/nuxt-integration/">Nuxt
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/react-integration/">Django
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/remix-integration/">Remix
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/solid-integration/">Solid
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/svelte-integration/">Svelte
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/sveltekit-integration/">Sveltekit
|
||
Integration</a></li>
|
||
<li><a
|
||
href="https://tw-elements.com/docs/standard/integrations/vue-integration/">Vue
|
||
Integration</a></li>
|
||
</ul>
|
||
<h2 id="education">Education</h2>
|
||
<p>Well-organized, up-to-date series of tutorials for the latest
|
||
Bootstrap, Material Design, HTML, CSS, JavaScript.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA">Video
|
||
Tutorials</a></li>
|
||
<li><a
|
||
href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/">Written
|
||
Tutorials</a></li>
|
||
</ul>
|