Trident Design

Category: Web Dev

  • Free Quality Bootstrap Themes from Black Tie

    Free Quality Bootstrap Themes from Black Tie

    Carlos Alvarez is one of those great guys that help the web go forward, by giving away free quality stuff. In this case we talk about free Bootstrap 3 themes, of premium quality, served under the name Black Tie. With new themes coming on a self-imposed schedule of bi-weekly updates, this is a resource worth watching.

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

     

    [button color=”green” link=”http://www.blacktie.co/”]Get your Black Tie Bootstrap 3 Themes now[/button]
  • BootstrapCDN – Content Delivery Network for Bootstrap resources

    BootstrapCDN – Content Delivery Network for Bootstrap resources

    Content Delivery Networks (CDNs) for widely used resources are a boost for the performance of websites. One such resource is (Twitter) Bootstrap – a widely used front end framework. Celebrating his first year of existence, the service provides reliable hosting not only for the framework itself (including the up-to-come version 3.0 RC1), but also associated products like Font Awesome and Bootswatch.

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

     

    [button color=”green” link=”http://www.bootstrapcdn.com/”]Start using BootstrapCDN now[/button]
  • 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]
  • Browser Hacks Collection

    Browser Hacks Collection

    It’s the night before the big launch and you still have not finished coding the website. One browser gives you trouble and there’s no time to refactor everything to prevent the problem from appearing in the first place. If only you could target the troublesome browser and feed him a specific rule that will account for the difference in rendering. This is the moment when Browser Hacks comes to the rescue. This website is a collection of proved and tested hacks that will save you an all-nighter and allow you to keep the deadline in launching your project.

    One note of caution though: As their own name sounds, hacks are quick and dirty solutions for desperate cases. There’s always the possibility that they might turn back on you and bite you in the a**, so use caution when deploying them. Sometimes, a different approach might be more efficient.

    [button color=”green” link=”http://browserhacks.com”]Visit the Browser Hacks Collection[/button]

     

  • Modern IE

    Modern IE

    For so many years, Internet Explorer has been both a bane for web developers and the butt of all jokes in the browser arena. Countless hours have been lost trying to adapt a design for these “dinosaurs” of the Internet. Fortunately, Microsoft started recently to get back in the good graces of web developers. One of their latest initiatives is called Modern IE and it bundles together a set of tools and utilities that will make it easier to test your websites in the various versions of Internet Explorer.

    Here are some highlights of the features available to us:

    • Modern IE has a partnership with Browser Stack, a renowned cross-browser testing utility website. New users referred by Modern.ie get the first three months free when they sign up. The offer is valid until January 10, 2014
    • There is a set of scanning tools that can highlight common issues of compatibility with Internet Explorer, as well as checking for many modern features that a website should have: proper DOCTYPE, latest versions of the Javascript frameworks, responsive design, proper use of CSS prefixes and many more
    • Modern IE now includes the virtualization options that allow web developer to download special virtual machines in different configurations. These environments are prepare for Virtual Box and VMWare formats.
    • Last but not least, there are lots of tips and advices on how to code properly a modern website.

    Overall, Modern IE is a great initiative from Microsoft and one step closer to a better web. Definitely worth checking and using.

    [button color=”green” link=”http://www.modern.ie”]Visit Modern IE[/button]
  • The iOS Design Cheat Sheet V2

    The iOS Design Cheat Sheet V2

    Today’s resource comes from a young designer living in Germany, Ivo Mynttinen. It is a well documented cheat sheet for everything iOS: resolution, PPI, icon and common UI elements sizes. The devices included in the list are: iPhone (4/4S/5), iPhone and iPod Touch (1/2/3), iPad (1/2), iPad Retina (3/4) and iPad Mini.

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

     

    [button color=”green” link=”http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/”]Get the iOS Design Cheat Sheet V2[/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]

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

  • JustGage plugin

    JustGage plugin

    JustGage is a handy JavaScript plugin for generating and animating clean gauges. The output is generated in SVG format and it is supporter in all current browsers.

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

     

    [button color=”green” link=”http://www.justgage.com/”]Get the JustGage javascript plugin[/button]

  • Adaptor – jQuery 3D slider

    Adaptor – jQuery 3D slider

    Adaptor is a free and cool jQuery carousel plugin. It can render both 3D and 2D transitions, although at this moment only Firefox and Webkit (Chrome and Safari) have the necessary support to display the 3D effects. All other browsers (including IE6) will fallback gracefully to a simple fade transition when using the 3D effects.

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

     

    [button color=”blue” link=”http://www.philparsons.co.uk/demos/box-slider/”]View demo[/button]  [button color=”green” link=”https://github.com/p-m-p/jquery-box-slider”]Get the Adaptor slider plugin[/button]