This is an example of a calendar made with flexbox.
A Pen by Landon Schropp on CodePen.
Created
June 16, 2015 18:11
-
-
Save elykahn/dfb5a16337e68138a4d4 to your computer and use it in GitHub Desktop.
Flexbox Calendar Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="month"> | |
| <div class="week"> | |
| <div class="day">1</div> | |
| <div class="day">2</div> | |
| <div class="day">3</div> | |
| <div class="day">4</div> | |
| </div> | |
| <div class="week"> | |
| <div class="day">5</div> | |
| <div class="day">6</div> | |
| <div class="day">7</div> | |
| <div class="day">8</div> | |
| <div class="day">9</div> | |
| <div class="day">10</div> | |
| <div class="day">11</div> | |
| </div> | |
| <div class="week"> | |
| <div class="day">12</div> | |
| <div class="day">13</div> | |
| <div class="day">14</div> | |
| <div class="day">15</div> | |
| <div class="day">16</div> | |
| <div class="day">17</div> | |
| <div class="day">18</div> | |
| </div> | |
| <div class="week"> | |
| <div class="day">19</div> | |
| <div class="day">20</div> | |
| <div class="day">21</div> | |
| <div class="day">22</div> | |
| <div class="day">23</div> | |
| <div class="day">24</div> | |
| <div class="day">25</div> | |
| </div> | |
| <div class="week"> | |
| <div class="day">26</div> | |
| <div class="day">27</div> | |
| <div class="day">28</div> | |
| <div class="day">29</div> | |
| <div class="day">30</div> | |
| <div class="day">31</div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| This is an example from my Free Flexbox Starter Course. Check it out! | |
| https://unravelingflexbox.com/subscribe | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .week { | |
| display: flex; | |
| } | |
| .day { | |
| flex-grow: 1; | |
| flex-shrink: 1; | |
| flex-basis: 0; | |
| } | |
| .week:first-of-type .day:first-of-type { | |
| margin-left: 42.85714%; | |
| } | |
| .week:last-of-type .day:last-of-type { | |
| margin-right: 14.285%; | |
| } | |
| /* OTHER STYLES */ | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background: linear-gradient(top, #fad961, #f76d1d); | |
| background-attachment: fixed; | |
| } | |
| .month { | |
| max-width: 560px; | |
| margin: 20px auto; | |
| } | |
| .week { | |
| height: 80px; | |
| } | |
| .day { | |
| color: #F98909; | |
| padding: 5px; | |
| background-color: transparentize(white, 0.30); | |
| box-shadow: | |
| -1px -1px #F9A440, | |
| inset -1px -1px 0 0 #F9A440; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment