johanmartindev/11ty_vite_postcss_mvp_template

Basic 11ty template with Vite and postcss

11ty Template with Vite, Postcss and mvp.css

Getting Started

1. Create repository using this repository as a template
2. Run npm install && npm start
3. Start building

Resources

• 11ty - https://www.11ty.dev
• CSS Framework - https://andybrewer.github.io/mvp/
• PostCSS - postcss-preset-env - https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
  • https://github.com/browserslist/browserslist

Eleventy Configuration

• 11ty with vite - https://github.com/11ty/eleventy-plugin-vite
• Eleventy: Integrate PostCSS and Tailwind CSS - https://zenzes.me/eleventy-integrate-postcss-and-tailwind-css/
• https://github.com/matthiasott/eleventy-plus-vite

List of basic components to builds

• Window

  • container window
  • browser window
  • child window - Pop-up window
  • message window - dialog box
  • Tabs

• https://en.wikipedia.org/wiki/Graphical_widget

• Icons

• Generic widgets

  • Button - click to perform an action
    • Radio Button - select one option from a list
    • Checkbox - enable or disable
    • Toggle switch - similar to checkbox
    • Toggle button - similar to switch
    • Split button - button and dropdown list
    • Cycle button - cycle content
  • Slider - control with handle
  • List box - select one or more options from a list
  • Spinner - up/down buttons to step through a list of values
  • Drop-down list - show items when button or indicator is clicked
  • Menu
    • context menu - contents depends on context or state
    • Pie menu - circular context menu

• Input

  • Form
    • Dropdowns
    • Buttons
    • Combo boxes
    • Toggles
    • text fields
    • Date pickers
    • Checkboxes
    • Radio buttons
  • Loader
  • Modal

• Output

  • Notifications
  • Breadcrumbs
  • Icons
  • Sliders
  • Progress bars
  • Tooltips

• Helper

  • Hero
  • Menus
  • Card
  • Gallery
  • Carousel
  • Pagination
  • Picker
  • Sidebar
  • Search Field
  • Tooltip