Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add SCSS support #40

Merged
merged 7 commits into from
Nov 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .github/workflows/unit_tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,11 @@ jobs:
- name: Install dependencies
run: poetry install

- name: Install Node dependencies
run: npm install

- name: Build CSS
run: npm run build

- name: Run Pytest tests
run: AWS_DEFAULT_REGION=eu-west-2 poetry run pytest --cov=app/main --cov-report term-missing -vvv app/tests/
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@
# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,git,venv,macos,linux,windows,python,flask,jetbrains+all

### GOV.UK Frontend ###
app/static/src/css*
app/static/fonts*
app/static/govuk-frontend*
app/static/images*
app/static/VERSION.txt
govuk_components*
node_modules

### Flask ###
instance/*
Expand Down
30 changes: 30 additions & 0 deletions .stylelintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"extends": [
"stylelint-config-standard-scss"
],
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": {
"at-rule-empty-line-before": null,
"block-no-empty": null,
"declaration-empty-line-before": null,
"property-no-vendor-prefix": null,
"value-keyword-case": null,
"scss/dollar-variable-empty-line-before": null,
"scss/double-slash-comment-empty-line-before": null,
"selector-class-pattern": null,
"plugin/selector-bem-pattern": {
"preset": "bem"
},
"color-function-notation": [
"modern",
{
"ignore": [
"with-var-inside"
]
}
],
"scss/operator-no-newline-after": null
}
}
17 changes: 17 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,23 @@ and then specifies environment variables for:
- `SECRET_KEY` to "TEST_SECRET_KEY" so that Flask sessions work in tests.
- `WTF_CSRF_ENABLED` to `False` so that we do not need to worry about CSRF protection in our tests.

### CSS / SCSS

SASS is being used to build CSS files. To build the css files you can use npm to build by first installing the npm packages and then using:

```
npm run build
```
or if you'd like to watch for changes use:

```
npm run dev
```
To lint all CSS use:
```
npm run lint
```

### Run app

Ensure you set the above environment variables and configurations before running the Flask application with:
Expand Down
38 changes: 0 additions & 38 deletions app/static/src/css/start-page.css

This file was deleted.

File renamed without changes.
33 changes: 33 additions & 0 deletions app/static/src/scss/start-page.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.govuk-button {
position: relative;
padding: 8px 10px 7px 7px;
text-align: center;
border: 2px solid transparent;

&--start {
margin-left: 3px;
font-weight: 700;
font-size: 1.5rem;
display: inline-flex;
justify-content: center;
min-height: auto;
margin-top: 20px;
margin-bottom: 30px;
}
}

p.govuk-body {
margin-bottom: -40px;
display: inline-block;
}

.govuk-heading-l {
margin-bottom: 30px;
margin-top: -40px;
font-weight: 700;
}

.govuk-heading-m {
margin-bottom: 20px;
font-weight: 700;
}
Loading