https://github.com/lunarfusion/academica-2

An experimental Drupal theme using single directory components (SDC) and UI Patterns
https://github.com/lunarfusion/academica-2

drupal sdc ui-patterns

Last synced: about 2 months ago
JSON representation

An experimental Drupal theme using single directory components (SDC) and UI Patterns

• Host: GitHub
• URL: https://github.com/lunarfusion/academica-2
• Owner: lunarfusion
• Created: 2025-02-21T18:02:42.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-03-21T20:16:43.000Z (about 2 months ago)
• Last Synced: 2025-03-21T21:23:34.790Z (about 2 months ago)
• Topics: drupal, sdc, ui-patterns
• Language: CSS
• Homepage:
• Size: 36 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.txt

Awesome Lists containing this project

README

        
# Academica 2 Overview

An experimental design system and Drupal theme built with postCSS, CSS variables, and Single Directory Components. This version of Academica utilizes Drupals UI Suite:

- https://project.pages.drupalcode.org/ui_patterns/

- https://www.drupal.org/project/ui_patterns

- https://www.drupal.org/project/ui_styles

- https://www.drupal.org/project/ui_skins

- https://www.drupal.org/project/ui_icons

Academica follows atomic design practices with Drupal Single Directory Components. Integrates PostCSS, which is compiled per component using vite. Uses CSS variables, including primitive and semantic layers for the color palette.

# Starting

Storybook University uses Vite with a type of HTML.

To run postCSS compiling:

npm run dev

# Using PostCSS

npm install autoprefixer

npm i postcss-nested

npm i postcss-import

npm i -D postcss-load-config

## postcss.config.js

Create a file named postcss.config.js in the root of your project, and add this content:



module.exports = {

  // Add your installed PostCSS plugins here:

  plugins: [

    require('postcss-import'), // postcss-import must be first

    require('autoprefixer'),

    require('postcss-nested')

    // don't put devDependencies here, only dependencies

  ],

};



# Using Vite

This project includes vite.config.js and includes > vite.theme