Where to put FE styles and JS (mobile + desktop)

Proje: Okul Platform · Hub: Okul Platform — Conventions

FE style & JS file locations

Inline <style> blocks in blade files are forbidden. Inline <script> blocks in blade are only for page-specific JS (desktop). Shared/general JS goes to the general scripts. Everything below reflects webpack.mix.js (only compiled paths “work”).

Styles

Desktop

• File: resources/assets/css/custom.css (single monolithic file)
• Build: mixed into public/assets/styles/main.min.css via mix.styles([... 'custom.css' ...])
• Usage: all desktop views (resources/views/frontend/*) get this

Mobile

• Partial location: resources/assets/sass/mobile/components/_foo.scss
• Import in the mobile index(es) matching the pages the component appears on. Mobile uses 3 disjoint CSS bundles selected by mobile/layouts/master.blade.php based on $view_list / $view_profile:
  • School listing pages ($view_list) → resources/assets/sass/mobile/listing.scss → public/assets/styles/listings.css → framework_list.min.css
  • School profile pages ($view_profile) → resources/assets/sass/mobile/profile.scss → public/assets/styles/profile.css → profile.min.css
  • All other mobile pages (neither flag) → resources/assets/sass/mobile/index.scss → assets/styles/mobile_index.css → mobile.min.css
• CRITICAL: listing and profile pages do NOT load mobile.min.css. If your component appears on schools/list.blade.php AND schools/show.blade.php AND other pages, import the partial in all three index files. Adding it only to sass/mobile/index.scss leaves listing and profile pages unstyled.

Do NOT use

• resources/assets/styles/index.scss — NOT wired into webpack.mix.js. Only compiles in some other/future build. Adding @import here will NOT serve styles. (User called this out 2026-04-14 after I mistakenly imported here.)

JS

Desktop

• General (shared across desktop): resources/assets/scripts/frontend/general.js → bundled into public/assets/scripts/frontend/main.min.js via mix.scripts([... 'general.js' ...])
• Page-specific: inline <script> in the blade view (e.g., frontend/homepage.blade.php), or a dedicated file (e.g., homepage.js bundled in mix.scripts([...'homepage.js'...], '.../homepage.js')).

Mobile

• Everything goes here: resources/assets/scripts/mobile/app.js → bundled into public/assets/scripts/mobile.min.js via mix.scripts([... 'app.js' ...]).
• No per-page mobile JS files — mobile is one SPA-ish Framework7 app.

Build commands (DO NOT run — team/CI handles)

• npm run development, npm run watch, npm run prod (see webpack.mix.js)
• Source is in resources/assets/, built files in public/assets/. Never touch public/assets/.

Quick reference: “where does this new style/script go?”

Scope	Style	Script
Desktop-only, general	resources/assets/css/custom.css	resources/assets/scripts/frontend/general.js
Desktop-only, one page	resources/assets/css/custom.css (scoped selector) or dedicated css file + mix.styles	inline <script> in blade or dedicated JS file + mix.scripts
Mobile-only, general	partial in sass/mobile/components/ + @import in sass/mobile/index.scss	resources/assets/scripts/mobile/app.js
Mobile, school listing only	partial in sass/mobile/components/ + @import in sass/mobile/listing.scss	app.js (scoped selector)
Mobile, school profile only	partial in sass/mobile/components/ + @import in sass/mobile/profile.scss	app.js (scoped selector)

Related

• 2026-04-14-ui-design-tokens — token’lar burada kullanılıyor
• 2026-04-14-mobile-login-modal-duplication — mobile scss bundle mantığı login modal’da da geçerli