🤘 Create Petite App

Features

• Vue template syntax and reactivity model
• Ready-to-use CSS Utility classes and animations
• Dynamic import of JavaScript ES6 modules

Pre-packed

• Noto Sans - the modern font suitable for most websites
• MDBootstrap (v4.0.0) - material design for Bootstrap v5, helps build responsive mobile-first sites quickly
• Font Awesome (v6.1.1) - the icon library and toolkit used by millions of designers and developers
• Animate.css (v4.1.1) - ready-to-use animation library, great for emphasis, home pages, sliders, and attention-guiding hints
• Petite-Vue (v0.4.1) - progressive JavaScript library driven by @vue/reactivity for building web user interfaces

Ways of quick start

• Create a new repo from this template on GitHub
• Download this template to local
• Create a new project from the command line (npm v5.2):

cd desktop; npx degit rayc2045/create-petite-app new-petite-app

Usage

• Use Live Server to preview the project
• Use Live Sass Compiler to compile Sass/Scss to CSS
• Use MinifyAll to compress JavaScript code
• Deploy production web applications on Netlify

Petite-Vue template syntax

See more usages from petite-vue README.md on GitHub.

        <script type="module">
          import { createApp } from 'https://unpkg.com/petite-vue?module'
        
          function Counter(props) {
            return {
              count: props.initialCount,
              inc() {
                this.count++
              },
              mounted() {
                console.log("I'm mounted!")
              }
            }
          }
        
          createApp({
            Counter
          }).mount()
        </script>
        
        <div v-scope="Counter({ initialCount: 1 })" @vue:mounted="mounted">
          <p>{{ count }}</p>
          <button @click="inc">increment</button>
        </div>
        
        <div v-scope="Counter({ initialCount: 2 })">
          <p>{{ count }}</p>
          <button @click="inc">increment</button>
        </div>
        

MDBootstrap examples

See more examples ranging from using parts of the framework to custom components and layouts here.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Animate.css animations

🙁 Oops! It seems that you ✏️ Note that users may have animations disabled on the OS, turning Animate.css off. Animate.css supports the prefers-reduced-motion CSS media feature. You can read more about it here.

• {{ animation.title }}

  • {{ anime }}