
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@nextcss/core
Advanced tools
Core Module is part of Next.css framework. This module contains original Material Color Palette CSS styles for your Next.css project. You can use in all modern websites with module bundlers, like webpack, rollup, parcel.
You can install with npm or yarn package managers.
npm i @nextcss/core @nextcss/reset @nextcss/material-colors
yarn add @nextcss/core @nextcss/reset @nextcss/material-colors
Simple import to your project, and add class rules to you HTML tags. Check available selector rules below.
import '@nextcss/reset';
import '@nextcss/core';
import '@nextcss/material-colors';
Example feature list block. Watch the resolution here Learn more about available CSS selectors below.
<section class="fs-16 lh-1.6 bg-grey-50 fg-grey-700 py-50">
<!-- Container -->
<div class="container-lg">
<!-- Intro -->
<div class="container-md text-center mb-20">
<h1 class="fs-24 md:fs-30 fw-500 fg-grey-900 mb-10">Why Next.css</h1>
<p>The world’s developers thinking in pixels, we also thinking in pixels.</p>
</div>
<!-- Feature list -->
<div class="flex flex-wrap">
<!-- Feature box -->
<a href="#" class="md:w-12/6 lg:w-12/4 p-15">
<div class="bg-white p-25 radius-3 shadow-1">
<h2 class="fs-20 fw-500 fg-grey-900 mb-8">Shooting Stars</h2>
<p class="leading-relaxed text-base mb-4">
Fingerstache flexitarian street art 8-bit waistcoat. ..
</p>
<span class="fg-pink-500 inline-flex align-center">Learn More →</span>
</div>
</a>
<!-- Repeated block here -->
..
</div>
</div>
</section>
Most classes you will encounter can be used with responsive prefixes. This gives you the option to use classes according to the screen size.
<p class="fs-12 sm:fs-13 md:fs-14 lg:fs-16 xl:fs-18">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
Prefix | Screen size | Breakpoint |
---|---|---|
Default | none | |
sm: | Small | 390px |
md: | Medium | 768px |
lg: | Large | 1024px |
xl: | Extra large | 1400px |
Containers are used to limit the width of content, preventing content from overflowing beyond the specified size.
<div class="container-xl">content</div>
Classname | Max. width | Classname | Max. width |
---|---|---|---|
container-xs | 480px | container-xs/2 | 240px |
container-sm | 640px | container-sm/2 | 320px |
container-md | 768px | container-md/2 | 384px |
container-lg | 1024px | container-lg/2 | 512px |
container-xl | 1280px | container-xl/2 | 640px |
Padding is used to create space around an element's content, inside of any defined borders.
<div class="px-5 py-10 mx-5 my-10">content</div>
These classes can be combined with Responsive prefixes.
Classname | Classname | Side | Values (1px step) | Values (5px step) |
---|---|---|---|---|
p-{value} | m-{value} | around | [0..10] | [15..500] |
px-{value} | mx-{value} | horizontal | [0..10] | [15..500] |
py-{value} | my-{value} | vertical | [0..10] | [15..500] |
pt-{value} | mt-{value} | top | [0..10] | [15..500] |
pb-{value} | mb-{value} | bottom | [0..10] | [15..500] |
pl-{value} | ml-{value} | left | [0..10] | [15..500] |
pr-{value} | ml-{value} | right | [0..10] | [15..500] |
Borders allow you to specify the style, width, and color of an element's border.
<div class="b-2 b-dashed radius-5">content</div>
Classname | Side | Values (1px step) | Values (5px step) |
---|---|---|---|
b-{value} | around | [0..10] | [15..100] |
bx-{value} | horizontal | [0..10] | [15..100] |
by-{value} | vertical | [0..10] | [15..100] |
bt-{value} | top | [0..10] | [15..100] |
bb-{value} | bottom | [0..10] | [15..100] |
bl-{value} | left | [0..10] | [15..100] |
br-{value} | right | [0..10] | [15..100] |
Classname | Usage | Styles |
---|---|---|
b-{style} | common | [none|solid|dashed|dotted|double|groove|inset|outset|ridge] |
b-{style} | tables | [collapse|separate] |
These classes can be combined with Responsive prefixes.
Classname | Values (1px step) | Values (5px step) | Specific values |
---|---|---|---|
r-{value} | [0..10] | [15..100] | [1000|10000] |
<p class="fs-12 sm:fs-13 md:fs-14 lg:fs-15 xl:fs-16">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
These classes can be combined with Responsive prefixes.
Classname | Values (1px step) | Values (2px step) | Values (5px step) |
---|---|---|---|
fs-{value} | [10..20] | [22..40] | [45..150] |
<p class="fw-900 sm:fw-800 md:fw-700 lg:fw-600 xl:fw-500">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
These classes can be combined with Responsive prefixes.
Classname | Values (100px step) |
---|---|
fw-{value} | [100..900] |
<p class="lh-1.6">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Classname | Values (0.1 step) |
---|---|
lh-{value} | [0..6] |
<p class="uppercase underline text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
Classname | Relsult |
---|---|
uppercare | text-transform: uppercase |
lowercase | text-transform: lowercase |
capitalize | text-transform: capitalize |
underline | text-decoration: underline |
line-through | text-decoration: line-through |
no-transform | text-transform: none |
no-decoration | text-decoration: none |
These classes can be combined with Responsive prefixes.
Classname | Relsult |
---|---|
text-left | text-align: left |
text-center | text-align: center |
text-right | text-align: right |
text-justify | text-align: justify |
text-trim | text-overflow: ellipsis |
<div class="block md:flex">content</div>
These classes can be combined with Responsive prefixes.
Classname | Result |
---|---|
inline | display: inline |
block | display: block |
inline-block | display: inline-block |
flex | display: flex |
inline-flex | display: inline-flex |
<ul class="flex">
<li class="order-2">Item 2</li>
<li class="order-1">Item 1</li>
</ul>
These classes can be combined with Responsive prefixes.
Classname | Values (1 step) | Specific values |
---|---|---|
order-{value} | [0...12] | [first|last] |
<div class="md:h-300 md:overflow-y-overlay">
<div class="flex overflow-hidden">content</div>
</div>
These classes can be combined with Responsive prefixes.
Classname | Direction | Specific values |
---|---|---|
of-{value} | Both | [auto|hidden|visible|scroll|overlay] |
of-x-{value} | Horizontal | [auto|hidden|visible|scroll|overlay] |
of-y-{value} | Vertical | [auto|hidden|visible|scroll|overlay] |
<div class="h-300 overscroll-contain">content</div>
These classes can be combined with Responsive prefixes.
Classname | Direction | Specific values |
---|---|---|
os-{value} | Both | [auto|contain|none] |
os-x-{value} | Horizontal | [auto|contain|none] |
os-y-{value} | Vertical | [auto|contain|none] |
<div class="w-200 h-200">
<img src="" alt="" class="fit-cover" />
</div>
These classes can be combined with Responsive prefixes.
Classname | Specific values |
---|---|
fit-{value} | [contain|cover|fill] |
object-{value} | [center|top|right|bottom|left] |
<div class="float-none md:float-left">content</div>
<div class="clear-both">content</div>
<div class="box-content">content</div>
These classes can be combined with Responsive prefixes.
Classname | Specific values |
---|---|
float-{value} | [left|right|none] |
clear-{value} | [left|right|both|none] |
box-{value} | [border|content] |
We strongly recommend to use postcss
with autoprefixer
and postcss-purgecss
. This stack will
extend the CSS rules with browser specific prefixes, like -webkit
and will remove unused styles in
production build.
npm i -D postcss autoprefixer @fullhuman/postcss-purgecss
Our postcss.config.js
config. You need to configure the content
parameter for your project.
module.exports = {
plugins:
process.env.NODE_ENV === 'production'
? [
'autoprefixer',
[
'@fullhuman/postcss-purgecss',
{
content: ['./{pages,components}/**/*.{js,jsx}'],
safelist: ['html', 'body'],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
},
],
]
: ['autoprefixer'],
};
MIT License. Copyright (c) 2021 Zsolt Tovis
FAQs
Core module for Next.css.
The npm package @nextcss/core receives a total of 0 weekly downloads. As such, @nextcss/core popularity was classified as not popular.
We found that @nextcss/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.