Recreate First Example on Home Page with CSS

[kylestetz]

Recreate First Example on Home Page with CSS

[kylestetz]

I totally understand & I'm happy to share. First thing's first: that whole site is just a branch of the CLNDR project which you can view/download here: https://github.com/kylestetz/CLNDR/tree/gh-pages

The css for that calendar is here:
https://github.com/kylestetz/CLNDR/blob/gh-pages/css/full-clndr.less

The template for that calendar is here:
https://github.com/kylestetz/CLNDR/blob/gh-pages/index.html#L56

As a side note, I definitely encourage everyone to learn LESS or SASS because it makes tasks like this one a lot simpler. I won't rewrite it for you in vanilla CSS, but I can give you an overview of the main ideas...

You can use the exact same template I used; just make .clndr-grid and .event-listing width: 100%; (which will put the event listing below the calendar). .days-of-the-week and .days are just width: 100%; and then the individual day blocks can be written out this way:

.day, .empty {
  float: left;
  width: 14.2857%;
  height: 66px; /* this is probably a little large for your needs */
  padding: 24px 0; /* ditto */
  border-bottom: 2px white solid;
  text-align: center;
}

To get that underline under the days that have events, we're looking for the .day-number class within .day classes that have an .event modifier class:

.day.event .day-number {
  padding-bottom: 4px;
  border-bottom: 2px solid #color;
}

That's enough to get you started... But perhaps this is a good opportunity to learn LESS! Ha. Let me know if you have any other questions.

[DaAwesomeP]

I took a loom at LESS and it is must easier. (Variables?) It's too bad the rest of the site is written in CSS. I got it converted correctly and I got everything sized, colored, and aligned. Thanks for the tips!

[sylouuu]

A CSS file is a valid LESS file. Then, at first, rename .css to .less and compile. After that, refactor then content in LESS.