Skip to content

Installation Guide

npm install @medcore-ua/concrete-css

Yarn

yarn add @medcore-ua/concrete-css

CDN (Quick Start)

For prototyping or simple projects:

<link rel="stylesheet" href="https://unpkg.com/@medcore-ua/concrete-css/dist/concrete.min.css">

Using with Sass

Basic Setup

// your-styles.scss
@use 'concrete-css' as *;

// Your custom styles here

With Customization

// your-styles.scss
@use 'concrete-css' with (
  $color-primary-500: #ff0000,
  $font-family-mono: 'JetBrains Mono',
  $spacing-unit: 0.5rem
);

Importing Only What You Need

// Import just the base
@use 'concrete-css/scss/base/reset';
@use 'concrete-css/scss/base/typography';

// Import specific utilities
@use 'concrete-css/scss/utilities/core';

Build Tools

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

Vite

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "concrete-css" as *;`
      }
    }
  }
};

Next.js

// next.config.js
module.exports = {
  sassOptions: {
    includePaths: ['./node_modules']
  }
};

PostCSS Setup (Production)

For tree-shaking unused CSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/**/*.js',
        './src/**/*.jsx',
        './src/**/*.tsx'
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
};

Framework Integration

React

// App.jsx
import 'concrete-css/dist/concrete.css';

function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-black text-white border-4 uppercase">
      {children}
    </button>
  );
}

Vue

<!-- App.vue -->
<style src="concrete-css/dist/concrete.css"></style>

<template>
  <button class="px-4 py-2 bg-black text-white border-4 uppercase">
    Click me
  </button>
</template>

PHP

<!-- header.php -->
<link rel="stylesheet" href="/assets/css/concrete.css">

Verifying Installation

Create a test file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="path/to/concrete.css">
</head>
<body class="bg-gray-100">
  <div class="max-w-3xl mx-auto p-8">
    <h1 class="text-4xl font-black uppercase mb-4">Concrete CSS</h1>
    <p class="text-base mb-4">If this is styled, it's working!</p>
    <button class="px-6 py-3 bg-black text-white border-4 uppercase">
      Test Button
    </button>
  </div>
</body>
</html>

Next Steps