Design

CSS

Jacques Leemans
, , ,
2 min. read

Cascading Style Sheets (CSS)

CSS Cheatsheet

CSS Selectors

CSS Selector game: https://flukeout.github.io/
https://dev.to/dawnind/css3-selectors-cheat-sheet-6dk

How to CSS..

How to limit the text length in CSS

Let’s say you have a paragraph, with the content:

1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>

And you only want to display the first 100 characters of the paragraph.

This can easily be done with CSS, by adding these properties to the text style:

1
2
3
4
5
6
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100ch;
}

Three CSS tips for working with inconsistently sized logos

1
2
3
4
5
6
img {
  width: 15%;
  aspect-ration: 3/2;
  object-fit: contain;
  mix-blend-mode: color-burn
}

Source: https://twitter.com/wesbos/status/1597598503886327808?s=20&t=B9LOeKPkRZzjoVuc-9UmDg

CSS Tools

  • Dreamweaver
  • BlueGriffon
  • Aptana Studio
  • NetBeans
  • SeaMonkey
  • Aloha Editor
  • Wordpress
  • Tabnine
  • Coffeecup
  • Webstorm
  • Atom
  • Visual Studio Code
  • Pinegrow
  • Bluefish
  • Wix
  • Macromates

CSS Courses

CSS Libraries and Frameworks

https://getbootstrap.com/
https://material.io/design
https://mdbootstrap.com/

https://tailwindcss.com/
https://get.foundation/
https://bulma.io/

Animation Frameworks:
https://animate.style/

References

https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431

https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163

https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228

https://scrimba.com/g/gR8PTE

Learn CSS Position In 9 Minutes

CSS Card Tricks

10 CSS Pro Tips - Code this, NOT that!

Share