Structure

There are a lot of helpful tools available for creating some standard menus. To use them, make sure to create a nav-element. Inside this element, include the links-element and refer to an object of links in the controller in the menu-attribute. The object should include a property called links, which is an array of the links to include in the menu. Each link should have a title and a href, which is what to display and where to go. Optional is to include a subMenu, which should be another object containing the property links and structured in the same way. The original object can also have the property toggle, which determines whether submenus should be opened on hover or on clicking.

<nav ng-switch-when="horizontal" class="horizontal"> <links menu="menu"></links> </nav>

menu = { toggle: true, links: [ {name: 'Home', href: 'index.html', subMenu: [ {name: 'About', href: '#about' } ]} ] };

Styling

To get different styles on your navigation you can simply add classes to your nav-element. Use horizontal or vertical to get different kinds of menus, and combine them with fixed to get a menu constantly on screen. On the vertical menu you can also add the class right for it to appear on the right side instead.

Snapping

Use the attribute snap-to-top on an element to make it stick to the top of the window once you scroll past it. Also add keep-pos if you need to keep it in place.

Hamburger

To create a hamburger-menu, where the menu is obscured by an icon until clicked, simply surround the links-element with a hamburger-element.

Examples

Unordered lists

Ordered lists

Inputs and Textareas are created with the <form-section>-element. You need to define whether it's an input or textarea you want with the field-attribute. You can use most of the attributes you normally would on an their respective tags, such as type, disabled or placeholder. You can also use most of the Angular-specific attributes for inputs, for example ng-model or validation. Note that validation will only work if your input is inside of a form-element with a name-attribute on it, or an element with the ng-form-attribute. Other attributes you can use are:

• field: Important for the directive to work. 'Input' or 'Textarea' for different elements.
• label: What you want the label to say.
• desc: If you want additional text under the label, for example detailing how the user should answer.
• grid: True or false. Display the inputs and their labels next to instead of on top of each other.
• id: Needed for label functionality.
• icon: Which icon to add to the right side of the input.

To make styling of these elements possible in the first place some CSS "hacks" are required. It is therefore recommended to start with these predefined directives and style them on your own from there if required. Instead of creating input-elements with different types you can now use the <radio-button> and <checkbox> elements. You can use the checked and disabled-attributes on these elements as you normally would, and they also work with ng-model.

• id: Needs to be provided in order for the buttons to work. Important to use a unique ID for the element.
• label: What you want the label to say.

You can use either regular select-elements (to the right) or the custom ones built for this Framework. Instead of select, you use the <dropdown>-element. The dropdown-element simulates a menu through lists, which allows for extensive styling and looks the same across different browsers, but it also contains a hidden regular select with all the values you might need for a form. You can use multiple or disabled as on a regular select-element.

• options: Must be provided to render anything. Should be an array of objects. The name-property is what will be displayed to the user.

Colored Words

This class adds a span element around every word within it. Be sure to use it only when the element contains nothing but text. Each span gets the class color-span, found in _helpers.scss and can be styled through that.

Use colored-words to get this effect

Image Orientation

color-bg

Adds a background color to your element and calculates a readable text color for it. Supply the $color.

circle

Makes the element a circle. You can specify $width and $height, but if you don't the circle will be responsive and take up the width of the parent.

Media Queries

imageArrow

If you're looking to make an inverse arrow please use the colorArrow mixin. However, if you are looking to create an arrow from a container with a background image, this is the mixin you should use. It's not as flexible and should not be included in a pseudo-class, it should rather be included in the containing element itself. Currently the arrow can only appear in the middle.

• $direction:Can be set to up, down, left or right. Defaults to down.
• $bg: The background of the container to give a transparent effect. Defaults to the theme's background color.
• $size: Size of the arrow. Defaults to 15px.

slant

To get a fully slanted container include the slant-mixin. Insert your content into a div with the class content inside of your container for the content not to skew. To automatically surround everything within the container with the content-class, add the class slanted to your container. You can include the mixin in a class called slanted to make it simple.

• $direction: Can be set to x or y. Defaults to y.
• $deg: How many degrees to slant the container. Provided in pure numbers, not degrees. Defaults to 2.

slantEdge

To add a skewed edge in a solid color, include slantEdge in a pseudo class of your container, either before or after. This allows you to combine up to two different edges per element. The container needs to have position:relative.

• $edge: Can be set to top, bottom, left or right. Defaults to top.
• $deg: How many degrees to slant the edge. Provided in pure numbers, not degrees. Defaults to 2 and must be bigger than 1.
• $color: Which color the added slant should appear in. Defaults to the parent element's background color.
• $reverse: Can be set to true or false. Determines which way to slant the edge. Defaults to false.

slantImage

To add a skewed edge to a container with a background image, include slantImage directly in the container. Since some rules for the container are very important, the pseudo-class is instead determined by the parameters you enter.

• $edge: Can be set to top, bottom, left or right. Defaults to top.
• $deg: How many degrees to slant the edge. Provided in pure numbers, not degrees. Defaults to 5.
• $bg: The color behind the container to simulate transparency. Defaults to the theme's background color.
• $pseudo: Can be set to before or after. Determines which pseudo-element should contain the edge. Defaults to before.
• $reverse: Can be set to true or false. Determines which way to slant the edge. Defaults to false.

fade

To add a fade to an edge, include fade.

• $edge: Can be set to top, bottom, left or right. Defaults to top.
• $size: How big the fade should be. Defaults to 30px.
• $blur: How blurred the fade should be. Defaults to 10px.
• $color: Which color the edge should fade into. Defaults to the theme's background color.

headings

Style several headings at once using the headings-mixin. Specify from and to which number the rules should apply as parameters. @include headings(1, 3){color:red;} for example would apply red to h1 through h3.

• $from: From which heading the rules should apply. Defaults to 1.
• $to: From which heading the rules should stop applying. Defaults to 6.

lineThrough

Include lineThrough to get the effect of a line running behind your text. This will only work for text on one line.

• $left: How far the left side of the line should go. Defaults to 45%.
• $right: How far the right side of the line should go. Defaults to 45%.
• $color: Which color the line should have. Defaults to $blend-color-low.
• $thickness: How thick the line should be. Provided in pure numbers, not sizes. Defaults to 1.
• $style: Which border style the line should have. Solid, dashed, dotted, ridge, groove and double work. Defaults to solid.

Line

Line-left

Line-right