Trident Design

Tag: grid

  • 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]
  • 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]

  • Toast – a simple CSS Framework

    Toast – a simple CSS Framework

    Toast is a very simple CSS Framework. It offers a global reset and a 12 column responsive grid. Due to the use of inline-block display for the grid elements, there are no floats and there is need of no clearfixes. The only downside is that it does not support older browsers like IE6 and IE7. All other modern browsers (including IE8+) are supported.

    [button color=”green” link=”http://daneden.me/toast/”]Get Toast[/button]