반응형
반응형

http://mashable.com/2013/10/20/bootstrap-editors/

 

18 Essential Bootstrap UI Editors

 

 

Bootstrap-html

Bootstrap has exploded since Twitter released it in 2011, becoming one of the most popular responsive frameworks available. It boasts an extensive library of pre-styled components, plugins and add-ons that make kickstarting your next web project a breeze.

There is no shortage of Bootstrap resources, but in this post, we will focus on the editing tools that allow you to customize the framework to suit your requirements.

We gathered 18 of the best free and paid Bootstrap editors, available online or as desktop tools, to help boost your web development productivity.

Are there any Bootstrap editors that you use and would recommend? If so, please share with our readers in the comments below.

1. Jetstrap

Jetstrap

Jetstrap is a web-based Javascript library for building rapid prototypes and applications with Bootstrap. It boasts a simple but extremely powerful interface with drag-and-drop functionality.

The workspace allows you to drop elements, customize them and then see a live preview, with the entire code neatly formatted. You can test on multiple device emulators within the workspace, easily export your code, and have your website up and running quickly.

Price: Basic plans start at $16 per month and go up to $99 per month.

2. Divshot

Divshot allows for fast, visual front-end development, and works superbly with the most popular frameworks, including Bootstrap, Foundation and Ratchet. The included component libraries are completely customized for each framework, with the visual HTML editor supporting custom code, JavaScript, CoffeeScript, LESS and more.

The theme switcher is incredibly useful, meaning you can change the overall look of the entire theme with just a few clicks, or you can choose a custom option.

Price: Plans start at Free and go up to $300 per month for agencies.

3. Easel

Easel is an in-browser design tool to mock up and collaborate on projects, without shifting between your text editor and browser. It allows for rapid prototyping with the added ability of importing elements from your existing website.

If you already use Bootstrap, you can use Easel to create markup that you can drop directly into your site, or get started with Bootstrap quickly using the great collection of components. You can export either the entire document or just specific elements.

Price: Plans start at Free and go up to $99 per month for medium-sized teams.

4. Kickstrap

Kickstrap

Kickstrap is a front-end framework with the Bootstrap library bundled and layered, and you can decide which Bootstrap CSS and JS components to use as you develop. Since you never edit Bootstrap's code directly, you can keep its layers up-to-date without overwriting your existing code.

Kickstrap is ready to use "out of the box," so there is no installation or database required. This enables you to put Kickstrap right onto your server.

Price: Free

5. Bootstrap ThemeRoller

Bootstrap ThemeRoller is an intuitive web app for creating your own Bootstrap theme using a visual interface. You can customize the color, size, fonts, forms, buttons, tables, alerts, navigation bar, menus and more.

The appe generates a unique URL for every style you create, which saves your settings so you can pause and resume your customization where you left it. You can see your changes live and download the final theme in a single ZIP file.

Price: Free

6. Lavish

Lavish is a Ruby on Rails application that generates a Bootstrap color scheme from an image, which you can customize to suit your requirements. Once you select an image, Lavish generates colors from the image for the body background, links, header, menu, tabs, text, dropdown and more. You can then swap these around until you're satisfied with the scheme, and then download the Boostrap.css file.

Price: Free

7. BootSwatchr

BootSwatchr is a visual tool, inspired by Bootswatch, for creating custom Bootstrap themes from the ground up. Just like Bootstrap it uses LESS to create dynamic, modular stylesheets to give you a live preview of the changes you make.

To get started, simply create a new BootSwatch and edit the variables you wish to change on the left. This will update the preview on the right. You can export in JSON format or download the full or minified CSS file.

Price: Free

8. LayoutIt!

LayoutIt

LayoutIt! features a drag-and-drop interface for creating front-end code simply and quickly. It takes every element and component of Bootstrap to make coding easier, without needing to be an expert in JavaScript, HTML5 or CSS3.

It's easy to integrate LayoutIt! with any programming language; just download the HTML and start building the design into it. To begin, choose one of the base templates — starter, basic marketing or article — and being working on customizing the template as you see fit.

Price: Free

9. PaintStrap

Using PaintStrap, you can generate beautiful Bootstrap themes with Adobe Kuler or COLOURLovers. To get started, input either the color scheme theme ID or a permalink URL, and then set the colors for corresponding elements such as text, navigation, buttons, background and links.

You can generate the resulting CSS as a ZIP of all the files, individually or as a theme. You can share your color scheme in the gallery or download another user's theme.

Price: Free

10. Pingendo

Pingendo is a visual desktop application to create prototypes of responsive websites based on the Bootstrap framework. You can start a project from the collection of ready-to-use layouts, drag elements into position, resize and customize, and insert your own content.

Using the Snippets CSS panel, you can insert new elements and drag and drop in the DOM structure, while previewing the changes you make instantaneously.

Price: Free

11. BootTheme

BootTheme allows you to create themes, mockups, websites and applications using the foundation of Bootstrap, with a drag-and-drop UI. You can instantly see your changes in the Live Preview panel, use In Place Editing to change the content in the preview panel and import Bootstrap variables.

You can also create your own personal collection of themes, templates and code snippets, and share your work through a unique URL. Projects are available to download in HTML, CSS and JavaScript.

Price: Plans start at Free and go up to $19 per month for the Pro Plan.

12. Bootply

Bootply

Bootply is a drag-and-drop visual editor to design, create prototypes and test the Bootstrap framework. It integrates well with other popular plugins, micro-libraries and frameworks, including FontAwesome, AngularJS, Isotope, jQuery and many others.

You can leverage the Bootply code repository to grab Bootstrap ready snippets, examples and templates. The active Bootply community makes it easy to discover, share and showcase code and snippets.

Price: Free

13. BootUI

BootUI is a visual Bootstrap editor that doesn't require any HTML or CSS skills, and it features a diverse collection of responsive templates. It's easy to get started; just select a template and double-click to edit the content. It also works offline, has free updates and currently boasts 24 responsive template options.

The editor features real-time previews of the changes you make. If you require a specific Bootstrap template, simply email BootUI and the team will produce a responsive template to match your request at no extra cost.

Price: Free trial and $49.95 to purchase

14. Fancyboot

Fancyboot is a simple but powerful customization tool for Bootstrap that allows you to edit Bootstrap installations and see live previews of your changes. You can select the plugins and components you want included, use the side menu and select the colors you wish to use.

Bootstrap includes extra variables that are not available in the official customization page. Once you have made your changes, you can download a ZIP file with the compiled and minified CSS, as well compiled jQuery plugins.

Price: Free

15. Wrap Bootstrap Live Editor

Bootstrap Live is a WYSIWYG editor for Bootstrap that offers a simple and elegant way to edit and beautify HTML, with Bootstrap-ready content and snippets. The HTML button allows you to open the default source view with code coloring and formatting.

The editor features advanced options including button configuration, custom tags, localization and more.

Price: Free

16. Bootstrap Magic

Bootstrap Magic is a Bootstrap theme generator using the latest Bootstrap 3 release and Angular JS. It provides a live preview of any changes as you make them, and includes variable importing, a color picker and smart typeahead. It also completely rebrands the framework to your own style.

Once you have customized your theme, you can instantly download it with personalized CSS and LESS variables in a minified version.

Price: Free

17. Style Bootstrap

Style Bootstrap is an in-browser GUI utility to customize the Twitter Bootstrap look and feel. You can customize the body style, typography, buttons, navigation, forms, alerts and more. Once you've finished crafting your theme, you can download the generated CSS.

Price: Free

18. X-Editable

XEditable

X-Editable provides in-place editing with Bootstrap, jQuery UI or pure jQuery, and the library allows you to create editable elements, including both "popup" and "inline" modes.

It boasts a wealth of features, including client-side and server-side validation, keyboard support, live events, customizable container placement and more. X-Editable provides faster development, easy adding and removing of fields, a simple backend script for data updates and is more convenient for small forms.

Price: Free

반응형
반응형

For the best info on Ionic, check out our great documentation page!

Note: Ionic currently best supports iOS 6+. Android support is okay but not great, but we are working to make Android kick ass in the coming weeks, so please let us know if you run into Android issues!

What is Ionic?

Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform native apps with HTML, JavaScript, and CSS.

We built Ionic because we wanted a framework that focused on building hybrid native apps, rather than mobile websites. We wanted this framework to be obsessive about great design and performance. A framework that left the past behind and focused on the future where mobile devices could make HTML5 feel native.

It's important to realize that Ionic is not a replacement for frameworks used for building mobile web apps. There are a lot of great solutions that work well for websites, like jQuery Mobile.

Ionic is also not a good solution if you need to support older generation devices. Our compatibility starts at iOS 6 and Android 4.1. We will never support versions earlier than those. This is a framework for the future.

Ionic: A hybrid mobile app framework

Framework - HTML5 - Javascript/Added on November 24, 2013/Add to favorites

Ionic is a front-end framework for developing hybrid mobile apps with HTML5, CSS, and JavaScript. It’s fast, uses AngularJS, and it’s beautifully designed with a focus on Native features.

ionic

반응형
반응형

 

microjs - a listing of small JS libraries

 

 

 

http://microjs.com/#

 

 

https://github.com/madrobby/microjs.com

 

 

 

Fantastic Micro-Frameworks and
Micro-Libraries for Funand Profit!

How much library code do you really need — 50K? 100K? 150K? More? How much of that do you really use?

Sure, we all love our favorite monolithic frameworks, and sometimes we even use them fully. But how often do we reach for the ride-on John Deere tractor with air conditioning and six-speaker sound system, when a judiciously applied pocketknife would do the trick better, faster, slicker?

Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable. A micro-framework does one thing and one thing only — and does it well. No cruft, no featuritis, no feature creep, no excess anywhere.

Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

Want to add your own? Fork this site on GitHub, add your framework to data.js and submit a pull request.

 

 

 

반응형
반응형
https://github.com/component/component/wiki/Components

 

 

component module list - all the components

 

 

 

Components

This page acts as our "registry". When you add a component to this list it becomes automatically available to component-search(1) and http://component.io which are refreshed every 15 minutes. It'll also get tweeted by @component_js

The eventual goal of components is that you use only the pieces that you need, not large libraries like jQuery or underscore, these should be application-level dependencies, if used at all. However if you must use them for now, design your APIs in such a way that these are merely implementation details, for example $(selector).mylibrary(options) is not a good choice, so that they can be phased out. Try your best to create components everyone may use, then create backbone-<name> based on that code when possible, otherwise the community will remain fragmented.

AJAX

Routing

CQRS DDD Domain

Huskies

  • huskies/huskies – method or function processor before execution
  • huskies/lock - Lock method according to options, is huskies framework's middle
  • huskies/strict - strict method ,convert and validate arguments, is huskies middleware.

Access Control

Data Modelling

Data Structures

Browser Storage

Dependency Injection

UI Elements

DOM Interaction

Conversion Utilities

Control Flow

Async utilities

Function Utilities

Date Utilities

Array Utilities

String Utilities

Number Utilities

Object Utilities

Math Utilities

Database Utilities

Debugging Utilities

Performance Utilities

WebGL

Canvas

SVG

Shims

Testing

Styling

Templating

Audio

Video

Feature Detection

Other

Crypto

MVC

Backbone

Ember

Foundation

SUIT

  • suitcss/suit – HTML/CSS framework for creating loosely coupled UI components
  • suitcss/base – SUIT base styles for web apps

Utilities

Components

Gaming

CSS Animations

Fonts

Colors

Themes

Aurora

Nightrider

Celtic

Darktone

Display component themes

AngularJS

Localization

Web APIs

반응형
반응형

rlightbox – a jQuery UI mediabox

Table of Content

 

반응형
반응형

Best jQuery Lightbox Plugins for Developers

 

http://codegeekz.com/best-jquery-lightbox-plugins-for-developers/

 

Swipebox : jQuery Lightbox with Touch Support

swipebox-jquery-lightbox-plugin
Swipebox is a jQuery lightbox plugin that has support for touch events and works well in responsive layouts. It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too. The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers.

rlightbox : Responsive Lightbox with jQuery UI

rlightbox-jquery-plugin
rlightbox is a lightbox plugin that is built on top of jQuery + jQuery UI and comes with some fresh features that doesn’t exist in its alternatives. It can display any type of content from images to videos (YouTube and Vimeo), Flash files and HTML. The plugin has a unique “panorama” feature for showing only part of an image but allowing users to view the rest with panning. rlightbox can be set to display a single item or a set with the help of pre-next buttons (there is support for keyboard navigation as well). It is look and feel can be completely customized as the plugin is fully compatible with jQuery UI ThemeRolle

Colorbox : Highly-Customizable jQuery Lightbox

Colorbox-ajquery-lightbox
ColorBox is a jQuery Lightbox plugin which is lightweight (9kb) & supports photos, photo groups, slideshow, ajax, inline, and iframed content. The lightbox has a very nicely designed interface which can be improved or customized with CSS. ColorBox is unobtrusive; every option is mentioned in the JS & requires no changes to the existing HTML.

For faster displays & slideshows, it preloads background images and, optionally, can preload upcoming images in a photo group. The plugin comes with a bunch of settings, including transition types-speeds & opacity, for maximum customization.

iLightBox : Impressive jQuery Modal Box Plugin

iLightBox
iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite. It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode. The gallery mode can display other items as thumbnails and allows browsing via keyboard, mousewheel and touch events (swipe). There are retina-ready skins, it can be completely customized and iLightbox can also be used as a good-looking replacement for JavaScript’s alert, prompt and confirm dialogs.

Lightbox_me : Simple & Tiny Lightboxing

Lightbox_me
Lightbox_me is a jQuery lightbox plugin that doesn’t come with many features but simply enables you to lightbox any element. And, it is only 1kb compressed. It can position the modal box smartly in every situation whether the windows is resized or the window is smaller than the modal. To sum up, Lightbox_me is very functional for anyone who doesn’t need features like image/video gallery support but only a simple and good-looking lightbox.

Magnific Popup : Responsive jQuery Lightbox Plugin

magnific-popup-jquery-plugin
Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device. The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not – you can use relative units like EM’s or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it’ll resize and center.
Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays. Magnific Popup displays images before they’re completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.

FancyBox Light Box

fancybox-jquery-plugin
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It can display images, HTML elements, SWF movies, Iframes and also Ajax requests, customizable through settings and CSS, groups related items and adds navigation, supports fancy transitions by using easing plug-in and many more.

Slimbox 2

slimbox2
Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

반응형

+ Recent posts