- 🎨 Modern and clean design language
- 📱 Fully responsive components
- 🔧 Easy to integrate and customize
- 🎯 Focus on usability and accessibility
- 🚀 Lightweight and performant
ADLS includes the following core components:
- Buttons - Large, medium and small variants
- Text Fields - With animated labels and focus states
- Cards - Flexible content containers
- Chips - Compact interactive elements
- Dropdowns - Custom styled dropdown menus
- Navigation - Floating header with responsive navigation
Include the CSS and JavaScript files directly in your HTML:
<!-- CSS -->
<link rel="stylesheet" href="https://dl.strawberryfoundations.org/w3/static/adlsv3/css/layout/base.css">
<link rel="stylesheet" href="https://dl.strawberryfoundations.org/w3/static/adlsv3/css/layout/nav.css">
<link rel="stylesheet" href="https://dl.strawberryfoundations.org/w3/static/adlsv3/css/components/button.css">
<link rel="stylesheet" href="https://dl.strawberryfoundations.org/w3/static/adlsv3/css/components/textfield.css">
<link rel="stylesheet" href="https://dl.strawberryfoundations.org/w3/static/adlsv3/css/components/base.css">
<!-- JavaScript -->
<script src="https://dl.strawberryfoundations.org/w3/static/adlsv3/js/components.js"></script>For production use, build the minified version:
# Make the build script executable
chmod +x build.sh
# Build both CSS and JS files
./build.sh
# Or build only specific file types
./build.sh --css # Build only CSS
./build.sh --js # Build only JavaScriptThen include the built files:
<!-- Minified CSS (recommended for production) -->
<link rel="stylesheet" href="dist/adlsv3.min.css">
<!-- Non-minified CSS (for development) -->
<link rel="stylesheet" href="dist/adlsv3.css">
<!-- JavaScript -->
<script src="dist/adlsv3.min.js"></script>We also provide these minified files on our CDN for easy access:
<!-- Minified CSS from CDN -->
<link rel="stylesheet" href="https://dl.strawberryfoundations.org/w3/static/adlsv3/dist/adlsv3.min.css">
<!-- Minified JS from CDN -->
<script src="https://dl.strawberryfoundations.org/w3/static/adlsv3/dist/adlsv3.min.js"></script><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dist/adlsv3.min.css">
</head>
<body class="smd-layout_body">
<div class="smd-layout_main">
<!-- Button example -->
<a class="smd-component_button-large" href="/">Large Button</a>
<!-- Card example -->
<div class="smd-component_card">
<h1>Card Title</h1>
<p>Card content goes here...</p>
</div>
</div>
<script src="dist/adlsv3.min.js"></script>
</body>
</html>ADLS includes a powerful build script that combines and minifies all CSS and JavaScript files for optimal performance.
# Build both CSS and JavaScript files
./build.sh
# Build only CSS files
./build.sh --css
# Build only JavaScript files
./build.sh --js
# Verbose output (shows detailed file processing)
./build.sh --verbose
./build.sh -v
# Show help
./build.sh --help
./build.sh -h- 🔧 Automatic Combination: Combines all CSS/JS files in the correct order
- 🗜️ Minification: Removes comments, whitespace, and optimizes file size
- 📊 Statistics: Shows compression ratios and file sizes
- 📄 Dual Output: Creates both minified (.min) and readable versions
- 🎯 Selective Building: Build only CSS or JS files as needed
- 📁 Organized Output: All built files go to the
dist/directory
After running the build script, you'll find these files in the dist/ directory:
dist/
├── adlsv3.css # Combined, readable CSS
├── adlsv3.min.css # Combined, minified CSS
├── adlsv3.js # Combined, readable JavaScript
└── adlsv3.min.js # Combined, minified JavaScript
The build script requires these standard Unix tools (usually pre-installed on Linux):
bashsedbc(for compression calculations)numfmt(for file size formatting)
ADLS uses CSS variables for easy customization. You can override the default colors and other properties by modifying the root variables:
:root {
--color-branding-primary: #your-color;
--color-background-primary: #your-color;
--color-navbar--primary: rgba(your-rgba-values);
/* ... */
}ADLS supports all modern browsers including:
- Chrome and any Chromium-based browser (latest)
- Firefox (latest)
- Safari (latest)
adlsv3/
├── static/
│ ├── stylesheet/
│ │ ├── layout/
│ │ │ ├── base.css
│ │ │ └── nav.css
│ │ └── components/
│ │ ├── base.css
│ │ ├── button.css
│ │ ├── card.css
│ │ ├── chip.css
│ │ ├── dropdown.css
│ │ └── textfield.css
│ └── js/
│ └── components.js
├── templates/
├── dist/ # Generated by build script
├── build.sh # Build script
└── README.md
- Development Setup: Use individual CSS files for easier debugging
- Testing: Test changes across different components and screen sizes
- Building: Always run
./build.shbefore committing production files - Mobile Testing: Ensure responsive design works on various devices
Current version: m3-1.4.1
This project is developed by Strawberry Foundations. All rights reserved.
For questions and contributions, please contact Strawberry Foundations:
- Website: strawberryfoundations.org
Built with ❤️ by the Strawberry Foundations team