Elements & Extras


Posted on 12th August, by MakeDesign in Digital Illustration

image

Aside Title

Ut enim ad minim veniam, quis nisi ut aliquip ex ea commodo consequat. Duis aud est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

While custom control panels and plugins are great, one of the strongest points of SideWinder is it’s meticulous attention to details in the area of typography. Every major type element has been addressed; You can even change both the Title Fonts and Body Fonts with the flip of a switch in the dashboard; Heck, you can even disable the title-font-replacement if you feeling like straight forward web-fonts instead of the flashy new stuff.

Buttons

Button Button Button Button Button Button Button
Flexible Grid

The theme comes pre-packaged with a very special version of the Mido Font, complete with ALL characters (including the funky stuff like $^*#@). That’s not all though, you can quickly switch to one of the other 10 fonts included… or turn font-replacement off altogether.

Custom Body Fonts

This brand new option in the control panel allows you to quickly flip between a “Serif” and a “Sans-Serif” font stack so that you have exactly what you need for your project. Additional tweaks can be made easily using a little CSS and the Firebug plugin if you so choose.


Superquotes

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic?

Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites:


Standard Blockquotes

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.

Unordered List

  • List Item
  • List Item
    • List Item
    • List Item
    • List Item
    • List Item
  • List Item
  • List Item

Ordered List

  1. List Item
  2. List Item
    1. List Item
    2. List Item
    3. List Item
    4. List Item
  3. List Item
  4. List Item

With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him”.

Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call “information design”. So to speak, information designers nowadays do the job that typographers did 30 years ago:


Mobile-Friendly Tabbed Content

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus, magna vitae adipiscing facilisis, sem urna pretium massa, ut interdum lorem lectus ut odio. Ut quis mauris vel nulla rhoncus feugiat. Sed lorem risus, pellentesque sit amet pulvinar sit amet, scelerisque in ligula. Aenean vestibulum velit eget massa rutrum vehicula. Ut eget eros orci. Fusce eget venenatis mi. Quisque iaculis volutpat quam, sed tristique leo rutrum at. Nullam at massa id lacus sollicitudin bibendum. Suspendisse molestie ipsum cursus purus bibendum et gravida ipsum ornare.

    In hac habitasse platea dictumst. Phasellus iaculis arcu aliquet urna suscipit et fringilla dui mattis. Nullam tortor tortor, tincidunt sed lacinia id, ornare nec sapien. Pellentesque scelerisque pharetra ipsum eget pellentesque. Nam imperdiet est vel dolor porta eu accumsan ligula vulputate. Ut volutpat vehicula ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non vestibulum diam. Donec dignissim, nunc eget convallis pulvinar, turpis lorem fermentum mi, quis cursus metus lacus nec odio. Fusce in nisi a felis euismod blandit convallis sit amet ligula. Nullam vulputate placerat dapibus. Quisque suscipit risus sit amet est placerat adipiscing. Aenean lorem enim, mattis nec rhoncus a, accumsan ac augue.

    Quisque feugiat massa mattis sapien bibendum commodo. Cras at laoreet felis. Ut posuere consequat sem, sed ullamcorper tortor vestibulum at. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec posuere condimentum ante, et euismod erat laoreet eget. Integer aliquet magna ac erat suscipit eget malesuada nisi ultrices. Mauris sollicitudin commodo augue, sed lobortis sapien porttitor ac. Nam nulla dui, condimentum eu mollis quis, ultricies in dolor. Morbi ut velit sem.

  • The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
  • These tabs work like a charm, even in mobile environments... sweeeet!

Form Elements

Lorem Ipsum
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum