Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@unocss/preset-uno
Advanced tools
@unocss/preset-uno is a utility-first CSS framework that provides a comprehensive set of pre-defined classes for rapid UI development. It is part of the UnoCSS ecosystem and offers a wide range of utilities for styling, including layout, typography, colors, and more.
Utility Classes
This feature allows you to use pre-defined utility classes to style your HTML elements. In this example, the `p-4` class adds padding, `bg-blue-500` sets the background color, and `text-white` sets the text color.
<div class="p-4 bg-blue-500 text-white">Hello, World!</div>
Responsive Design
UnoCSS provides responsive utility classes that allow you to apply different styles at different breakpoints. In this example, the padding changes based on the screen size: `p-4` for small screens, `md:p-8` for medium screens, and `lg:p-12` for large screens.
<div class="p-4 md:p-8 lg:p-12">Responsive Padding</div>
Custom Themes
You can customize the default theme by defining your own colors, spacing, and other design tokens. This example shows how to configure a custom theme with primary and secondary colors.
import { defineConfig } from 'unocss';
import presetUno from '@unocss/preset-uno';
export default defineConfig({
presets: [
presetUno(),
],
theme: {
colors: {
primary: '#1da1f2',
secondary: '#14171a',
},
},
});
Tailwind CSS is a utility-first CSS framework similar to @unocss/preset-uno. It provides a wide range of utility classes for rapid UI development. Tailwind CSS is highly customizable and has a large community and ecosystem.
Bootstrap is a popular CSS framework that provides pre-designed components and utility classes. While it is not strictly utility-first like @unocss/preset-uno, it offers a comprehensive set of tools for building responsive and mobile-first websites.
The default preset for UnoCSS.
Please note that this preset is more like a playground at the current stage to experiment with the possibility of UnoCSS and also as a reference for making a custom preset. It does NOT follow semver and subjects to changes without further notice. We don't recommend using it on serious works. Use custom rules instead to ensure a stable outcome.
npm i -D @unocss/preset-uno
import presetUno from '@unocss/preset-uno'
Unocss({
presets: [
presetUno({ /* options */ })
]
})
This preset is trying to provide a common superset of the popular utilities-first framework, including Tailwind CSS, Windi CSS, Bootstrap, Tachyons, etc.
For example, both ml-3
(Tailwind), ms-2
(Bootstrap), ma4
(Tachyons), mt-10px
(Windi CSS) are valid.
.ma4 { margin: 1rem; }
.ml-3 { margin-left: 0.75rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.mt-10px { margin-top: 10px; }
For more details about the default preset, you can check out our playground and try out. Meanwhile, you can also check out the implementation.
MIT License © 2021-PRESENT Anthony Fu
FAQs
The default preset for UnoCSS
The npm package @unocss/preset-uno receives a total of 181,456 weekly downloads. As such, @unocss/preset-uno popularity was classified as popular.
We found that @unocss/preset-uno demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.