@nextcss/core v0.7.4-beta

Next.css Core Module

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.

Next.css on GitHub

How to Install

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';

How to use

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>

Selectors

Responsive prefixes

Most classes you will encounter can be used with responsive prefixes. This gives you the option to use classes according to the screen size.

Example

<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>

References

Containers

Containers are used to limit the width of content, preventing content from overflowing beyond the specified size.

Example

<div class="container-xl">content</div>

References

Padding and Margins

Padding is used to create space around an element's content, inside of any defined borders.

Example

<div class="px-5 py-10 mx-5 my-10">content</div>

References

These classes can be combined with Responsive prefixes.

Borders

Borders allow you to specify the style, width, and color of an element's border.

Example

<div class="b-2 b-dashed radius-5">content</div>

Border with

Border style

Border radius

These classes can be combined with Responsive prefixes.

Font size

Example

<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>

References

These classes can be combined with Responsive prefixes.

Font weight

Example

<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>

References

These classes can be combined with Responsive prefixes.

Line height

Example

<p class="lh-1.6">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

References

Text manipulation

Example

<p class="uppercase underline text-center">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

References

These classes can be combined with Responsive prefixes.

Display

Example

<div class="block md:flex">content</div>

References

These classes can be combined with Responsive prefixes.

Order

Example

<ul class="flex">
  <li class="order-2">Item 2</li>
  <li class="order-1">Item 1</li>
</ul>

References

These classes can be combined with Responsive prefixes.

Overflow

Example

<div class="md:h-300 md:overflow-y-overlay">
  <div class="flex overflow-hidden">content</div>
</div>

References

These classes can be combined with Responsive prefixes.

Overscroll

Example

<div class="h-300 overscroll-contain">content</div>

References

These classes can be combined with Responsive prefixes.

Object fit and position

Example

<div class="w-200 h-200">
  <img src="" alt="" class="fit-cover" />
</div>

References

These classes can be combined with Responsive prefixes.

Floating and Box sizing

Example

<div class="float-none md:float-left">content</div>
<div class="clear-both">content</div>
<div class="box-content">content</div>

References

These classes can be combined with Responsive prefixes.

Production build

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'],
};

License

MIT License. Copyright (c) 2021 Zsolt Tovis