Comments (7)
π on stylelint
we could
- add the stylelint rule: unit-whitelist without βpxβ
- use variables set in px (for ease of communications with designers and translation of designs)
- disable/ignore
vars
file that contains$baseline
and$gutter
px vars (this being the only place to add them) - use postcss-px-to-em https://github.com/macropodhq/postcss-px-to-em for support
note we could also just not replace
px
values withrem
when using pxtorem it would be interesting to see how much weight this adds to the stylesheets
Potentially we would also write a plugin so people canβt /*
variables
This would then stop people using magic numbers for padding and margin. $baseline\1.2
or $baseline*3.76
More of a guidance than a heavy handed approach
from assets-frontend.
https://github.com/stylelint/stylelint
from assets-frontend.
or https://github.com/brigade/scss-lint
from assets-frontend.
oops
from assets-frontend.
Have just done a setup with sass and https://github.com/sasstools/sass-lint using the rule
property-units:
- 2
- global:
- px
And then using post-css with the plugin https://github.com/cuth/postcss-pxtorem to convert px to rem.
In this way we could lint values being used in *.scss and convert after rather than using mixins.
from assets-frontend.
@feedmypixel Having considered this some more, I think we'd be better off moving margins and paddings into variables with em
values (can't use rems
due to support) and enforcing the use of those through linting.
It feels like a very heavy handed approach though, but I worry that by allowing the use of arbitrary magic numbers all over the place we'll struggle to maintain consistency in components and layouts.
from assets-frontend.
Also, we should probably consider using stylelint over sass-lint for it's modularity (e.g. stylelint-selector-bem-pattern). Much the same as eslint for js
from assets-frontend.
Related Issues (20)
- Details element shows double arrows in MS Edge
- Services using AF do not resize text
- The build fails when run against the latest LTS version of node HOT 3
- Tabs component doesn't demonstrate deep linking to a tab
- Random classes getting added to html tag and causing layout issues - v2.245.0 HOT 5
- The 'disclosure widget' for the summary/details element is hidden in Firefox unless the css display value is set to list-item HOT 5
- Character countdown usability HOT 1
- `character-counter` component doesn't support GDS-style commas in long numbers eg 3,000 rather than 3000? HOT 1
- Broken build due to missing path for Nunjucks
- Running locally V3 assets not compiling properly HOT 3
- Pattern Library compiled CSS issue
- Link style button(button--link) focus background colour is green HOT 1
- Issue with Stageprompt not recognising JQuery
- Example markup for Secondary buttons shouldn't include the button class
- stageprompt version included in minified application js doesn't cater for newer Google analytics.js HOT 5
- Minified JavaScript contains unquoted identifiers which are reserved words in IE8
- Inconsistency for Radio Button Toggles HOT 1
- hard coded "+" is not always wanted
- Message pattern layout breaking...
- timeoutDialog timer does not evaluate time elapsed HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from assets-frontend.