baarkerlounger
/
submit-social-housing-lettings-and-sales-data
mirror of https://github.com/communitiesuk/submit-social-housing-lettings-and-sales-data.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Submit social housing lettings and sales data (CORE)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1427 Commits
223 Branches
251 Tags
76 MiB
 
 
 
 
Tree: 1fb0bbeb3e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1fb0bbeb3e'
${ noResults }
submit-social-housing-letti.../docs/frontend.md

3.1 KiB
Raw Blame History Escape

Frontend

GOV.UK Design System components

This service follows the guidance and recommendations from the GOV.UK Design System. This is achieved using the following libraries:

Service-specific components

Service-specific components are built using the ViewComponent framework, and can be found in app/components.

Components use HTML class names that follow the BEM methodology. We use the app-* prefix to prevent collisions with components provided by the Design System (which uses govuk-*). See Extending and modifying components in production.

Stylesheets are written using Sass (and the SCSS syntax), using the mixins and helpers provided by govuk-frontend.

Separate stylesheets are used for each component, with filenames that match the component’s namespace.

Like the components provided by the Design System, components are progressively enhanced. We use Stimulus to add any client-side JavaScript enhancements.

Stimulus

For adding custom javascript to the application we use Stimulus.

The general pattern is:

  • Register a controller in /app/frontend/controllers/index.js- be sure to use kebab case
  • Create that controller in app/frontend/controllers/ - be sure to use underscore case
  • Attach the controller to the html element that should trigger it’s functionality

Asset bundling and compilation

  • We use Webpack via jsbundling-rails to bundle JavaScript, CSS and images. The configuration can be found in webpack.config.js.
  • We use Propshaft as our asset pipeline to serve the assets bundled/compiled by webpack
  • We use Babel to transpile js down to ES5 for Internet Explorer compatibility. The configuration can be found in babel.config.js
  • We use browserslist to specify the browsers we want to transpile for. The configuration can be found in package.json
  • We include a number of polyfills to support Internet Explorer. These can be found in app/frontend/application.js