Recently, there’s been a lot of talk about markdown as an alternate way to format text.

I decided to do a little research and see what all the talk was about and I was actually quite glad of what I found; markdown is simple markup language that makes it easier for writers to write good content for the web without having to worry about the HTML code in their articles.

The benefit of using markdown is that you can write substantially cleaner articles and it also makes it easier for anyone reading your articles to be able to read it, without actually opening the page in a browser.

How to write markdown

Writing markdown is the simplest thing you can imagine:

Bold and italic text

To create italic text you just need to surround the text by one star:

This is *italic text.*

Which will produce:

This is italic text.

And to create bold text you insert two stars:

And this is **bold text.**

Which will produce:

And this is bold text. 

Headings

To create headings in markdown all you need to is add a hash sign before your content. One hash sign is the equivalent of an <h1>, two means an <h2> and so on until <h6>:

# this is an heading 1
## this is an heading 2
### this is an heading 3
#### this is an heading 4
##### this is an heading 5
###### this is an heading 6

Paragraphs

Writing paragraphs is as simple as writing your text, and if you want to add another another paragraph you just need to press enter and in the next line a new paragraph will be added:

One paragraph

And here is another paragraph

Is the equivalent of:

<p>One paragraph</p>
<p>And here is another paragraph</p>

Blockquotes

To create blockquotes you need to add a angled bracket (>) before the text you want, like so:

> Somebody said this quote some years ago

Which is the same as:

<blockquote>
  <p>Somebody said this quote some years ago</p>
<blockquote>

Links

Creating links is very simlar to HTML, you first place the text you want the user to see inside square brackets and then place the link location inside a pair of parentheses:

[Webdesigner Depot](http://www.webdesignerdepot.com)

Which is the equivalent of:

<a href=”http://www.webdesignerdepot.com”>Webdesigner Depot</a>

Images

Images use the same basic syntax as links, but in images the text you place in square brackets will be the alt text and you also need to place an exclamation mark before everything to make markdown know that what you are writing is an image and not a link:

![My image](http://example.com/myimage.jpg)

Is the same as:

<img src=”http://example.com/myimage.jpg” alt=”My image” />

Unordered Lists

To create a simple unordered list you only need to create the list items, you don’t need to worry about opening and closing the list. All you need to do is to add a line break, then add an asterisk before each item:

* One list item
* Another list item
* And a third one

Is the equivalent of:

<ul>
<li>One list item</li>
<li>Another list item</li>
<li>And a third one</li>
</ul>

Ordered Lists

Like the unordered lists you only need to concern yourself with the actual list items, there’s no opening or closing. To use an ordered list you just need to use numbers instead of asterisks:

1 One list item
2 Another list item
3 And a third one

Is the equivalent of:

<ol>
<li>One list item</li>
<li>Another list item</li>
<li>And a third one</li>
</ol>

Conclusion

Markdown is a really good backup if you write articles for the web and you are not a savvy HTML developer, it really facilitates the creation of content for the web. There is even a WordPress Plugin that allows markdown in posts and comments and automatically converts it to HTML.

Have you learnt to use markdown? What benefits have you found over other forms of markup? Let us know in the comments.

Featured image/thumbnail, blogging image via Shutterstock.

eBook: Be Awesome at Online Business – only $9!

This individual will directly contribute to the toolchain and production pipeline for an upcoming Firaxis title, and work closely with the graphics and systems teams.

Interested candidates should submit a resume and a small C/C++ code sample.  

Required Coursework:    CMSC 341, 313, 331, 435, or equivalent , with strong GPA

Other majors will be considered depending on background.

Required skills:      Comfortable in C/C++.   

                                    Strong programming skills. 

                   Understands OO design and software engineering principles

Good communication and problem solving skills.  Able to work independently.

Preferred Skills:   

      Familiar with MSVC, Perforce and CMake.   

      Exposure to SQL, C#,  HLSL/GLSL, and flex/bison are pluses.

      Familiarity with adobe photoshop or AutoDesk 3DSMax are large pluses.

      Previous engineering experience (internship/co-op) is highly preferred.

Apply today through UMBCworks!

I recently wrote an article on creating a themable button set with Sass where I used a mixin to define all base styles, then a color value was passed as an argument when included in each theme.

Example:

@mixin btn-theme($btn-color) { ... }
    
    // Themes
    
    .purple {
       @include btn-theme($purple);
    }

The concept of mixins seems simple on the surface, but if we’re not careful, things can quickly get out of hand once our Sass starts to grow because they duplicate a lot of CSS. It’s essentially copying and pasting blocks of code.

Fortunately, in our case there’s really no duplicate code to be concerned about. Using a mixin for creating the themes is still an efficient approach––it generates a different output with every use because it’s dependent on the color argument.

View the full example in Codepen.

Things Can Be Better

I have other concerns about this approach:

• Every button element relies on two HTML classes: the general base style class and the more specific theme class.
• The theme classes are purely presentational.
• A number of unused CSS rules are being outputted.

<button class="purple btn">Start!</button>

So there is plenty of room for improvement, especially by taking advantage of two handy Sass features: @extend and placeholder selectors.

The Sass @extend Feature

The @extend directive allows one selector to inherit the styles of another selector. It prevents code bloat by grouping selectors that share the same styles into one rule.

Here’s a basic example:

.square {
       width: 200px;
       height: 200px;
       background-color: lightcoral;
    }
    .circle {
       @extend .square;
       border-radius: 50%;
    }

Will compile to:

.square, .circle {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
    }
    .circle {
      border-radius: 50%;
    }

It’s also possible for one selector to extend another selector that in turn extends a third:

.ellipse {
       @extend .circle;
       height: 120px;
    }

Compiles to:

.square, .circle, .ellipse {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
    }
    .circle, .ellipse {
      border-radius: 50%;
    }
    .ellipse {
      height: 120px;
    }

To break it down simply: one class can have all the styles of another class, as well as its own specific styles. View this in CodePen.

Putting @extend to Work

@extend can benefit us because our buttons can inherit everything in the .btn style block without having to explicitly state it in the markup.

In our btn-theme mixin, let’s extend the .btn class:

@mixin btn-theme($btn-color) {
       ... 
       @extend .btn;
    }

Now every .btn class can be removed from the markup because the theme class will always inherit its styles.

// Themes
    
    .purple {
       @include btn-theme($purple);  
       /* btn-theme mixin now inherits .btn styles */
    }
    ...

But we’re still left with the presentational classes in the markup––they don’t mean anything but arbitrary colors at this point.

<button class="purple">
       Button
    </button>
    <button class="blue">
       Button
    </button>

The New “Silent Class”

Sass 3.2 introduced a special feature called placeholder selectors. They’re also referred to as “silent classes” because they won’t appear in our CSS output unless we @extend them.

It’s usually better to extend a placeholder selector instead of a class selector, so let’s make our .btn class a silent class. This way it won’t “exist” in our CSS output until we’re ready to use it.

A silent class is defined by using a % in front of the selector name:

%btn  {
       ...
    }

We’ll also need to add the % when extended:

@mixin btn-theme($btn-color) {
       ... 
       @extend %btn;
    }

This is an extremely useful feature because we can now create an entire library of theme colors, but they won’t get created (or outputted) until we call them.

Creating a Theme Library

Let’s create a new partial in the “scss” folder called “_themes.scss,” which we’ll need to import into “style.scss.”

@import 'themes';

In “_themes.scss” we can now create placeholder selectors of various color options––as many as we want. Check out the ones I created.

Examples:

%darkorange {
       @include btn-theme(#FF8C00);	
    }
    %darkslategray {
       @include btn-theme(#2F4F4F);	
    }

Now we can give our HTML classes more meaningful names like:

<button class="btn-delete">
       Delete
    </button>
    
    <input type="submit" class="btn-submit">

If we need to change a color theme, we can reference one from our themes library by simply changing the extended silent class in _buttons.scss.

.btn-delete {
    	@extend %firebrick;
    }
    .btn-submit {
    	@extend %tomato;
    }

And because they are silent classes, if any are reused, they will be properly extended in the CSS.

Conclusion

This is a more viable approach because we’ve created our solution entirely in the CSS and not the markup. I created a GitHub repo containing all the example code we discussed –– take a look.

Have you used @extend or placeholder selectors in your project? Let us know in the comments below.

The post Extending Placeholder Selectors with Sass appeared first on Treehouse Blog.

QUAD*MANIA WEEK EVENTS

by Michelle Stefano