intuio.at

awesomeness.intuio.at

Awesomeness - Navigation

http://www.awesomeness.intuio.at/navigation

If you got a lot of navigation on your site or application, the flyout navigation component is for you. As seen on many mobile apps, this is a responsive version which perfectly adapts to larger screens by becoming a sidebar and, if so desired, even a top bar. A lot of applications rely on tabbed navigation patterns. Of course, they are not so easily represented on mobile devices but we have a couple of different options for you. Surely one of them will fit your app. Established in 2008, intuio is a cons...

awesomeness.intuio.at

Awesomeness - Navigation - Pagination

http://www.awesomeness.intuio.at/navigation/pagination.html

Very simple pagination component for search result and similar pages. Import "base"; @import "imports/modules/button"; @import "imports/modules/pagination";. Awesomeness is a mobile-first framework that uses sass and compass to allow building fast responsive websites. We designed this framework for modern browsers and include many helpful modules that use current technologies to make styling your own site or application fun and easy. Awesomeness is available under the MIT license.

awesomeness.intuio.at

Awesomeness - Navigation - Tabs

http://www.awesomeness.intuio.at/navigation/tabs.html

Horizontal Tabs / Collapsing Menu. Usually tabs convert to accordions on small screens. This component takes a different approach and converts to a collapsing menu, making it easy to quickly browse through tabs without losing sight of the tab entries themselves. You'd want to use this when users need to switch between tabs a lot. First discovered by designer Richard Rutter. This one rule immediately provides an incredibly handy constraint for every image in our document. Now, our. Directive forces the im...

awesomeness.intuio.at

Awesomeness - Components

http://www.awesomeness.intuio.at/components

Accordions are not only classical Viennese instruments. They can also help you make sense of your unordered nested lists. Pretty awesome, don't you think? Image sliders can be quite difficult to navigate. We know this and so we tried to come up with a solution that is unobtrusive and natively usable on all of your devices. What's even cooler than a box? A box with a nice heading! To immediately indicate the purpose of your box convert it into a panel and dazzle your users. Sometimes you just have to tell...

awesomeness.intuio.at

Awesomeness - Typography

http://www.awesomeness.intuio.at/typography

Headings are important as they can tell you what to expect below. Smart, huh? Can also be used to efficiently structure content. H1 Heading 1 /h1 h2 Heading 2 /h2 h3 Heading 3 /h3 h4 Heading 4 /h4. The usual crap that nobody reads. Reason enough to dedicate a whole section to it. Flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Hint: using tables for layout kills kittens! Full of wonderful items.

awesomeness.intuio.at

Awesomeness - Getting Started

http://www.awesomeness.intuio.at/getting-started

What you'll need to get going. Basic understanding of how to use CSS modules. Basic understanding of how to use dynamic JavaScript modules. Awesomeness provides a lot of cool tools but you'll have to connect the dots yourself. We'll try to provide all the necessary information on this page but it might be useful to read some documentation and tutorials related to each tool (i. e. Sass/Compass, Susy, RequireJS, etc.). Where you can find an installer and further instructions on how to proceed. Instantly wo...

awesomeness.intuio.at

Awesomeness - Navigation - Wizard

http://www.awesomeness.intuio.at/navigation/wizard.html

This horizontal wizard is the perfect responsive component for shop checkout or other multi-step processes. Import "base"; @import "imports/modules/wizard-h";. Div class=l-wizard-h ul class=wizard-h li class=l-wizard-h-step wizard-h step- previous i class=fa fa-check /i span First Step /span /li li class=l-wizard-h-step wizard-h step- current i class=fa fa-user /i span Second Step /span /li li class=l-wizard-h-step wizard-h step i class=fa fa-file-text-o /i span Third Step /span /li li class=l-wizard-h-s...

awesomeness.intuio.at

Awesomeness - Forms - Selection

http://www.awesomeness.intuio.at/forms/selection.html

Checkboxes Inside a Form Group. Form groups can be used to visually group several checkboxes. Use the class. As a wrapper. The checkboxes themeselves consist of a. Element for the checkbox and a. Element for the label. Hi, I'm a Checkbox. Please check me too! Import "base"; @import "imports/modules/forms";. Label /div /div /div. Checkboxes that belong to input fields can be grouped with the. Send me an invitation. Import "base"; @import "imports/modules/forms";. Element as a wrapper. Div class=form-compo...

awesomeness.intuio.at

Awesomeness - Forms - Buttons

http://www.awesomeness.intuio.at/forms/buttons.html

Buttons can be used in many different places. They are useful for forms or to indicate important actions. You can use them by adding the. To your links. You can give them even more meaning by using a predefined btn class like. Import "base"; @import "imports/modules/button";. Buttons can also come in different sizes. To apply another button sizes just add the classes. Import "base"; @import "imports/modules/button";. And giving each Button the class. Import "base"; @import "imports/modules/button";.

awesomeness.intuio.at

Awesomeness - Forms

http://www.awesomeness.intuio.at/forms

Come and get yourself some awesome, shiny buttons because, let's be honest: people love buttons. Click them, touch them, lick them — They're optimized for each and every usecase and they even come in various colors, sizes and appearances. Whether it be apples or pears, your users will have to choose and select at some point when interacting with your lovely web application. But don't be afraid, we got you covered with natural beauties: native checkboxes, radio buttons and select lists. Awesomeness is a m...