CSS

Sass Basics

April 6, 2017

If you use CSS, it can sometimes get repetitive. One way of streamlining your code is to use Sass. Sass is a CSS extension that gives users power and elegance. Sass allows the use of variables, nested rules, mixins, inline imports, and many more in your code by cutting down on some repetitive tasks. Let me show you how it’s done. Below is an example of how to use Sass using variables.

Sass Variables – an example using the same hex color over and over again.

$link-color: #054943;
 
a, a:active { color: $link-color; }
pre { color: $link-color; }
#page { color: $link-color; }
.list { color: $link-color; }

With Sass’ preprocessor, the original will output a result like this:

a, a:active { color: #054943; }
pre { color: #054943; }
#page { color: #054943; }
.list { color: #054943; }

If you need to change the color in the future, you just need to change one line.

To start Using Sass, just issue the command below. Sass will watch input.scss and generate output.css.

$ sass input.scss output.css

If you use Github for versioning, you may have to ignore a few files, like the Sass cache, the mapping file and the input.scss itself, from showing up on your Github repository. To learn Sass, visit the website and read the documentation. To start using Sass, just install.

Implementing Surfcali.com

November 6, 2016

I have a website called Surfcali.com. It’s a website that provides tide table information for select California beaches. The tide information on the website is auto-generated by the xtide program which is available on most Linux distributions.

You can install xtide on Ubuntu by typing this command from the Terminal.

sudo apt-get install xtide

Instead of explaining how the website is implemented using lots of words, it’s probably much easier to explain it via video.

So, here’s a short video of how Surfcali.com was put together.

Video

CSS White-Space Property

September 20, 2016

Whitespace, line breaks, spaces and tabs are collapsed by default in HTML documents. To add space, we can add “ ” which translates to space, to add some separation between elements. In addition <br/> or line breaks can also be utilized to add space. There is a HTML property called white-space which can be used to configure how the whitespace inside the element is displayed. The following is a list of whitespace options.

Syntax

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
 
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

Usage

p { white-space: normal }

white-space: normal

This is the default format. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

white-space: nowrap

With nowrap, paragraph lines are extended out. No wrapping. No breaks between paragraphs.

white-space: pre-line

With pre-line, breaks are inserted between paragraphs. Paragraphs are wrapped.

The couple of examples above shows how elements can be styled using the white-space property.

How to Zebra Stripe a Table

September 18, 2016

A HTML table can be difficult to read, especially if there are hundreds of rows. Reading across a row can sometimes be a challenge. One way of making the table more legible is to alternate the background color of each row. By the way, the plugin used on this blog to display code uses zebra stripes. Zebra stripping can be done by toggling a variable and alternately displaying an odd or even CSS class as it goes through the loop.

The Code:

// set variable initially to "odd."
// loop 4 times for demo purposes.
// toggle CSS classes while in a loop.
$c = "odd";
$count = 0;
echo "<table>";
while ($count < 4) :
  if ($c == "even") : echo "<tr class='even'>"; $c="odd"; else : echo "<tr class='odd'>"; $c="even"; endif;
  echo "<td>Data</td>";
  echo "</tr>";
  $count++;
endwhile;
echo "</table>";

The Result:

<table>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
</table>

The Style:

.odd { background-color: #fff; }
.even { background-color: #eee; }

To see it in action, visit CodePad.

Limit Text on WordPress

September 18, 2015

There are times when we need to limit text to a certain length. For example, we want to limit the length of the titles in the footer section. If we don’t limit the length, the text spills over to the next line and screws up the formatting and the look of the website. To limit the text length, we will use CSS3.

Let’s say, we have a div class called footer-widgets. Inside, we have an unordered list. We can limit the text to just 245 characters. If the design is responsive, the footer section could reconfigure itself and at times be greater than 245px. If that’s the case, we will display the entire string instead. We will set the minimum width to 245px, overflow to hidden, white-space to nowrap, and text overflow to ellipsis.

Here’s the CSS code:

.footer-widgets li {
  text-overflow: ellipsis;
  min-width: 245px;
  white-space: nowrap;
  overflow:hidden;
}

This code works well if you’re using a responsive design. Your footer area can expand or contract depending on your responsive design. The text will truncate if if the footer area is less than 245px, and it will display the entire text if it’s over 245px.

I have it implemented on this blog. Check out the footer section.

Charging At Night

January 13, 2015

Charging the laptop at night. I’m trying to get back into photography. This photo shows how a responsive design render images differently in various screen sizes using CSS max-width at 100%. In addition, the height is set to auto to keep the scale correct.

img {
 height: auto; /* Make sure images are scaled correctly. */
 max-width: 100%; /* Adhere to container width. */
}

Now regarding the Mac, there’s a rumor that Apple is planning to release a 12-inch MacBook Air as detailed here by Forbes.

Continuous Order List

December 26, 2014

Take a look at this piece of code from Codepen. It’s just a simple ordering list, but the list is broken up into several sections. The numerical order continuous as it spills over to other sections. It even changes to Roman numbering in the last section. How is this possible?

Just HTML and CSS. No Javascript. The key is adding the appropriate CSS to the ol markup.

Just look at the examples below.

// Start the list at number 6
<ol start="6">

// Start the list at number 11. Assign "roman" class to it.
<ol class="roman" start="11">

The CSS for “roman” is:

.roman { list-style-type:upper-roman; }

Pretty neat.

Responsive Page Width

December 25, 2014

You can do a lot with having a responsive design. If you’re using page widths on your designs, you can tailor your page layout based on the viewer’s screen size. The following CSS code will make your web page responsive by offering different page widths to your layout.

@media screen and (min-width:480px) {
#page {width:90%;}
}
@media screen and (min-width:720px) {
#page {width:75%;}
}
@media screen and (min-width:1440px) {
#page {width:60%;}
}

In the example above, any screen size that’s bigger than 1440px will have page width of 60%. A screen size of between 720px and 1440px will display a page width of 75%. Any screen size smaller than 480px will display a page width of 90%.