Vue.js “Levels”

Summary of 4 main usage levels of Vue.js from basic to more advanced

Basic vs. Advanced

“Basic” = good for integrating Vue within existing apps using other frameworks such as Angular.js. (Great for gradually migrating legacy apps to Vue.)

“Advanced” = good for brand new web apps being built from scratch

Requirements for Usage:

  • Basic: link to vue.js library script
  • Advanced: Webpack or similar build tool is required in addition to vue.js library

Levels

Level 1: Directives (basic)

Very similar to a basic Angular 1 app. “Directives” are used as special attributes within HTML tags to render content, etc. (No need to use components.)

(Level 1 can be used just on its own for simple apps but would normally be combined with the other “levels”.)

Example:

<!-- In HTML: -->
<div id=”app”>
    <ul>
        <li v-for=”item in items”>{{item.text}}</li>
    </ul>
</div>

Level 2: String Components (basic)

Components are defined as a string within a JS file then used as a custom tag within HTML. (ES6 template literals can be used for nicer formatting.)

Example:

// in JS:
Vue.component('alert-component', {
    template: '<div class="alert"><p>This is an alert!</p></div>'
});

<!-- in HTML: -->
<alert-component></alert-component>

Level 3: Template Components (basic)

Components are defined using “template” tags within the HTML file where they are used. Data and methods are defined in a separate JS file. (Component templates can be referenced as an HTML partial for use within multiple page templates. Best Practice: Use dash in component tag names to follow web component practices.)

NOTE: Levels 2 & 3 are basically alternate ways of doing the same thing.

Example:

<!-- in HTML (at top outside of "#app"): -->
<template id="alert"></span>
    <div class="alert"><p>Hello!</p></div>
</template>

<div id="app">
    <alert-component></alert-component>
    other content ...
</div>

// in JS:
Vue.component('alert-component', {
    template: '#alert'
});

Level 4: Single File Components (advanced)

HTML template, JS code, and any custom styles are included in “component.vue” files for each component.

NOTE: Level 4 is also an alternate way of doing components somewhat similar to levels 2 & 3 but has extra dependencies.

Example:

<!-- in “mycomponent.vue” -->
<template>
    <div class="alert"><p>This is an alert!</p></div>
</template>

<script>
    // define methods, etc. used by component
    export default {};
</script>

<style lang="scss" scoped>
    /* scoped component styles (optional) */
</style>

Responsive HTML Email Layouts

Things to be aware of

  • No retina images:

    The majority of email clients don’t support CSS for resizing background images.

    (Some email clients also ignore img tag width and height, which makes it unsafe to include retina size images in the html.)

    Reference: www.campaignmonitor.com/resources/will-it-work/guidelines/

  • No media query support / responsive styles in Gmail:

    Gmail does not support style tags. = Responsive styles using media query will not work.

    (Inline styles on each HTML element are also required for this reason.)

  • Media query / responsive support is spotty in general:

    Even for email clients that do support style tags, not all support media queries.

    BEWARE: The meta viewport tag causes emails to render as blank in Blackberry.

Workarounds

  • Make layouts flexible / fluid.
  • Design for lowest common denominator first.
  • Use media queries only as an enhancement; do not rely upon them.
  • Use “inline-block” layout to create a more fluid semi-responsive layout instead of media queries. (Inline block elements will line up if there is room, otherwise they will wrap.)

References

CSS support for email clients:
www.campaignmonitor.com/css/

Media query support:
www.campaignmonitor.com/guides/mobile/

Scaling CSS for Large Web Sites

This is a PowerPoint presentation for a talk I gave to Fandor as an outside CSS expert at the invitation of their senior product manager. It summarizes recommendations for methodologies and tools useful in writing, organizing and maintaining CSS code. (Fandor afterwards ended up implementing several of my recommendations.)

Scaling CSS for Large Web Sites

Easy Responsive Design: Thumbnail List

Create a list of thumbnail images that re-sizes according to screen width. Uses simple semantic HTML markup together with a bit of CSS3. Media queries can be used as a further enhancement to this technique.

Works with modern browsers including IE8+

HTML:

<ul class="thumbnail-list">
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
</ul>

CSS:

.thumbnail-list {
	/* remove default list styles */
	list-style: none;
	margin: 0;
	padding: 0;
	/* remove spaces between li tags*/
	font-size: 0;
}

.thumbnail-list li {
	display: inline-block;
	vertical-align: top;
	width: 33.333%;
	padding: 2%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.thumbnail-list img {
	display: block;
	width: 100%;
}

How it works

The first step to styling the unordered list (ul) is to remove default list styles. (If you are already including a CSS reset you can skip this part.) The thumbnail list items (li tags) which contain the images are lined up by displaying them as inline-blocks. Change the width to alter how many items line up in a row. Padding is used to space out the images. (This value can also be changed according to your preferences.) Finally, the CSS3 style “box-sizing” is set to “border-box” to prevent the padding from being added to the total width of the list items. (This allows the images to be spaced out evenly.)

Besides the CSS3 “border-box” style, the final key to making the design responsive is to set the image width to 100%. This ensures that the images always shrink and expand to occupy the full available width inside the li tags they are wrapped width. One disadvantage to making the width 100% is that the images can grow larger than the original sizes which may make them look pixelated. If you want to prevent this you can change “width” to “max-width”. This will still shrink images to fit smaller screens but will not expand them beyond their original size. (Setting the images to “display: block” just removes line-spacing so images will be evenly spaced vertically.)

Optional enhancement using Media Queries

Use media queries to change the number of thumbnails displayed in a row depending on screen orientation or width. Here’s an example of how you can customize the display to show more images in a row for the landscape view of mobile devices such as iPhone and Android.

Additional Optional CSS:

/* Landscape */
@media screen and (orientation:landscape) {
	/* show more in a row */
	.thumbnail-list li {
		width: 20%;
		padding: 2%;
	}
}

See it in action: http://www.webcodeshare.appspot.com/agx3ZWJjb2Rlc2hhcmVyDwsSB1dlYmNvZGUY0dwQDA

NOTE: This layout can actually be achieved without the CSS3 “border-box” style by using margins instead of padding to space apart list items and changing the value of the width + margin to equal the total space you want each item to occupy. For example to display 4 images in a row you would use: “width: 23%; margin: 1%;” which equals 25% in total since the margin gets added to both sides of the li tag.

CAVEAT: If you want to include text inside the li tags remember to set the font-size of the li to your desired value as by default it will inherit “font-size: 0” from the ul styles.