Frontend

screenshot of Frontend

Frontend

Front-end component library for 24 ways. (2013-2019)

Overview:

Bits is a front-end component library built upon Fractal, a rapid development tool for components, templates, and pages. Bits requires Node.js v4.0+ and a global install of Gulp is recommended. This library is designed to make front-end development more efficient and streamlined.

Features:

  • Built upon Fractal, enabling rapid development of components, templates, and pages.
  • Utilizes ES6 features, requiring Node.js v4.0+ for local installation.
  • Optional global installation of Gulp for enhanced development experience.
  • Easy installation of project dependencies.
  • Development environment with automatic assets compilation and browser refresh.
  • Ability to create a static build of the project.
  • Deployment options to make the project publicly accessible.
  • Clearly defined repository structure for easy understanding of file purposes.

Installation:

To install Bits and start using it, follow these steps:

  1. Download and install Node.js from the official website: https://nodejs.org/

  2. Clone the Bits repository:

    • Clone using SSH: git clone git@github.com:24ways/frontend.git
    • Clone using HTTPS: git clone https://github.com/24ways/frontend.git
  3. Optional: Install Gulp globally by running the following command: npm install gulp -g

  4. Optional: Install Fractal globally by running the following command: npm install fractal -g

  5. Install project dependencies by running the following command: npm install

  6. Start the development environment by running the following command: npm start

  7. Open your browser and visit http://localhost:3000 to view the components in the browser.

Summary:

Bits is a front-end component library built upon Fractal and designed to streamline front-end development. It requires Node.js v4.0+ and offers an optional global installation of Gulp for enhanced development experience. The installation process is straightforward and the library provides features such as automatic asset compilation, browser refresh, and the ability to create a static build. Overall, Bits offers a convenient and efficient solution for front-end development.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

prismjs
Prism JS

PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.