I wanted to start a Plan for a new 3.x branch to mainly set this up as a starterkit ready theme for Drupal 9/10.

Action items

Items for review

SASS or PostCSS?

TBD

Bourbon or Not Bourbon?

TBD

Mobile and dropdown menus

There have been a couple request for having responsive and drop down menus in Basic. I believe other themes link Bootstrap and Omega come with this functionality already. Would this be a help addition to basic? I think we should continue to take the "starter-kit" approach keeping the styles simple.
See: https://www.drupal.org/node/2704147 & https://www.drupal.org/node/2798385

NPM Scripts

Remove Gulp/Grunt and use NPM scripts to run scripts

Doc Improvements

We have some opportunities for better docs in a variety of areas.

  • D7 & D8: Review install instructions for node/npm.
  • D8: Document why messages & tabs css is in a theme library
  • ...add more notes here as we discover areas for improvement.

Let us know if you have other ideas...

Comments

joelpittet created an issue. See original summary.

joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Issue summary: View changes
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Issue summary: View changes
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Issue tags: +ContributioneWeekend2023
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Issue tags: -ContributioneWeekend2023 +ContributionWeekend2023
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Issue summary: View changes
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Issue summary: View changes
awasson’s picture

awasson commented

@ joelpittet, Is this using the package.json file you shared with us a few years ago?

This is the version I've been using with a modded version of Basic for D9 and aside from not creating map.js, it's super light and fast.


{
  "name": "basic",
  "version": "2.0.0",
  "description": "BASIC Theme Version 2",
  "license": "MIT",
  "scripts": {
    "sass": "node-sass --recursive --source-map true --output-style expanded --output css sass",
    "autoprefixer": "postcss --no-map -u autoprefixer --autoprefixer.browsers -r css/*/*.css",
    "build:css": "npm run sass && npm run autoprefixer",
    "build:images": "imagemin images/source/*.{png,jpg,gif,svg} -o images/optimized",
    "uglify:js": "uglifyjs js/source/*.js -m -c -o js/build/scripts.js",
    "watch:css": "onchange 'sass/**/*.scss' -- npm run build:css",
    "watch:img": "onchange 'images/source/*' -- npm run build:images",
    "watch:js": "onchange 'js/source/*.js' -- npm run uglify:js",
    "watch:all": "concurrently --kill-others 'npm run watch:css' 'npm run watch:js' 'npm run watch:img'"
  },
  "dependencies": {
    "bourbon": "^5.0.0-beta.8",
    "bourbon-neat": "^2.1.0",
    "autoprefixer": "^9.7.6",
    "concurrently": "^4.1.1",
    "node-sass": "^4.13.1",
    "uglify-js": "^3.9.1",
    "imagemin-cli": "^5.1.0",
    "onchange": "^6.0.0",
    "postcss-cli": "^6.1.3"
  },
  "browserslist": [
    "> 1%"
  ]
}
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Issue summary: View changes

@awasson Yes that would be a good approach I think to transition away from what we have, but I think we need to make what we have currently work. #3337106: Unable to install theme build pipeline due to node-sass dependency
I created that comment as a task here #3338111: Remove Gulp/Grunt and use NPM scripts to run scripts Want to take a crack at that?

joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented

@awasson I pushed a MR to #3338111: Remove Gulp/Grunt and use NPM scripts to run scripts have a peek and see if I missed anything.

awasson’s picture

awasson commented

@joelpittet,

Thanks for that. I've cloned the 3.0 Dev and tested it locally. It seems to work well in my Mac OS Ventura 13.2 environment. In my latest Basic themes, I've been using "node-sass": "^5.0" and on my arm64 (M2 Chip) Mac and found that I had to unlink the latest Node and use node 14. I'm not sure if that's the same case with Sass. I see that you've also switched out node-sass for "sass": "^1.0.0".

Anyway npm install installed without any issues and npm run watch:all appears to work well.

Cheers,
Andrew