JavaScript and jQuery PDF Viewer Plugins Today’s post is about some JavaScript and jQuery PDF related plugins we found on the Internet that allows you to embed and view PDF files. Enjoy! Related Posts: pdf.js PDF Reader in JavaScript. SourceDemo PDFObject Embeds PDF files into HTML documents. SourceDemo jsPDF It is an open-source library written by our lead developer, James, for generating PDF documents using nothing but JavaScript. Source + Demo ThickBox A webpage UI dialog widget written in JavaScript on top of the jQuery library. Source + Demo AnyChartStock JavaScript API The chart can be exported as a static image in the PNG or JPG format or as a PDF document with an embedded static image of the chart or a fully interactive functional chart, as user sees it on the page. SourceDemo Google Docs Viewer plugin for jQuery (gDocsViewer jQuery plugin) Automatically embeds the Google Docs Viewer for viewing pdf, doc, docx, ppt and tiff files linked to by anchor tags. SourceDemo zohoViewer jQuery plugin SourceDemo AUTHOR: Sam Deering.
Beautiful Buttons for Twitter Bootstrappers This is an extension to the Twitter Bootstrap framework. It makes creating pretty buttons easy. (Send improvements to @charliepark.) First, monkey with the sliders on the left. Use your arrow keys for extra precision. Second, copy the CSS in the box below. You should be able to just pop it into your CSS file.
Twitter Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20 Minutes | RevillWeb First thing to mention is that the twitter bootstrap documentation is excellent, it provides detailed examples of all the components it provides allowing you to easily copy and paste extras into your design. Their documentation can be found here. We need to start with a basic HTML template so we can include the required bootstrap files. We have added some CSS to make the background of the web page a light grey, this is so we can easily see the different columns within our design, making it easier to understand. To use twitter bootstrap there is only one file that we are required to include into our template, but there are many varieties available, please refer to the documentation if you wish to explore these options. For the sake of this twitter bootstrap tutorial, we will include one file bootstrap-combined.min.css via CDN so we don’t even need to download any files. This now makes all the twitter bootstrap CSS available within our template. <h1>TWITTER BOOTSTRAP TUTORIAL</h1>
validate.js Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 2kb gzipped, and customizable! validate.js (development - 16kb) validate.min.js (minified - 2.1kb) Example All of the fields were successfully validated! Features Validate form fields from over a dozen rules No dependencies Customizable messages Supply your own validation callbacks for custom rules Chainable customization methods for ease of declaration Conditionally validate certain form fields Works in all major browsers (even IE6!) Installation and Usage Include the JavaScript file in your source Create the validation object with your desired rules. FormValidator new FormValidator(formName, fields, callback) The FormValidator object is attached to the window upon loading validate.js. The formName passed in to validate must be the exact value of the name attribute of the form An array of fields will be used to perform validation on submission of the form. Custom Validation Rules #1. setMessage
Bootstrap maakt het makkelijk | Shareforce Twitter bootstrap is een intuïtief en krachtig framework om snel moderne websites en webapplicaties te ontwikkelen. In dit artikel een uitleg van Bootstrap en 10 redenen waarom je het in zou kunnen zetten voor je volgende web project. Het belangrijkste voordeel van Bootstrap is dat het enorm veel tijd bespaart en daarmee de ontwikkelingskosten drukt. Wat is het?Twitter bootstrap is een gratis verzameling van tools voor het bouwen van websites en webapplicaties. De basis werd oorspronkelijk gelegd door Twitter ontwikkelaars Mark Otto en Jacob Thorton, maar kent inmiddels ook zeer veel toepassingen buiten het social media platform. Tien redenen om voor Bootstrap te kiezen! Responsive: Bootstrap vormt zich automatisch naar het scherm van de gebruiker. Denk je er ook over om Bootstrap in te zetten voor je volgende webproject? Neem contact met ons op voor een vrijblijvende afspraak als je meer wilt weten!
Extending Twitter Bootstrap Typeahead Plugin | redlab-log Update: also read this post In twitter bootstrap there is a JQuery plugin for auto completion. It’s called bootstrap-typeahaed. Typeahead uses an array of strings as datasource and is easily activated with in it’s simplest form 1 line of code. It’s very easy to use but somewhat limited. Our use case: 2 inputboxes, one for postal code (the numeric form) and one inputbox for the community that has that postal code.In Belgium different communities can have the same postal code, and the right community should be selected on selecting a postal code. The typeahead plugin is not suited for that. We wanted to use typeahead instead of any other existing JQuery plugin since we’re already using twitter bootstrap. To achieve this I extended, (actually more copied and altered) typeahead. View a demo Read on for a usage example Considering the example of the cities and postalcodes the javascript would be like for the postalcode inputbox and for the citynames inputbox. Like this: Like Loading...
Bootleg.css Twitter Bootstrap Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.
30 Amazing Resources for Sass Lovers Despite the predictions of countless skeptics, Sass hasn’t proved to be a fad at all, but rather a remarkably robust set of tools that genuinely improve CSS authoring. I’m a huge Sass fan and I know many of you are too, so I’ve compiled this list of thirty amazing resources for Sass lovers. In it you’ll find all kinds of goodies built on and for Sass: frameworks, plugins, apps and a lot more. Frameworks and Grid Systems Compass Compass is the quintessential companion to Sass. Bourbon Sass Mixins Library If Compass seems like overkill for you, but you still like the idea of leveraging some awesome CSS3 mixins, check out Bourbon. Bourbon Neat Bourbon Neat is a grid system built with Sass and Bourbon. Foundation Foundation is the main competitor to Twitter Bootstrap. Bootstrap Sass If you’re dead set on using both Bootstrap and Sass, check out this project, which essentially rewrites the LESS Bootstrap components in Sass. Animate.sass Forge Skeleton-SASS Susy: Responsive grids for Compass Frameless
18 Useful Twitter Boostrap Goodies You Should Know Introduction Twitter Bootstrap is one of my favourite framework for quick website prototyping and default style for my CMS. If you don't know about Twitter Bootstrap, it's a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. I have been using it for a while now, it allowed me to have full concentration on the functionality of the website instead of cross browsing testing and styling. In this post, I have found many useful tools, plugins and themes created specifically for Twitter Bootstrap. Update I also created a post about third party Twitter Bootstrap javascript plugins - Extend Twitter Bootstrap Javascript Plugins. Everybody seems to like this post a lot, it's mentioned on The Treehouse Show! Tools - Wireframing, Generators and Template This website allow you to generate your own unique design. Additional Plugins Extend the existing icons with SVG based font icons. Skin, Themes & Styles
Code smells in CSS 20 November, 2012 Chris Coyier recently answered someone’s question: How can you tell if your CSS code smells? What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? What do you look for in the code to determine how good or bad it is? I thought I would extend Chris’ great answer with my own, additional take on things… My day-to-day life is spent working in-house at BSkyB… I work on big websites, the last of which took me over a year to build the front-end for (and it’s still ongoing). I’m going to share just a few things (there will, no doubt, be things that I have missed) that I look out for in CSS that will give you and idea as to its quality, its maintainability and its integrity… Undoing styles Any CSS that unsets styles (apart from in a reset) should start ringing alarm bells right away. Any CSS declarations like these: border-bottom:none; padding:0; float:none; margin-left:0; …are typically bad news. Magic numbers Qualified selectors Brute forcing ! !
Sass Mixins Library Usage & Installation Install for Rails 3.1+ In your Gemfile: Then run: Restart your server. Then rename application.css to application.css.scss: mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss Delete the sprocket directive in application.css.scss: Import Bourbon at the beginning of application.css.scss. @import "bourbon";@import "home";@import "users"; Install for a Non-Rails App Installation Install the gem Install Bourbon into your project's stylesheets directory by generating the bourbon folder: The generated folder will contain all the mixins and other necessary Bourbon files. Sass Watch Run a standard sass --watch from the command line: $ sass --watch stylesheets/sass:stylesheets Lastly, import the mixins at the beginning of your stylesheet(s): @import 'bourbon/bourbon'; Other Commands See the complete list of Command Line Tools. $ bourbon help$ bourbon update Using Rails 3.0.x?