Trident Design

Tag: CSS3

  • 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]
  • Free open source icon font hosting service: We Love Icon Fonts

    Free open source icon font hosting service: We Love Icon Fonts

    When Google Webfonts was launched, it marked the beginning of a revolution in web design. For the first time it was so easy to use some other fonts than Arial, Verdana and Helvetica. Recently the new craze has been icon fonts: no more sprites of icons, no more multiple size images for high density screens. Just vector glyphs, that can be scaled indefinitely, that you can apply styles on. But still you had to jump through hoops by hosting all the file formats on your server and set up the proper way to add them into page.

    Well, no more. A talented and well intended guy, called Tim Pietrusky, gave us all an early Christmas present: a free, open source icon font hosting solution. A Google Webfonts for icon fonts. It’s still in beta, you can only add fonts to a collection and use them in your site. But with the proper support from the community, it could become the next best thing for web design since @font-face.

    [notification type=”information”]Licence: free for personal and commercial projects[/notification]

     

    [button color=”green” link=”http://weloveiconfonts.com/”]Go to We Love Font Icons[/button]

  • HTML5/CSS3 User Interface Kit

    HTML5/CSS3 User Interface Kit

    Today’s resource comes from Vandeley Design in the shape of a UI Kit. However, unlike many of the resources presented before, this one is not in PSD format, but directly coded using HTML5 and CSS3. It even includes a clever mechanism to create custom checkboxes.

    [notification type=”information”]Licence: free for personal and commercial projects[/notification]

     

    [button color=”green” link=”http://vandelaydesign.com/blog/free-resources/html5-css3-ui/”]Get the HTML5/CSS3 User Interface Kit [/button]

  • Modernizr

    Modernizr

    Monernizr is what people in the field call a “polyfill” – a javascript library that detects what your browser is capable of and allows you to take special actions if necessary to compensate for the lack of support for the latest HTML5 and CSS3 features.

    [button color=”green” link=”http://modernizr.com/”]Get going with Modernizr[/button]