Category Archives: CSS

Shift Systems

Buy Regular License SHIFT From Codecanyon ( Only 49 USD )

Buy White label SHIFT

New_Picture_(15)

    CODECANYON PACKAGE          $49

      (For Personal Use) 

  • SINGLE DOMAIN
  • UNLIMITED EMPLOYEES
  • UNLIMITED DEPARTMENTS
  • FULL OPEN SOURCE UNENCRYPTED CODE
  • 1 MONTH SUPPORT

    WHITELABLE PACKAGE            $840

      (For Commercial Use)

     RESELL IT IN YOUR OWN NAME

  • MULTIPLE DOMAINS
  • UNLIMITED EMPLOYEES
  • UNLIMITED DEPARTMENTS
  • FULL OPEN SOURCE UNENCRYPTED CODE
  • LIFETIME SUPPORT AND UPGRADES
  • PROFESSIONAL INSTALLATION

  • 5.3<=PHP Version<=5.5
  • Curl Extension Enabled
  • Live Server ( Recommended : Apache with PHP and Mysql )
  • Mysql Database
  • PDO Extension

  • a) View of Total Numbers of Holidays,Employees and Departments
  • b) Mark Employee Attendance for Present Date
  • c) New way of managing and marking attendance every day
  • d) Mark Leaves with attachment of Application File,Type of leaves,Reason For Leave
  • e) Keeps records of Employee Personal Details as well as Official Details
  • f) Keeps records of Particular Employee Leaves,Department leaves Based on Service,Fixed leaves
  • g) Maintain All Departments records with All Permission(s) and Access rights
  • h) Assign access rights and permissions to Approval Attendance Department
  • i) Individual and separate login for employee and employer
  • j) Payslip generator for particular employee with Date Of Payment
  • k) Payslip print,pdf and keep records of payslips for every employee
  • l) Payslip of an employee can be override by Default Templates
  • m) Payslip can be Saved as Default Templates
  • n) Default Templates can be Add,Edit,View
  • o) Attendance/Leaves for particular Employee will Approved or Disapproved by Approval Department
  • p) Maintain records of All Holidays with Edit,Add actions
  • q) Working hours,working days of the business
  • r) Keep records of Necessary details of the company like Company-Name, Company Email
  • s) Can Update company details Anytime

  • Admin :

Demo Link : CLICK HERE FOR LOGIN
User : demo@shiftsystems.net
Pass : demo

  • HR Employee :

Demo Link : CLICK HERE FOR LOGIN
User : hr@shiftsystems.net
Pass : demo

  • Sales Employee :

Demo Link : CLICK HERE FOR LOGIN
User : sales@shiftsystems.net
Pass : demo

BUY NOW  <<<

White label For Indian Customers

White label For Worldwide Customers

Buy Now

Bootstrap Framework Plans to Give Twitter the Boot

Web development toolkit Bootstrap is getting ready to part ways with Twitter. The open source project began life at Twitter, but with its two primary developers leaving Twitter for other companies, Bootstrap will be spun off on its own.

Bootstrap co-creators Mark Otto and Jacob Thornton are both leaving Twitter and have announced thatBootstrap will continue but as “its own open source organization.” For now nothing is changing; Bootstrap will remain a Twitter project on GitHub. But eventually the pair plan to give Bootstrap a life of its own.

The Bootstrap project is designed to help you get your website up and running as fast as possible. Somewhere between a framework and a “theme,” Bootstrap offers an HTML, CSS and JavaScript base for your designs, including built-in forms, buttons, tables, grids and navigation elements. Among Bootstrap’s more impressive tricks is the grid layout tool with support for advanced features like nested and offset columns. Bootstrap is also impressively lightweight, weighing in a just 10kb (gzipped).

Bootstrap 2.0, released earlier this year, added some much-needed responsive design tools for creating fluid layouts, including a new flexible 12-column grid system.

The move away from Twitter should be good news for Bootstrap users, particularly with Twitter’sincreasingly hostile attitude toward developers. Otto assures anyone worried that Bootstrap will become abandonware that both he and Thornton are dedicated to Bootstrap. “The project has grown beyond us and the Twitter brand,” writes Otto on the Bootstrap blog. “It’s a huge project playing a pretty awesome role in the web development industry, and we’re excited to see it continue to grow.”

Styling Webpages With ARIA’s ‘Landmark Roles’

We’ve covered how you can make your webapps more accessible using WAI-ARIA — the W3C’s emerging specification for Accessible Rich Internet Applications — but did you know ARIA can also help style your pages?

Web developer Jeremy Keith recently took a look at how ARIA’s “landmark roles” can be used, not only to make your pages more accessible, but for styling purposes as well. Consider HTML5′s headerand footer tags. The average page has a main header and footer and then may also use the same tags within an article tag, for example, to wrap a headline, dateline and other auxiliary information.

So how do you target just the main header and footer tags without also styling the inner tags? Well, you could drop some IDs in your page, something like <header id="main">. But ideally the ID attribute is not simply a styling hook to be thrown around at the designer’s whim.

Keith points out a better way: using ARIA’s landmark roles. To stick with the same example, you could write something like this:

<header role="banner">
    ...header code here
</header>

Now you can target that specific header tag with CSS’s attribute selector:

header[role="banner"] {
    your styles here
}

Not only have you avoided the plague of otherwise meaningless ID attributes, you get the accessibility benefits too — ARIA roles are supported in JAWS, NVDA and Voiceover. It’s a win-win solution: more accessible code with styling hooks built in.

Be sure to read through Keith’s post for some landmark role examples. Also see our early post on building a more accessible web with WAI-ARIA, and of course, read through the WAI-ARIA role spec, which has more examples and guidelines for when and where to use them.

Screenfly: The Easy Way to Test Responsive Web Designs

If you’ve embraced responsive web design — and we sincerely hope you have — you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you’ll quickly find that testing your site is much more complex. Not only do you need to test across browsers for rendering differences, now you need to test across screen sizes as well.

Unless you’ve got a giant horde of cash stashed under your desk, you probably don’t have every tablet and phone out there. Even if you did have every mobile device and screen size on the market, would you really want to test a website in every single one?

That would be incredibly inefficient when there’s nice web-based tools like Screenfly that can handle it all for you. Head over to Screenfly, plug in the URL you’d like to test and then start flipping through the various tablet and mobile device screen sizes to see how your @media queries are handling smaller screens.

Screenfly doesn’t account for rendering differences between devices (which should be minimal given that most mobile web browsers are based on the same WebKit rendering engine), but it does do a good job of showing you what your shiny new design looks like on the latest tablets.

There are of course other web-based tools out there that can help in similar ways, but we like Screenfly for its clean, simple interface and nicely done transitions. If you’ve got a favorite, drop a link in the comments and we’ll check it out. If you like Screenfly, you might want to keep an eye on Quirktools, the makers of Screenfly. The developers claim to have a wireframe app (no flash) and some other tools in the works.

‘Form Follows Function’ Experiments Showcase the Power of HTML5

If you’ve been missing the early days of HTML5, back when experimentation, not stolid, functional sites was the name of the game, we’ve got a site for you: Form Follows Function.

Form Follows Function is a collection of interactive experiments built using HTML5 elements like Canvas and CSS 3 tools like 2-D/3-D transforms. Experiments include growing trees with the click of the mouse (or touch of a finger, depending on your device), dragging waves and 3-D cans of Campbell’s soup. Even the rotating menu of the experiments is impressive.

The site is the brainchild of developer Jongmin Kim, whose design work has previously garnered a Webby award.

Fun thought experiment: Imagine taking this site back in time, showing it to your 2002 self and then pointing out that it’s all built with web standards, no Flash involved.

While we really like Form Follows Function it does fall prey to the main reason we don’t really miss the early days of HTML5 and CSS 3 all that much — it doesn’t use CSS prefixes properly. Form Follow Function optimizes for Firefox and Chrome while ignoring Opera and Internet Explorer; a shame, considering how well done the rest of the site is.