iC Framework CSS

2.0.0 · maintenance · verified Sun Apr 19

iC Framework is a CSS framework developed by iCHEF, designed for building flexible, accessible, and responsive web applications. It provides a set of pre-defined styles and an exclusive icon set (`ic-icon.*`) tailored specifically for iCHEF's branding and aesthetic. The current stable version available on npm is 2.0.0. The framework's primary distribution methods include direct inclusion via a GitHub CDN for HTML `<link>` tags or installation via npm for integration into modern JavaScript/TypeScript build pipelines. It offers minified CSS for production environments and provides source files for developers who wish to build from scratch. Based on the copyright date of 2016, the project appears to be in a maintenance mode or minimally updated. Its key differentiator lies in its specialized styling and components for iCHEF-branded applications, rather than being a general-purpose framework like Bootstrap or Tailwind.

Common errors

```
Module not found: Can't resolve 'ic-framework/dist/css/ic-framework.min.css' in '...' or similar CSS loading errors.
```
cause The `ic-framework` package might not be installed, or your module bundler (e.g., Webpack, Vite) is not correctly configured to resolve paths within `node_modules` or to process CSS files.

fix Ensure the package is installed with `npm install ic-framework` or `yarn add ic-framework`. Verify that your bundler configuration includes appropriate loaders (e.g., `css-loader`, `style-loader` for Webpack) to handle CSS imports.
```
TypeError: icFramework is not a function/object (or similar errors when trying to call or access properties on an imported `ic-framework` variable).
```
cause The `ic-framework` package contains only CSS and font assets; there are no JavaScript exports or APIs. Developers are often accustomed to frameworks with associated JavaScript components.

fix The framework is applied by importing its CSS file (e.g., `import 'ic-framework/dist/css/ic-framework.min.css';`) or linking it in HTML. Do not attempt to call JavaScript functions or access properties from the imported package as it provides no such interface.

Warnings

gotcha The project's README and copyright information suggest it has not been actively maintained or significantly updated since 2016. This may lead to compatibility issues with newer browsers, lack of support for modern CSS features, or potential security vulnerabilities in its dependencies.
Fix: Review the project's GitHub repository for recent commits or issues before adopting for new projects. Consider more actively maintained CSS frameworks for long-term solutions or be prepared to address compatibility issues manually.
gotcha This package provides only CSS stylesheets and font assets. It does not include any JavaScript APIs, components, or utilities. Developers accustomed to frameworks with accompanying JS may mistakenly expect functional exports.
Fix: Do not expect JavaScript exports; integrate the framework by linking the CSS file in HTML or importing it via a bundler. For React integration, a separate `iC-framework-react` package is mentioned, which would handle JS components.

Install

npm install ic-framework npm
yarn add ic-framework yarn
pnpm add ic-framework pnpm

Imports

ic-framework.min.css
wrong:
```
import * as icFramework from 'ic-framework/dist/css/ic-framework.min.css';
```
correct:
```
import 'ic-framework/dist/css/ic-framework.min.css';
```
This is a side-effect import primarily for use with bundlers (e.g., Webpack, Vite) to include the global stylesheet. There are no module exports provided from the CSS file itself, so attempting to assign it to a variable will likely result in an empty or unexpected object.
ic-framework (package root)
wrong:
```
const icFramework = require('ic-framework');
```
correct:
This package primarily provides CSS and font assets. There are no direct JavaScript exports or APIs available from the root package. Attempting to `require` or `import` it as a JavaScript module will not yield useful results for interacting with the framework.
ic-icon.woff (font asset)
wrong:
```
import { icIcon } from 'ic-framework/dist/fonts/ic-icon.woff';
```
correct:
```
// Reference in CSS: url('~ic-framework/dist/fonts/ic-icon.woff');
```
Font files are located in the `dist/fonts/` directory. They are typically referenced directly within your CSS files using relative paths or a tilde (`~`) prefix to resolve from `node_modules` (depending on your bundler configuration). Direct JavaScript import of font files for use as module exports is not a standard pattern for this package.

Quickstart

Demonstrates how to install the `ic-framework` package and integrate its CSS into a project using a module bundler, or via a direct HTML link.

npm install ic-framework

// In your main JavaScript/TypeScript entry file (e.g., src/index.ts):
import 'ic-framework/dist/css/ic-framework.min.css';

// Or, in your HTML for direct CDN usage:
// <link rel="stylesheet" href="//ichef.github.io/iC-framework/dist/css/ic-framework.min.css">

// You can now use the iC Framework CSS classes in your HTML:
// <div class="ic-container">
//   <h1 class="ic-heading-primary">Hello iC Framework!</h1>
//   <button class="ic-btn ic-btn-primary">Click Me</button>
//   <i class="ic-icon ic-icon-check"></i>
// </div>

view raw JSON →