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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="app"></div>
<script src="app.js" type="module" async></script>
</body>
</html>// mint.js
import { createState, injectCSS, injectHTML, injectTitle } from './MintUtils.js';
import { MintAssembly } from './HTMLInterpreter.js';
export const Mint = {
createState,
injectCSS,
injectHTML,
injectTitle,
MintAssembly
};// Content.js
export const WebContent = {
PageTitle: 'My Mintkit App',
HTMLContent: {
Introduce() {
return `<div class="introduce"><h1>Welcome to Mintkit</h1></div>`;
}
},
ElementComponents() {
return this.HTMLContent.Introduce();
},
StyledElementComponents() {
return `
.introduce {
text-align: center;
padding: 2rem;
font-family: 'Inter Tight', sans-serif;
}
`;
}
};// app.js
import { Mint } from './lib/mint.js';
import { WebContent } from './Content.js';
const Main = Mint.createState({});
const render = () => {
const html = WebContent.ElementComponents();
const css = WebContent.StyledElementComponents();
Mint.injectCSS(css);
Mint.injectHTML('#app', html);
Mint.injectTitle(`<title>${WebContent.PageTitle}</title>`);
};
Main.subscribe(render);
Main.set({});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.