Introduction

SCRUD is short for Select, Create, Read, Update and Delete. These are the general actions that any program will perform when working with databases. Yes, there are plenty of ORM applications ( http://en.wikipedia.org/wiki/Object-relational_mapping ) out there that can replace this, but as a general introduction to abstract or generic classes and general development I still think this is worth a read.

I should also explain why I have used an abstract class instead of an interface. It’s quiet simple really; I wanted the class to have optional/common functionality and state. You don’t always want to perform all SCRUD actions, and any data mapper should always have a connection object. This connection object can be shared, initialized outside of the class or be part of a transaction. This combined with the generic class gives us greater flexibility and utility when using the data mapper.

I’ll expand on this and add more functionality on this in the 2nd part of the tutorial next week.

Generic Classes http://msdn.microsoft.com/en-us/library/sz6zd40f(v=vs.110).aspx Abstract http://msdn.microsoft.com/en-us/library/sf985hc5(v=vs.110).aspx

Step 1: Creating our base class, IDataMapper

We know the methods we want to define (SCRUD), but we also know that we’ll need a database connection. We also do not know yet, what type of data we will be using.

To define a generic class you declare the class as normal and then append <T> e.g. IDataMapper<T>

Now when we are implementing our main class, we can define for each implementation the type of object we will be dealing with.

using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Coding.Exercise { /// <summary> /// Abstract/Interface class common to all data mappers /// </summary> /// <typeparam name="T">The type of object the mapper is for</typeparam> public abstract class IDataMapper<T> { /// <summary> /// A .Net database connection (SQL Server, MySql, Oracle, etc.... ) /// </summary> public IDbConnection Connection { get; private set; } /// <summary> /// Reads configuration from the app.config and initializes the data mapper /// </summary> /// <param name="connection">A .net connection that implements IDbConnection</param> public IDataMapper(IDbConnection...

HTML5 introduced two new elements with seemingly identical roles

<nav> ( http://www.w3.org/TR/html-markup/nav.html ) <menu> (http://www.w3.org/TR/html5/interactive-elements.html#the-menu-element )

Their use is actually quite different and you’re unlikely to see both used at the same time. The <nav> element is actually for grouping <a> elements for navigating a website, and the <menu> element is for grouping both <a>, <input>, <button> and the new <command> elements. These elements can be grouped using <li> elements, just like a <ul> or <ol>!

Why the difference?

Simply put the <menu> element is for web applications, not websites. It is designed to handle interactive elements. When interacting with a menu you are triggering an action or event on the current screen. Think of it like the commands copy and paste or file open or close, they perform a function but you never leave the screen you’re on.

Menus can have one of the following types:

context toolbar list (this is the default value)

<menu type="toolbar" label="Main"> <li> <menu label="File"> <button type="button" onclick="newFile();">New</button> <button type="button" onclick="openFile();">Open</button> <button type="button" onclick="closeFile();">Close</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="undo();">Undo</button> <button type="button" onclick="redo();">Redo</button> <button type="button" onclick="copy();">Copy</button> <button type="button" onclick="paste();">Paste</button> </menu> </li> </menu>

*Context menu items are not available to the user until the menu is activated by the user (just like right-click menus)

HTML5 is trying to answer more than what the future of websites; it is trying to provide a standard cross platform way of designing and building mobile applications. To do this it is introducing new concepts and differentiating between similar, but subtly different functions.

ABOUT THE AUTHOR A battle hardened software developer with a mixed and colorful background,...

In this tutorial we’ll be dealing with some basic HTML5 additions and their uses. We’ll also be creating a simple animated gallery using just CSS3 and HTML5 In making the gallery, we’ll also try and deal with responsiveness and scaling the gallery for different resolutions and devices.

Throughout this tutorial JavaScript will not be used!

Step 1: Understanding the HTML5 additions

http://www.w3.org/TR/html51/

There are lots of new tags in HTML5; today we’ll be dealing with the some of the most common ones.

section article header and hgroup footer nav figure and figcaption

It should also be noted that DOCTYPE has been simplified, now there is only:

<!DOCTYPE HTML>

The two most commonly confused tags are section and article. Put simply a section enables you to group logic items together, in this case articles. The confusion arises because an article can also have sections. An example of this would be a news site. The news site has several sections like current affairs, political and science. Each of these sections provides an overall grouping of the news articles inside. Something like this:

<section id=”current-affairs”> <article id=”news-item-1”> </article> <article id=”news-item-2”> </article> </section> <section id=”science”> <article id=”news-item-3”> </article> <article id=”news-item-4”> </article> </section>

As I mentioned above, articles can have sections too. Think of these as an introduction, main text and a conclusion, like this:

<section id=”current-affairs”> <article id=”news-item-1”> <section class=”introduction”> <p>This is the introduction</p> </section> <section class=”body”> <p>This is the body of the news item</p> </section> <section class=”conclusion”> <p>This is the conclusion</p> </section> </article> </section>...

There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don’t know where to start? Don’t worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML, CSS to jQuery and everything else you could possibly imagine.

#1. W3Schools

Your first stop on the quest for learning HTML and CSS should really be W3Schools, if you have never heard of this site then you are missing out on some great tutorials. At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.

#2. Webdesigntuts+

Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. They publish tutorials that not only produce great results and interfaces, but also explain the techniques behind them in a friendly, approachable manner.

#3. netmagazine.com

.net magazine, is stuffed with great tutorials on pretty much anything you can imagine, need a tutorial on HTML, CSS, JavaScript, jQuery, then they are your go to guys. Even though some of their tutorials are aimed at intermediate to advanced web designers, the offer is really great.

#4.  Lynda.com

Lynda.com offers a wide range of video-based tutorials that can teach you pretty much anything about web design, as well as pretty much everything else for a monthly fee. An authoritative source of web design training videos, you can get a taster by checking out its free tutorials.

#5. Smashing Magazine

Smashing Magazine is really a fantastic resource of tutorials on all aspects of web design. Similar to .Net magazine, the lessons are aimed at the intermediate to advanced end of the web design spectrum.

#6. Quackit

Quackit teaches beginners how to create websites. According to the website they start off slowly, teaching you the basics such as HTML and CSS. Then slowly they introduce you to more advanced topics so that you can add more features to your website.

#7. Codecademy

Codecademy describes itself as the ‘easiest way to learn how to code’ and has established a great reputation for itself within the web design community. Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We’re determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

#8. Treehouse

Treehouse is a video-based service, where you can learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

#9. Mozilla School of Webcraft

In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web. The site offers a host of free web design training courses, including ones in CSS, PHP, and HTML. What’s great is that they also offer courses in Spanish.

#10.HTML Dog

What makes HTML Dog different to most other HTML guides and tutorials out there is its focus on best practices. “Web Standards” are at its heart, which, to cut a long story short, is all about using technologies, such as HTML and CSS, in the right way.

#11. CSS-Tricks

CSS-Tricks actually a blog run by web designer Chris Coyier. He covers the latest CSS techniques. Recently it has become immensely popular among professional web designers. What makes this site so great is that it is constantly updated source of tips, tutorials, and video lessons, best of all its Free.

#12. Learncss.tutsplus

30 Days to Learn HTML & CSS was created because they believe everyone has the right to learn how to build wonderful things on the web. The course is 100% free and always will be, no strings attached. It is instructed by veteran web developer and trainer Jeffrey Way, and brought to you by Tuts+ Premium.

#13. Udacity

Whether you want to learn how to build a simple web site or something as complex as your own search engine Udacity offers everything. With Udacity you can learn a whole bunch of new and interesting things, and best of all the training is absolutely free and is led by expert professors from Stanford and the University of Virginia.

#14. HTML.net

HTML.net provides guidance and help about designing and developing websites. They offer tutorials on everything from HTML, CSS, PHP to JavaScript, their motto is they will get you up and running in less than an hour.

#15. About.com

About.com has tutorials and how to guides on pretty much everything from changing a tire to changing a diaper, and of course they also have a plethora of different tutorials and guidelines for learning HTML and CSS online for free.

...

In this tutorial we will be creating a login form using only CSS3 and HTML5, we will be recreating Orman Clark’s Elegant Login Form.

We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements. Next week we will show you how to add a sign up page to your login form so be sure to check back.

Step 1: The HTML Markup

The first thing we will add is the HTML part, this part will create the actual login form, and will consist of a container, a form as well as some inputs.

<div id="container">        <form> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <div id="lower"> <input type="checkbox"><label for="checkbox">Keep me logged in</label> <input type="submit" value="Login"> </div><!--/ lower--> </form> </div>

If you entered the code above correctly then your login form should now look like this:

So now that we have gotten this far let’s start styling the different input areas, we will do that by adding the following code:

/* Basics */ html, body {    width: 100%;    height: 100%;    font-family: "Helvetica Neue", Helvetica, sans-serif;    color: #444;    -webkit-font-smoothing: antialiased;    background: #f0f0f0; }

If you added this correctly your login form should now look like this:

Step 2:  Positioning the Elements

Now that we have our actual login form created let us start with the styling of the form, the first thing we will do is specify the basics such as font color and so forth, then we will position our login form in the center of the page.

#container { position: fixed; width: 340px; height: 280px; top: 50%; left:...

As a developer I am always on the hunt for time saving resources, anything that can save me just a few minutes of time is a great help in an already hectic schedule. Compiled here is a list of 25 resources that are bound to make your life a little bit easier. I have added different CSS3 grid systems, as well as several code generators, whether you need a button or a pattern there should be something here for everyone, I have also added some font generators, if you are having problems with your code then you will find a code checker as well as other resources.  I hope some of these apps will be of use to you when you are building your next website. If you think we have forgotten any feel free to leave a comment below.

#1. Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

#2. Initializr

Initializr is here to kick-start the development of your new projects. It generates templates based on HTML5 Boilerplate by allowing you to choose which parts you want or don’t want from it. A responsive template has also been added to start from a basic design instead of a blank page.

#3. Button CSS3 UI

This new CSS3 Framework buttons is perfect for your websites, blogs and web projects. It’s now possible to integrate custom buttons easy to use and understand.

#4. Bootstrap v.2.0 from Twitter

A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

#5. Normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

#6. Adobe Edge Free Web Fonts

Edge Web Fonts gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. The fonts are served by Typekit, so you can be sure of high performance and stability. Plus, it’s free!

#7. dabblet – A Playground for Testing CSS and HTML

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.

#8. CSS3 Shapes

CSS3 Shapes provide a list of mainly geometric shapes you can perform using CSS3. Whether you need a circle, triangle or some other shape I am sure you will find something useful here.

#9. Mobile Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

#10. CSS3 Patterns Gallery

CSS3 Patterns Gallery offers exactly what the title says, a large selection of  CSS3 patterns. On the front page you will see all the different patterns, then when you click on one it will give you the code needed to recreate this pattern on your site.

#11. Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

#12. The Semantic Grid System

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive? Runs on LESS, SCSS, or Stylus.

#13. Moqups – HTML5 App For Creating Wireframes

Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them. If you ever wanted to create a wireframe of a website then this is the program that will help you do exactly that.

#14. Sencha CSS3 Animator & HTML5 Animations

Captivate your audience. Engage your customers. Standards-based CSS3 animation has never been so easy. With the power of Sencha Animator, use CSS3 animations to build the next generation rich-media ads. Animate text and images with smooth transitions, design buttons with gradients, and embed analytics. All backed by the strength of web standards. It does cost $99 but it is really worth it.

#15. Css2Less – CSS to LessCSS converter

This tool has been thought for front-end developers who are tired of working with CSS. Here you can quickly convert your old CSS files to fresh new LESS files. As easy as copy/paste. You can also convert files locally by install the css2less RubyGems.

#16. prefixMyCSS

You can now use powerful CSS3 techniques, and don’t waste your time writing each properties. First, write your code for your loved browser. Then, come here, paste your CSS code in the first block, and prefix! All vendor prefixes are added to your code. You can safely replace your old code.

#17. RWD Grid

rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).rwdgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens.

#18. Foundation

The most advanced responsive front-end framework in the world. Foundation is made by ZURB, a product design company in Campbell, California. They have more than 15 years of experience building web products, services and websites into this framework.

Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time.

#19. CSS Lint

CSS Lint helps point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

#20. Buzz

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It degrades silently on non-modern browsers.

#21. HTML Email Boilerplate

This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc

#22. Mozilla Thimble

Thimble makes it ridiculously simple to create your own web pages. Write and edit HTML and CSS right in your browser. Instantly preview your work. Then host and share your finished pages with a single click. Easy, huh?

#23. Fluid Baseline Grid

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.

#24. Sprite Cow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually. However, copying all the positions & sizes from graphics apps wasted a ton of my time, so the guys behind Sprite Cow made this!

#25. holmes.css

holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website. It has a simple implementation and a mostly unobtrusive effect on your page. Not recommended for live enviroments.

...

It seems as if the internet is filled with hundreds, if not thousands of jQuery plugins, sometimes it can be a little hard to keep track of all the new plugins, and therefore we have decided to bring you some of our favorite plugins, here is a list of 30 must see plugins. They cover all areas such as Form & Validation Plugins, Plugins for Responsive Layouts, as well as Web Typography Plugins, Animation Plugins and all sorts of other plugins. Do you think we have forgotten any plugins? If so then feel free to share them in the comments section.

#1. jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

#2. jQuery Validation Engine

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.

#3. Baseline

Baseline.js is a jQuery plugin that helps you to maintain vertical rhythm set by a typographic baseline, even when adding inline images with awkward sizes.

#4. kerning.js

CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.

Print designers have had it easy for way too long. This is 2012; the web has been around for over two decades, yet web designers don’t get full control over their typography? Forget that, use Kerning.js!

#5. Stellar.js

Parallax has never been easier. Add some simple data attributes to your markup, run $. stellar(). That’s all you need to get started.

#6. Responsive Measure

A jQuery plugin for generating a responsive ideal measure.

#7. Wookmark jQuery

This is a jQuery plugin for laying out a dynamic grid of elements.

#8. stickyMojo

stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE.

#9. ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft’s Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.

#10. jQuery URL Parser

An AMD compatible utility to parse urls and provide easy access to their attributes (such as the protocol, host, port etc), path segments, querystring parameters, fragment parameters and more. The core parser functionality is based on the Regex URI parser by Steven Levithan, and the query string parsing is handled by a modified version of node-querystring.

#11. BookBlock: A Content Flip Plugin

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.

#12. ddSlick

A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

#13. Lettering.js

A lightweight, easy to use Javascript <span> injector for radical Web Typography.

#14. imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

#15. mailcheck

The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.

#16.jQuery Tags Input

Magically convert a simple text input into a cool tag list with this jQuery plugin.

Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data – your form just sees a comma-delimited list of tags!

#17. Filtrify

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu.

Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.

#18. Quovolver

Quovolver is a jQuery plugin for revolving multiple testimonials or quotes in your document. Although, it can also be used to cycle through any group of elements.

#19. jQuery Credit Card Validator

jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detectedcredit card type and whether the number length and Luhn checksum are valid for the type of card.

#20. jQuery Panel Gallery 2.0

This jQuery plugin allow you to take a group of images and pass from one to the other in a smooth way adding some effects on it. You’re no longer are you limited to just panels to transition your images; now you have a whole slew of different effect to apply, with multiple ways to apply them

#21. Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

#22. gridster.js

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.

#23. equalize.js

The jQuery plugin for equalizing the height or width of elements. Equalize will accept any of the jQuery Dimension methods: height, outerHeight, innerHeight, width, outerWidth, innerWidth.

#24. HorizontalNav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

#25. jQuery Collapse

A lightweight (~1kb) jQuery plugin that enables expanding and collapsing content. This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.

#26. Style my Tooltips

Style-my-toolips does exactly what its title says: styles browser default tooltips. The javascript generated tooltip behaves and functions exactly like browser’s native tooltip, meaning it is always visible within the viewport and its position is relevant to cursor position.

#27. jQuery Complexify

Complexify is a jQuery plugin, so you will already need to have jQuery included on your page. Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

#28.  jQuery ScrollPath

It’s a plugin for defining custom scroll paths.  It uses canvas flavored syntax to draw lines and arcs. It comes with a custom scrollbar. Honestly this is probably one of my favorites!

#29. jQuery Mega Select List

The jQuery Mega Select List is a plugin that converts large select lists into a mega-menu style list of options. This plugin doesn’t affect your form, posting back the selected value as if the options were being selected in a normal select list.

#30.Freetile.js

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

...