Mintkit is a comprehensive JavaScript framework designed to streamline web development by providing dynamic content management capabilities in a single, unified solution.
It simplifies the website creation process while maintaining flexibility and performance, allowing you to focus on creating innovative web applications. 🌐✨
Mintkit eliminates the need for multiple libraries and frameworks by providing everything you need in one cohesive package.
Whether you're building a simple website or a complex web application, Mintkit's intuitive API and powerful features make development more efficient and enjoyable. 🚀
- Reactive State System: Automatic re-rendering when state changes
- Virtual DOM: Efficient DOM diffing and patching
- Component Architecture: Modular and reusable components
- Typography: Google Fonts integration with comprehensive font system
- Spacing Scale: Consistent spacing from 0-32rem
- Theme System: Automatic light/dark theme switching
- Responsive Design: Built-in breakpoint system
- Animation: Smooth transitions and keyframes
- Live Reload: Hot reloading development server
- MintAssembly: HTML-based programming language
- Electron Support: Desktop application framework
- Performance Monitoring: Built-in performance tracking
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mintkit pure HTML</title>
<link rel="dns-prefetch" href="//mint-teams.web.app" />
<link rel="preconnect" href="https://mint-teams.web.app" crossorigin />
<link rel="modulepreload" href="https://mint-teams.web.app/Mintkit/mint.js" />
</head>
<body>
<div id="app"></div>
<script type="module">
import { Mint } from "https://mint-teams.web.app/Mintkit/mint.js";
const app = `
<h1>
Hello, Mintkit!
</h1>
`;
queueMicrotask(() => Mint.injectHTML("#app", app));
</script>
</body>
</html>// Create your content file ex. Content.js
// Link your content file into Mintkit pages (index.html)
Javascript -> import { Content } from 'content.js';
// content.js
export const Content = {
components: `
<!-- Enter html code here -->
<button>Hello mintkit</button>
`,
stylesheet: `
/*
Enter your CSS code here
*/
`
}Than you go back into Mintkit pages (index.html) and insert this code inside script tag
import { Mint } from 'https://mint-teams.web.app/Mintkit/mint.js';
import { Content } from 'content.js';
const App = () => {
const root = {
html: Content.components,
css: Content.stylesheet
};
queueMicrotask(() => {
Mint.injectHTML('#app', root.html);
});
};
App();Mint.include('./redistributables/design/mint-uas.css');const state = Mint.createState({ count: 0 });
// Update state
state.set(s => ({ ...s, count: s.count + 1 }));
// Subscribe to changes
state.subscribe((newState) => {
console.log('State updated:', newState);
});const lightTheme = {
ColorPrimary: '#FFFFFF',
TextColorPrimary: '#080707'
};
const darkTheme = {
ColorPrimary: '#000000',
TextColorPrimary: '#FFD9D9'
};
WebContent.initThemeSystem();cd mintkit
./LiveServer.exe
# Open http://localhost:3000Mintkit.js Framework/
├── src/ # Framework path
│ ├── lib/ # Framework core files
│ ├── Content.js # Content and styling
│ ├── App.js # Main application
│ ├── EventHandle.js # Events
│ └── index.html # Entry point
│ └── LiveServer.exe # Live server
├── live-reload.js # Live reload for Mintkit liveserver hook
├── package.json # Json file config for Mintkit
└── README.html # Documentation
└── sw.js # Service worker
We welcome all contributions to Mintkit! Here's how you can help to improve:
- Fork this repository and clone it to your local machine.
- Create a new branch for your changes.
- Make your changes and write tests (if applicable).
- Ensure that the code passes all tests and follows the project's style guidelines.
- Commit your changes with clear, concise commit messages.
- Push your changes and create a pull request with a detailed explanation.
- Code Style: Follow the existing code style and conventions
- Documentation: Update documentation for any new features
- Testing: Add tests for new functionality
- Performance: Consider performance implications of changes
- Compatibility: Ensure changes work across different browsers
- GitHub Repository: https://github.com/Peakk2011/Mintkit
- CDN: https://cdn.jsdelivr.net/gh/Peakk2011/Mint_NextgenJS@main/lib/MintUtils.js
- Documentation: Complete Guide
npx create-mint-app to create Mintkit project
Mintkit - Making web development dynamic and more customizable way.
