Feature/CSS refactoring #832

adamplesnik · 2023-04-19T12:27:42Z

Description

My original intention was to introduce a dark mode for webumenia.sk. However I found out that the project CSS was due to an update and I attempted to do one.

List of changes

add current Tailwind CSS to the project, update its build
remove all old and unused LESS and static CSS files
replace legacy Tailwind and Tachyons CSS with Tailwind only classes
replace some Bootstrap classes with Tailwind
optimize style and admin CSS builds

Todo

use npm versions of plugins (eg. Bootstrap, CKeditor, etc.), remove its code from the repository
introduce CSS properties
dark mode

Type of change

Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

I have updated the CHANGELOG
I have requested at least 1 reviewer for this PR
I have made corresponding changes to the documentation

Required when working with Webstorm or other Intellij IDEs.

Update both files, add newer version of Tailwind CSS and fix some npm vulnerabilities.

Remove .tailwind-rules container. We don't need it because all Tailwind clases use the 'tw-' prefix. Remove @layer base {} from CSS.

We include and build Tailwind CSS properly and there is no need for this file anymore. Rename all tailwind-like-utils classes to their 'tw-' equivalents.

Remove these files and replace its classes with Tailwind CSS variants.

* Delete some obsolete and no longer used static CSS * Move admin CSS files to public/css/admin

* keep only build files in the root folder * delete obsolete and unused files * tune file structure

adamplesnik · 2023-04-19T15:16:48Z

Feedback is welcome.

igor-kamil · 2023-04-19T17:34:27Z

Wow 🤩 . This PR looks like a miracle. We were thinking about doing all of these things before... but nobody really wanted to start. I appreciate your effort a lot.
We need some time to walk through all your changes (which are huge!). And double-check any possible issues.
We will definitely give you feedback soon.
Thanks a lot for this. You made my day.... ✨

* remove obsolete files * keep admin CSS in public/css/admin. * keep site CSS in public/plugins

* move all CSS resources to resources/ * keep only generated CSS in public/css/ * put all imports into admin.less and style.less respectively, remove it from PHP * remove more unused less files

* include compiled Tailwind in main style files * remove app-tailwind.css

It is messing with Tailwinds' rem units.

…ring

adamplesnik · 2023-04-21T08:00:37Z

Thank you for the feedback. I am glad you like the direction of my efforts.

This phase is IMO done, I would like to eventually meet with you someday and talk about testing this PR and future development.

I read something about dropping / replacing the Bootstrap (in the commit messages): this is the task I would love to help you with. I also like to 'atomize' (Tailwind-ize 😄) the CSS and to work on overall refactoring.

Btw I love all your work in lab.sng. I checked the Warhol microsite in the meantime and it blew my dekel off; splendid work!

…ring

eronisko · 2023-04-21T10:41:01Z

Hi @adamplesnik 👋!

Thank you very much for your effort. It'll take a while for us to review all the changes, but from skimming the code, it looks like a major step in the right direction.

Right now I'm having trouble compiling the project assets (see e.g. here). Are you able to run npm run dev locally?

Note the project uses NodeJS v14 right now. That's is not a hard requirement AFAIK but if you're using a different version, please let us know.

…S to be built with postCss. + fix import paths

# Conflicts: # package-lock.json # package.json

adamplesnik · 2023-04-21T12:48:45Z

Hi @eronisko, thank you for the feedback.

I actually broke the build by calling Tailwind plugin in less() build. I put Tailwind into separate file, it should work now.

…arate CSS to be built with postCss." This reverts commit 2a1ac52.

* create separate CSS to be built with postCss. * fix import paths * no code reformatting this time ;)

adamplesnik · 2023-04-21T12:59:17Z

I am sorry about the revert, I realised too late that it would be better to leave the code formatting off for PHP files.

I am sorry I was in a hurry and forgot to do things properly.

* create separate CSS to be built with postCss. * fix import paths * no code reformatting this time ;)

…ature/css-refactoring

adamplesnik · 2023-04-21T13:33:08Z

I am sorry about this commit mess, I reverted the initial build and then reapplied it in a hurry.

…ring

+ set correct line height for Tailwind's text-base

adamplesnik · 2023-10-09T07:14:43Z

@eronisko I tried to fix all major issues. Would you please run the tests again? Thank you very much.

# Conflicts: # resources/js/components/user-collections/SharedCollection.vue # resources/views/components/footer.blade.php # resources/views/dielo.blade.php # resources/views/frontend/catalog/index.blade.php # resources/views/frontend/shared-user-collections/show.blade.php # resources/views/informacie.blade.php # resources/views/livewire/newsletter-signup-form.blade.php # resources/views/reprodukcie.blade.php

eronisko · 2023-10-09T12:51:32Z

Thanks @adamplesnik. I'll get you the test results first thing on Thursday.

…ring" This reverts commit a17d138, reversing changes made to 99dbe3d.

eronisko · 2023-10-12T07:13:34Z

New test run, looks better I think:
https://drive.sng.sk/d/s/vaLZ4vSLp5IDI9nlKHPQ6Nqm6HoHXKOE/iFmH5PIBeQoKKeE3pXNF3u1uv9BuJao9-LbagJQeF0Qo

…ring

It doesn't work well with BS.

…ature/css-refactoring

Add @tailwindcss/forms back.

# Conflicts: # package.json

# Conflicts: # resources/views/frontend/catalog-new/index-new.blade.php

Adam Plesnik added 7 commits April 18, 2023 09:13

Update .gitignore to ignore .idea/ folder.

4ec54e5

Required when working with Webstorm or other Intellij IDEs.

Update package.json and package-lock.json

155fd4d

Update both files, add newer version of Tailwind CSS and fix some npm vulnerabilities.

Update Tailwind CSS build

7bdc03b

Remove .tailwind-rules container. We don't need it because all Tailwind clases use the 'tw-' prefix. Remove @layer base {} from CSS.

Remove tailwind-like-utils.less

537a697

We include and build Tailwind CSS properly and there is no need for this file anymore. Rename all tailwind-like-utils classes to their 'tw-' equivalents.

Remove redundant atomic CSS: dimensions and position

bc833d3

Remove these files and replace its classes with Tailwind CSS variants.

Delete obsolete static CSS, change public/ structure

735c67c

* Delete some obsolete and no longer used static CSS * Move admin CSS files to public/css/admin

Update resources/less folder structure

573f8e1

* keep only build files in the root folder * delete obsolete and unused files * tune file structure

Adam Plesnik and others added 5 commits April 20, 2023 10:06

Remove unused CSS files from public/css/

750c546

* remove obsolete files * keep admin CSS in public/css/admin. * keep site CSS in public/plugins

Move resource CSS to resources, update admin.less and style.less imports

b497ec6

* move all CSS resources to resources/ * keep only generated CSS in public/css/ * put all imports into admin.less and style.less respectively, remove it from PHP * remove more unused less files

Put Tailwind CSS into admin.less and style.less

838a83b

* include compiled Tailwind in main style files * remove app-tailwind.css

Remove font-size: 10px from scaffolding.less

821d58d

It is messing with Tailwinds' rem units.

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

402b687

…ring

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

be6a938

…ring

Adam Plesnik added 2 commits April 21, 2023 14:38

Fix build: remove Tailwind from less resources and create separate CS…

2a1ac52

…S to be built with postCss. + fix import paths

Merge branch 'develop' into feature/css-refactoring

bca2ad4

# Conflicts: # package-lock.json # package.json

Adam Plesnik added 3 commits April 21, 2023 14:51

Revert "Fix build: remove Tailwind from less resources and create sep…

5163b25

…arate CSS to be built with postCss." This reverts commit 2a1ac52.

Fix package.json

e9afd48

Fix build: remove Tailwind from less resources

3007c91

* create separate CSS to be built with postCss. * fix import paths * no code reformatting this time ;)

Adam Plesnik added 5 commits April 21, 2023 15:00

Remove old vue compiler from package.json

96b21eb

Remove @tailwind annotations from resources

c4b1bf6

Add tailwind.css.

692b465

I am sorry I was in a hurry and forgot to do things properly.

Fix build: remove Tailwind from less resources

8327603

* create separate CSS to be built with postCss. * fix import paths * no code reformatting this time ;)

Merge remote-tracking branch 'origin/feature/css-refactoring' into fe…

45bf3fd

…ature/css-refactoring

adamplesnik and others added 2 commits October 8, 2023 21:29

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

9e2edf8

…ring

Fix favorites, collections

5086f16

+ set correct line height for Tailwind's text-base

Adam Plesnik added 5 commits October 9, 2023 21:26

Fix home carousel + shuffle

2a2e03c

Fix home featured Piece and Artwork

11c9208

Fix home featured piece and artwork; featured author

99dbe3d

Merge branch 'feature/more-tailwind' into feature/css-refactoring

a17d138

Revert "Merge branch 'feature/more-tailwind' into feature/css-refacto…

4a777fd

…ring" This reverts commit a17d138, reversing changes made to 99dbe3d.

adamplesnik and others added 12 commits October 12, 2023 10:11

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

56f853c

…ring

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

e093fec

…ring

Fix dielo, zoom.

9d3c59d

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

d9e0f31

…ring

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

6f8044f

…ring

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

9504923

…ring

Fix favorites, home page

fc5743b

Fix zoom

623ae06

Merge branch 'SlovakNationalGallery:develop' into feature/css-refacto…

75c8b21

…ring

Remove tailwindcss/forms from plugins.

3a7c0d2

It doesn't work well with BS.

Merge remote-tracking branch 'origin/feature/css-refactoring' into fe…

09ca835

…ature/css-refactoring

Fix home, button colors.

6939658

Add @tailwindcss/forms back.

eronisko changed the base branch from develop to main December 21, 2023 09:59

Adam Plesnik and others added 6 commits January 2, 2024 11:10

Merge branch 'develop' into feature/css-refactoring

ca9a7ee

# Conflicts: # package.json

Merge branch 'SlovakNationalGallery:main' into feature/css-refactoring

c611514

Merge branch 'develop' into feature/css-refactoring

0b7cae5

# Conflicts: # resources/views/frontend/catalog-new/index-new.blade.php

Merge branch 'SlovakNationalGallery:main' into feature/css-refactoring

70eaad2

Merge branch 'develop' into feature/css-refactoring

7b05852

Merge branch 'SlovakNationalGallery:main' into feature/css-refactoring

741c7cb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/CSS refactoring #832

Feature/CSS refactoring #832

adamplesnik commented Apr 19, 2023 •

edited

adamplesnik commented Apr 19, 2023

igor-kamil commented Apr 19, 2023

adamplesnik commented Apr 21, 2023

eronisko commented Apr 21, 2023

adamplesnik commented Apr 21, 2023

adamplesnik commented Apr 21, 2023

adamplesnik commented Apr 21, 2023

adamplesnik commented Oct 9, 2023

eronisko commented Oct 9, 2023

eronisko commented Oct 12, 2023

Feature/CSS refactoring #832

Are you sure you want to change the base?

Feature/CSS refactoring #832

Conversation

adamplesnik commented Apr 19, 2023 • edited

Description

List of changes

Todo

Type of change

Checklist:

adamplesnik commented Apr 19, 2023

igor-kamil commented Apr 19, 2023

adamplesnik commented Apr 21, 2023

eronisko commented Apr 21, 2023

adamplesnik commented Apr 21, 2023

adamplesnik commented Apr 21, 2023

adamplesnik commented Apr 21, 2023

adamplesnik commented Oct 9, 2023

eronisko commented Oct 9, 2023

eronisko commented Oct 12, 2023

adamplesnik commented Apr 19, 2023 •

edited