https://github.com/lifeparticle/CSS-Cheatsheet

https://github.com/lifeparticle/CSS-Cheatsheet

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/lifeparticle/CSS-Cheatsheet
• Owner: lifeparticle
• License: mit
• Created: 2022-11-02T03:59:14.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-14T12:49:52.000Z (6 months ago)
• Last Synced: 2024-08-01T10:19:18.854Z (6 months ago)
• Size: 43 KB
• Stars: 4
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# My CSS Articles

1. [How To Create a User Interface Using CSS Grid](https://medium.com/geekculture/how-to-create-a-user-interface-using-css-grid-738d0b51282)

# Books

1. https://www.refactoringui.com/

# Code

```html



    
{formattedDate}

    


      {post.title}

    



```


```css

.card-content {

  display: flex;

  flex-direction: row-reverse;

  align-items: center;

  gap: 5px;

}

.card-title::after {

		content: " — " attr(data-date);

		font-size: smaller;

		color: gray;

}

.card-date {

  display: none;

} 

```

# Tools

https://cssstats.com/

# Resources

1. https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/

2. https://github.com/jareware/css-architecture

3. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

4. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

5. http://smacss.com/

6. https://frontendmasters.com/courses/css-variables/dry-fallback-strategies/

7. https://open-props.style/

8. https://nerdy.dev/

9. https://styleguide.github.com/

10. https://bradfrost.com/blog/post/atomic-web-design/

11. https://css-weekly.com/

12. https://frontendfoc.us/

13. https://www.lightningdesignsystem.com/components/overview/

14. https://www.youtube.com/watch?v=7hYOLLO2gc4&t=1357s&ab_channel=YouGottaLoveFrontend

15. https://courses.rachelnabors.com/p/web-animation-essentials-css-animations-and-transitions