@unocss/preset-mini
Advanced tools
@unocss/preset-mini is a utility-first CSS framework that provides a set of predefined classes to help you build responsive and modern web interfaces quickly. It is part of the UnoCSS ecosystem and offers a wide range of utilities for styling your web applications.
Responsive Design
This feature allows you to apply different styles based on the screen size. In this example, the background color changes from blue on medium screens to green on large screens.
```html
<div class="md:bg-blue-500 lg:bg-green-500">
Responsive Background Color
</div>
```Flexbox Utilities
Flexbox utilities help you to easily create flexible and responsive layouts. This example centers the content both horizontally and vertically.
```html
<div class="flex justify-center items-center">
Centered Content
</div>
```Spacing Utilities
Spacing utilities allow you to add padding and margin to elements. In this example, the box has padding of 4 units and margin of 2 units.
```html
<div class="p-4 m-2">
Padded and Margined Box
</div>
```Typography Utilities
Typography utilities help you to style text elements. This example makes the text large and bold.
```html
<p class="text-lg font-bold">
Large Bold Text
</p>
```Color Utilities
Color utilities allow you to easily apply colors to text and backgrounds. This example sets the text color to red and the background color to yellow.
```html
<div class="text-red-500 bg-yellow-200">
Colored Text and Background
</div>
```Tailwind CSS is a highly popular utility-first CSS framework that offers a wide range of utilities for building modern web interfaces. It is similar to @unocss/preset-mini in its approach to utility-first design but has a larger community and more extensive documentation.
Bootstrap is a widely-used CSS framework that provides a set of pre-designed components and utilities. While it is not strictly utility-first like @unocss/preset-mini, it offers a range of utilities for responsive design and layout.
The minimal preset for UnoCSS.
npm i -D @unocss/preset-mini
import presetMini from '@unocss/preset-mini'
Unocss({
presets: [
presetMini(),
],
})
MIT License © 2021-PRESENT Anthony Fu
FAQs
The minimal preset for UnoCSS
The npm package @unocss/preset-mini receives a total of 0 weekly downloads. As such, @unocss/preset-mini popularity was classified as not popular.
We found that @unocss/preset-mini demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.