cmc/cleberg.net

  1#+date:        [2019-01-07 Mon 00:00:00]
  2#+title:       CSS Tips: Flexbox, Shadows, Variables
  3#+description: A few quick tips on modern CSS features.
  4#+slug:        useful-css
  5#+filetags:    :web:
  6
  7* Introduction to CSS
  8
  9Cascading Style Sheets ([[https://en.wikipedia.org/wiki/CSS][CSS]]), the language used to mark up HTML code and give it
 10a visual style, is one of the most effective ways to increase the attractiveness
 11of a website. It can also lead to increased user engagement, retention, and
 12satisfaction. In fact, there are whole career fields dedicated to the
 13improvement of user experiences, known as User Interface (UI) design and User
 14Experience (UX) design.
 15
 16Some web developers are familiar with the common CSS properties, such as element
 17sizing, fonts, and colors, but are not as well versed in less-used properties
 18and values such as =flexbox=, =clip-path=, and =transform=. This article will
 19provide some insight into the less-used and unique CSS properties.
 20
 21* CSS Variables
 22
 23The first topic today is CSS variables. Variables are not often used by smaller
 24developers. CSS variables allow you to give your website a well-defined
 25structure, where you can easily reuse CSS properties throughout the project.
 26
 27You can use variables to define things, such as color palettes. Then, you can
 28use these colors for backgrounds anywhere else in the HTML. You can expand this
 29and define variables for =primary-text=, =quoted-text=, etc. You can also use
 30variables to define spacing (e.g. =32px= or =2rem=), which you can then apply to
 31margins, padding, font sizes, and more.
 32
 33For example, here are some variables defined at the root of the website, which
 34allows for any subsequent CSS rules to use those variables:
 35
 36#+begin_src css
 37:root {
 38    --primary-color: black;
 39    --secondary-color: white;
 40}
 41
 42body {
 43    background-color: var(--primary-color);
 44    color: var(--secondary-color);
 45}
 46#+end_src
 47
 48* CSS Box Shadows
 49
 50Box shadows were once my mortal enemy. No matter how hard I tried, I just
 51couldn't get them to work how I wanted. Because of this, my favorite discovery
 52has been CSSMatic's [[https://www.cssmatic.com/box-shadow][box shadow generator]]. It provides a tool to generate box
 53shadows using their simple sliders. Surprisingly, this is the reason I learned
 54how box shadows work! You can use the sliders and watch how the CSS code changes
 55in the image that the tool displays. Through this, you should understand that
 56the basic structure for box shadows is:
 57
 58#+begin_src css
 59box-shadow: inset horizontal vertical blur spread color;
 60#+end_src
 61
 62Now, let's look at some basic examples! You can copy and paste the following
 63code into a site like CodePen or your own HTML files. Feel free to play around
 64with the code, experiment, and learn.
 65
 66*Box Shadow #1*
 67
 68#+begin_src html
 69<div class="shadow-examples">
 70    <div class="box effect1">
 71        <h3>Effect 1</h3>
 72    </div>
 73</div>
 74#+end_src
 75
 76#+begin_src css
 77.box h3 {
 78    text-align: center;
 79    position: relative;
 80    top: 80px;
 81}
 82.box {
 83    width: 70%;
 84    height: 200px;
 85    background: #fff;
 86    margin: 40px auto;
 87}
 88.effect1 {
 89    box-shadow: 0 10px 6px -6px #777;
 90}
 91#+end_src
 92
 93*Box Shadow #2*
 94
 95#+begin_src html
 96<div class="shadow-examples">
 97    <div class="box effect2">
 98        <h3>Effect 2</h3>
 99    </div>
100</div>
101#+end_src
102
103#+begin_src css
104.box h3 {
105    text-align: center;
106    position: relative;
107    top: 80px;
108}
109.box {
110    width: 70%;
111    height: 200px;
112    background: #fff;
113    margin: 40px auto;
114}
115.effect2 {
116    box-shadow: 10px 10px 5px -5px rgba(0, 0, 0, 0.75);
117}
118#+end_src
119
120Try these box shadows out on your own and see how changing each shadow value
121works.
122
123* CSS Flex Box
124
125Now, let's move on to the best part of this article: flex box. The flex box is by
126far my favorite new toy. I originally stumbled across this solution after
127looking for more efficient ways of centering content horizontally AND
128vertically. I had used other methods before, but flex box throws those out the
129window. The best part of it all is that flex box is /dead simple/.
130
131Flex Box pertains to the parent div of any element. You want the parent to be the
132flex box and the children's behavior modified by the parent's attributes. It's
133easier to see this in action that explained, so let's see an example.
134
135*Flex Box*
136
137#+begin_src html
138<div class="flex-examples">
139    <div class="sm-box">
140        <h3>1</h3>
141    </div>
142    <div class="sm-box">
143        <h3>2</h3>
144    </div>
145</div>
146#+end_src
147
148#+begin_src css
149.flex-examples {
150    display: flex;
151    flex-wrap: wrap;
152    justify-content: flex-start;
153    align-items: center;
154    padding: 10px;
155    background-color: #f2f2f2;
156}
157.sm-box {
158    display: flex;
159    justify-content: center;
160    align-items: center;
161    width: 20%;
162    height: 100px;
163    background: #fff;
164    margin: 40px 10px;
165}
166#+end_src
167
168You may notice that we no longer need to use the =top= property for the =h3=
169elements in our code. This is because we set the display box to be a flex
170container for the small boxes, AND we made the small boxes flex containers for
171their elements (the h3 tags). You can nest flex boxes to center content that is
172inside centered content.
173
174For the example above, we designated the =justify-content= property to be
175=flex-start= so that the boxes stack from the left side of the screen. You can
176change this property to =center= to make the boxes appear in the center of the
177screen.
178
179For an interactive example, [[https://codepen.io/LandonSchropp/pen/KpzzGo][check out this CodePen]] from [[https://codepen.io/LandonSchropp/][LandonScropp]]. Resize the
180window with dice to see how they collapse and re-align.
181
182* Even More CSS
183
184For more inspiration, you can visit [[https://www.codepen.io][CodePen]], [[https://dribbble.com][Dribbble]], or [[https://uimovement.com][UI Movement]] to browse
185the collections of amazing web designers.