Trident Design

Tag: responsive design

  • Twitter Bootstrap – Complete Responsive Front End Framework

    Twitter Bootstrap – Complete Responsive Front End Framework

    What started as an internal projects from two Twitter employees, it evolved to a complete framework used by countless designers and developers all over the world. Currently at version 2.3.2 and with a brand new refactoring coming up with version 3.0, Bootstrap has everything one needs to put together a functional website in no time.

    The entire structure is based on several interlocked modules:

    • a grid system (available in both fixed and fluid flavors), that degrades responsively for devices like tablets and smartphones, allowing ones website to be viewed by an even broader range of visitors. 
    • a basic CSS module, outlining standard typography, the display of list, tables, form elements and images, not to mention the included set of glyph icons.
    • a set of complex interface components, like navbars, dropdowns, menus, progress bars and many others, powered by a jQuery-based library, easy to deploy, use and modify as needed.

    Everything is very easy to customize right before downloading the framework, via the customization page. Here one can modify all possible parameters, like size of the grid system, colors and fonts, together with many other variables. Another alternatives would be to download a ready-made theme from one of the many websites (such as Bootswatch).

    Everything is backed up by a comprehensive and easy to use documentation. And if something is missing, there are so many tutorials, as well as a large community of users that can help you whenever you get stuck.

    [notification type=”information”]Licence: Apache License v2.0[/notification]

     

    [button color=”green” link=”http://www.getbootstrap.com/“]Start developing with Twitter Bootstrap[/button]
  • This is Responsive – a collection of patterns, modules and resources

    This is Responsive – a collection of patterns, modules and resources

    “This is Responsive” is a project initiated, developed and maintained by Brad Frost and Pon Katerra. They compiled a repository of design patterns and code modules essential for responsive web design. The website also contains a catalogue of resources, like articles and tutorials (from novice to master level), style guides, design tools, development techniques. All in all, it is one of the most comprehensive points to start ones education in the mastery of responsive web design.

    [button color=”green” link=”http://bradfrost.github.com/this-is-responsive/index.html”]Visit “This is Responsive” Repository[/button]

  • Responsive Web Design Interactive Guide

    Responsive Web Design Interactive Guide

    In a surprising twist, Template Monster, the (in)famous template provider, put together the most complete, interesting and interactive guide to the field of Responsive Web Design. Shaped like a children’s game, you can encounter glossary, blog articles, free PDF books, the official position of Google as well as many tutorials, plugins, tools and ready-made templates.

    [button color=”green” link=”http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php”]View the Interactive Guide[/button]

  • Gridpack – the responsive grid generator

    Gridpack – the responsive grid generator

    Gridpack is a free tool from Erskine Design that allows one to build a grid set for a responsive website. The application allows one to set breakpoints and to change the number of columns, size of gutter and padding for each breakpoint interval. The final result can then be exported to code. The package contains CSS, LESS and SCSS stylesheets, PNG images and a javascript snippet that allows one to overlay the PNG files over the web page with a simple key stroke.

    [button color=”green” link=”http://gridpak.com/”]Use Gridpack[/button]