72 lines
2.4 KiB
YAML
72 lines
2.4 KiB
YAML
uuid:
|
|
- value: 71882aa6-8635-4242-ad8c-3676d9640060
|
|
langcode:
|
|
- value: en
|
|
type:
|
|
- target_id: daily_email
|
|
target_type: node_type
|
|
target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
|
|
revision_timestamp:
|
|
- value: '2025-05-11T09:00:10+00:00'
|
|
revision_uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
revision_log: { }
|
|
status:
|
|
- value: true
|
|
uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
title:
|
|
- value: 'How I started using utility-first CSS'
|
|
created:
|
|
- value: '2024-07-11T00:00:00+00:00'
|
|
changed:
|
|
- value: '2025-05-11T09:00:10+00:00'
|
|
promote:
|
|
- value: false
|
|
sticky:
|
|
- value: false
|
|
default_langcode:
|
|
- value: true
|
|
revision_translation_affected:
|
|
- value: true
|
|
path:
|
|
- alias: /daily/2024/07/11/how-i-started-using-utility-first-css
|
|
langcode: en
|
|
body:
|
|
- value: |
|
|
<p>Before I started using atomic CSS classes, I used to use a popular component-based CSS framework.</p>
|
|
|
|
<p>You'd include the styles as well as the HTML markup you needed.</p>
|
|
|
|
<p>Whilst using the other framework, I started to sprinkle CSS classes on top of my existing styles, to make it easy to set values such as text sizes, colours, margin and padding without repeating myself and duplicating styles.</p>
|
|
|
|
<p>Later, I realised I didn't need the original framework and I could do it myself with atomic classes.</p>
|
|
|
|
<p>Page by page and component by component, I refactored everything to use atomic classes.</p>
|
|
|
|
<p>Once everything was refactored, I removed the original framework.</p>
|
|
|
|
<p>I haven't looked back.</p>
|
|
|
|
|
|
format: full_html
|
|
processed: |
|
|
<p>Before I started using atomic CSS classes, I used to use a popular component-based CSS framework.</p>
|
|
|
|
<p>You'd include the styles as well as the HTML markup you needed.</p>
|
|
|
|
<p>Whilst using the other framework, I started to sprinkle CSS classes on top of my existing styles, to make it easy to set values such as text sizes, colours, margin and padding without repeating myself and duplicating styles.</p>
|
|
|
|
<p>Later, I realised I didn't need the original framework and I could do it myself with atomic classes.</p>
|
|
|
|
<p>Page by page and component by component, I refactored everything to use atomic classes.</p>
|
|
|
|
<p>Once everything was refactored, I removed the original framework.</p>
|
|
|
|
<p>I haven't looked back.</p>
|
|
|
|
|
|
summary: null
|
|
field_daily_email_cta: { }
|