Friday, March 3, 2017

CSS Evolution: From CSS to Styled Components

Since the beginnings of the Internet we’ve always had the need to style our websites, CSS has been around forever and has evolved at its own pace over the years, this article will take you through it.
To begin with we need to be on the same page of what CSS is, I think we can all agree that css is used for describing the presentation of a document written in a markup language.
It’s no news that CSS has evolved along the way and has become more powerful nowadays, but it’s widely known that additional tooling needs to be used in order to make css somehow work for teams.

CSS in the wild-west
In the 90’s we use to focus on creating “fancy” interfaces, the wow factor was the most important thing, inline styles were the thing back then, we just didn’t care if things looked different, in the end Webpages were like cute toys we could threw some gifs, marquees and other horrible (at the time impressive) elements over and expect to catch your visitors’ attention.

After that, we started creating dynamic sites, but css remained a consistent mess, every developer had his/her way of doing css. Some of us struggled with specificity, causing visual regressions when introducing new code, we relied on using !important to set in stone our strong will to make a UI element look in a certain way. But we soon realized that:

All those practices became more evident and bigger problems as soon as projects grew in size, complexity, and team members. So not having a consistent pattern to do styling became one of the biggest blockers for experienced and inexperienced developers who struggled to find a right way to do things in CSS. In the end there was no right or wrong thing to do, we just cared to make the thing look ok.

SASS to the rescue
SASS transformed CSS into a decent programming language in the form of a preprocessing engine that implemented nesting, variables, mixins, extends and logic into stylesheets, so you could better organize your css files and have at least some ways of deconstructing your css chunks in smaller files, which was a great thing back then.
It essentially takes scss code, preprocesses it and outputs the compiled versions of the file in a global css bundle. Great right? but not so much I’d say, After a while it became apparent that unless there were strategies and best practices in place, SASS only caused more troubles than it alleviated.
Suddenly we became unaware of what the preprocessor was doing under the hood and relied on lazily nesting to conquer the specificity battle but causing compiled stylesheets to go nuts in sizes.

EM and component based thinking
When BEM came along it was a breath of fresh air that made us think more about reusability and components. It basically brought semanticity to a new level, it let us make sure that className is unique thus reducing the risk of specificity clash by using a simple Block Element Modifier convention.

BEM is good in the sense that you made sure that components were unique   With this kind of thinking some apparent patterns became more evident as we started migrating our old stylesheets into this new convention.
But, another set of problems came along:

  1. Classname selection became a tedious task
  2. Markup became bloated with all those long class names
  3. You needed to explicitly extend every ui component whenever you wanted to reuse
  4. Markup became unnecessarily semantic

CSS Modules and local scope
Some of the problems that neither SASS or BEM fixed was that in the language logic there is no concept of true encapsulation, thus relying on the developer to choose unique class names. A process that felt could be solved by tools rather by conventions.
And this is exactly what CSS modules did, it relied on creating a dynamic class names for each locally defined style, making sure no visual regressions are caused by injecting new css properties, all styles were properly encapsulated.
CSS-Modules quickly gained popularity in the React ecosystem and now it’s common to see many react projects using it, it has it’s pros and cons but over all it proves to be a good paradigm to use.
But… CSS Modules by itself doesn’t solve the core problems of CSS, it only shows you a way of localizing style definitions: a clever way of automating BEM so you don’t need to think about chosing a class name ever again (or at least think about it less).
But it does not alleviate the need for a good and predictable style architecture that is easy to extend reuse and control with the least amount of effort.

Styled Components to blend css in JS (fully)
Styled-components are pure visual primitives that act as a wrapping component; they can be mapped to actual html tags and what they do is wrap the children components with the styled-component.

Core UI for everyone to reuse
It quickly became apparent that CSS Modules nor Styled Components by themselves was not the perfect solution, it needed some kind of pattern in order for it to work and scale. The pattern emerged by defining what a component is and separating it fully from logic, creating core components which sole purpose is to style and nothing more.

Whatever technology you use whether it is SASS, BEM, CSS Modules or Styled Components there is no substitute for a well defined styling architecture that makes it intuitive for other developers to contribute to your code base without thinking too much, breaking or introducing new moving parts to the system.
This approach is crucial to scale properly and can be achieved even if using plain CSS and BEM, the main difference is the amount of work and LOC needed for each implementation, overall styled-components feels like a great suit for pretty much all React projects, yet to test it in the wild but quite promising indeed.

Saturday, February 18, 2017



Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction. They are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the environments we live and work in. Most appliances and some apps are built entirely around one microinteraction.

Microinteractions impact things like:

  • Turning things off or on
  • Commenting in any digital medium
  • Changing a setting or process
  • Viewing a notification or message
  • Sliding down the “screen” on a mobile device to refresh content
  • Interacting with a data element, such as checking the weather
  • Accomplishing any single task
  • Connecting devices, such as those for multi-player games, or printing from your laptop
  • Sharing or liking a photo or video on a website

Four Parts of Micro-Interactions

  • Trigger: Initiates an action
  • Rules: What happens in the interaction
  • Feedback: How you know what’s happening
  • Loops and Modes: What happens next
Every interaction includes these parts to create a cycle for how things work. According to Saffer, most people don’t even know or think about micro-interaction contact unless something goes wrong.

When you get down to the visual design of these elements, keep a few things in mind:

Micro-interactions must live on through repeated use. What’s fun and quirky on first use might become annoying after 100 uses. Be cautious of gimmicks or odd design cues.
Simplicity rules. Simple type, simple language, simple colors, and simple design. Don’t make the design any more complicated than the action.
Give each micro-interaction a human voice. Text should read like people talk, not like a machine.

Add a fun divot with animation, but don’t go crazy. Consider the bouncing icon in the dock of your MacBook as a program loads. It lets you know the program is responding with a simple animation but does not get in the way of what you are doing.
Create a visual harmony with other elements. If your app has a blue color scheme, micro-interactions should use the same hues so that the visual connection to the parent design or app is there for users.

Don’t overthink it. Overdesigning a micro-interaction can be lethal. Let’s go back to the simplicity of the text message notification. Just a simple, singular display on the screen with enough information to be effective – who the message is from, what the message contains and a way to respond.

Consider each detail with care. Because micro-interactions are so small, every element of the design matters. Ensure that every detail, down to the last pixel, is perfected before launch.

Think about further adaptations or how subsequent micro-interactions will work. Does the exact same thing happen every time for every user? Or are there changes to the micro-interaction over time? (Consider the alarm that gets louder each time after the snooze button is hit.) These smart details will set the best micro-interactions apart from everything else.

Thursday, November 5, 2015

Motion UI Design

The current state of motion design can be compared to the Drop Shadow Era of visual design.
Animation capabilities have improved dramatically across the web driven by CSS transitions, hardware accelerated transforms along with coming standards such as JS Web Animations
In addition to this, increasingly capable, multi-core, multi-gigabyte, high DPI mobile devices can now comfortably output 60fps animated UIs.

Animate like it’s 1999!
Given the early state of UI motion design, it’s only natural that designers are tempted to add animation as visual flair, not unlike, drop shadows or bevels.

In preparation for the upcoming release of Foundation for Sites 6, today we're open-sourcing Motion UI, a Sass library for creating custom CSS transitions and animations. Originally bundled with Foundation for Apps, this updated version includes more robust transition options, an animation queueing system, and flexible CSS patterns that can work with any JavaScript animation library.

Prototype to Production
Motion UI includes more than two dozen built-in transition and animation classes that make prototyping easy. When you move to a production environment, the library gives you total control over how your effects work.

The core of the library is a set of powerful transition and animation Sass mixins, which give you complete control over the details of an effect, from what direction an element slides, to how far it spins, to how intensely it shakes. Motion UI also includes a large number of pre-made CSS classes to help you get going quickly.

<div id="panel" data-animate="slideInRight" class="slow bounceIn"></div>

The library was designed for use with the Foundation frameworks, but can be adapted to work with any framework's animation library, such as Angular or React.

Motion is the New Flat
While previewing Foundation for Apps last year, we wrote about how 'motion is the new flat'. Animation allows us to design more expressive interfaces, by giving users queues around hierarchy, spatial orientation, and more. Foundation for Apps shipped with Motion UI, a Sass library that makes it easy to create CSS transitions and animations for your designs.

As we continue to develop the Foundation family, we're looking for ways to streamline the experience of using the three frameworks. This includes more consistent styling, naming, and architecture; revamping our CLI to build projects in any of the frameworks; and building standalone libraries that can be used by multiple frameworks.

You can use the new Motion UI in an existing Foundation for Sites 5 and Foundation for Apps project now. As for Foundation for Sites, version 6 it will include Motion UI and a JavaScript library that makes it easy to hook into, both with our built-in plugins like Reveal, and with your custom components


Wednesday, February 4, 2015

UI/UX Design Trends to Watch for in 2015....

1. SVG  
SVG became a buzzword in 2014. It is no wonder, because with this vector format, your assets look crisp and nicely adapt to any screen size. In addition to that, SVG elements can be beautifully animated and make your site feel alive. I'm sure we'll see more examples of such animations this year.

2. Long Live the Responsive design
Many sites have already been adapted for tablet and smartphone users, and in 2015, the responsive design will sure continue to expand. Together with the increasing use of smart watches and TVs, it is highly important to provide a seamless experience across all available channels.

3. Huge background images
We’ve been seeing a lot of large-image backgrounds for some time now, but for 2015, designers are kicking it up a notch. With more and more movies being released in 3D, users will also expect 3D in cutting edge designs. Learning how to balance the intricacies of three-dimensional graphics will play an important part in the evolution of web design. You can also expect to see fully responsive HD-quality video backgrounds on many websites this year.

4. More Interactive Than Ever
Micro-interactions are a great way to enhance the UX on your site, and they are here to stay. Creating an enjoyable and memorable experience for your users has a significant impact on your visitor’s emotional involvement with your brand and the amount of time they spend browsing your site.

5. Bigger, Bolder, Better
Typography greatly affects usability and the overall aesthetics of the site. It is also one of the means of delivering the brand message. In 2015, we’ll see more of bold fonts, as well as responsive typography that provides a better reading experience.

6. Ghost Buttons
Ghost buttons are a minimal and stylish interface feature designed to attract the user's attention in a subtle way. With a smart hover animation, it is a pleasure to use and adds a touch of elegance to any site. Considering how well ghost buttons pair with large background images and videos, we'll definitely see more of them this year.

7. Scrolling in, Clicking out
For the past few years, and with the increase in use of mobile devices to surf the web, users have become accustomed to scrolling. In fact, many would say that scrolling has won over clicking. The reason for this change is that an online audience wants to get a preview of all you have to offer right on the first page. This is why, come 2015, home pages need to get longer in order to create a dynamic interaction between the website and the viewer.

8. Flat Design
Flat design is so focused on minimalist principals, sites appear clutter-free and content focused.  Flat design is less clunky and much easier for a web server to deliver to devices like mobile phones and tablets.

9. Typography
Bold typography elements combined with the large images, will dominate the web.Because content is king, this emphasis on typography should come as no suprise, and it’s a philosophy that isn’t going anywhere.

Google web fonts won’t be the only typography you experience either. Gone are the days of super expensive font-families for purchase. Designers have access to much more reasonably priced quality fonts with web-kits. As a result, the amazing quality fonts you are used to seeing in print will now take the spotlight on the web.

10. Privacy
Designed for security, so people can trust forms and checkouts with their information. Now, as people become aware of how data can be exchanged with third parties, "they'll be reluctant to share it without good reason — and rightly so".

Tuesday, November 18, 2014

iOS app Design Guide

Introduce fundamental iOS and UI design concepts.

Exact doubling of the previous resolution. i.e 326 ppi

A pixel (px) is the smallest unit of measurement on a screen 

We use points (pt) as a resolution independent measure.
Each point can be made of many pixels and so there is room for extra detail.

Device               Retina?    Point Resolution (pt)     Pixel Resolution (px)
iPhone < 3GS                             320 x 480              320 x 480
iPhone 4, 4S                y                 320 x 480                  640 x 960
iPhone 5                  y             320 x 568                     640 x 1136
iPad 1, 2 & Mini                             768 x 1024              768 x 1024
iPad 3, 4                  y                 768 x 1024              1536 x 2048

Laying it Out
When you begin the layout process for each screen it's often best to forget about "decoration". Instead focus on the core structure of the UI. To put it simply, where things will be on the screen. This is the step between your initial sketches and the final product. Here you'll do a lower fidelity version, one which you won't invest too much detail in so that you can reorganise without much time wasted.

Hierarchy performs two important tasks: it provides a way for users to reason about navigation within your app and allows them to determine what effects a button will create.

UI Templates
It's often useful to quickly compose app mockups using existing wireframing tools and templates. An existing iOS template gives you the advantage of the native user interface feel without much time investment on detail.

Target Size
Choosing the size and placement of your touch targets (buttons, sliders, switches etc) is often a balance between subtlety and usability. Because of the innaccuracies of fingers touch points within your app should be around finger size, which Apple designates as 44pt x 44pt. If you'd like your touch targets to appear small, you can often designate a larger touch area than the visual appearance.

Target Positioning
You've probably experienced accidental taps when browsing the internet, something that rarely happens with a mouse. To stop this sort of behaviour avoid putting small touch targets close together, especially if they perform very different actions (for example "flag as inappropriate" sitting next to "like"). In a similar vein, placing related actions very far apart can be as annoying. As before, balance is important.

Portrait vs Landscape
When approaching the portrait and landscape layout problem many designers choose to forego one and stick to a single screen size. While this is indeed a good way to cut down on work, it doesn't take into account different users requirements. Perhaps you lock your app down to just portrait, but a user comes along that finds it difficult to type in portrait mode. Or you lock it into just landscape and then people try to use it with only a single hand. Orientation flexibility is a core feature of the platform and people expect it to work.

iPad vs iPhone
iPads and iPhones are very different devices. Depending on the sort of app you are designing users may expect a universal solution, only iPad, only iPhone or even two seperate apps. While many of the constraints are similar the larger iPad screen allows for more creative activites and longer periods of use. Whereas the iPhone portability means people want to see information at a glance and achieve tasks quickly, often while moving.

A big part of designing for iOS is not just where things are on screen, but how those things behave when you interact with them. The high resolution, portable, touch based screen of an iOS device is a whole new sort of canvas that gives you the opportunity to explore rich interactivity. Every application is unique and at some level there will be room for novel concepts, making these useful and delightful will truly excite your users.

iOS is quite capable of support for custom font rendering, which is great news for type geeks. The default "System" font on iOS is (mostly) Helvetica Neue, but there is a wide range of built-in fonts available. Every iOS major update seems to add wider font support, so perhaps with iOS7 we'll see even more packaged internally.

Designing Icons
Typically Icon design is a seperate process to the User Interface design, as it is more of an illustration exercise. Albeit with lots of thought going into app branding, metaphors and style cohesion. In terms of style it's important to maintain consistency by balancing the established iOS style and the style of your app. Even "flat" icon designs tend to include some three dimensional aspect to create that visual link.

By default iOS treats app icons with rounded corners and a gradient shine. The standard way to supply your icons is as a rectangle with no transparency which iOS will then decorate. While Apple does not guarantee consistency with the rounding it is possible to find guides to how much rounding is applied so that you can appropriately design your icon. You are also able to disable the gradient shine by indicating your icon is "precomposed".

Description                           Retina Size (px)  Normal Size (px) Optional?
App Icon for iPhone                   114 x 114                   57 x 57                   no
App Icon for iPad                   144 x 144                   72 x 72                   no
App Icon for App Store           1024 x 1024                                    no
Spotlight Search Icon on iPhone     58 x 58                   29 x 29                   yes
Spotlight Search Icon on iPad   100 x 100                   50 x 50                   yes
Settings Icon on iPad                   58 x 58                   29 x 29                   yes

Exporting Resources
A very important and often neglected part of the design process is the provision of resources for development. It is best that the original designer (that's you) is the one who packages and outputs resources from the source design file, they are the one who understands the design best and so will be the best for "cutting it up". An accurate, complete, consistent and well documented set of resources significantly reduces the amount of back-and-forth needed with developers and you'll get end results much closer to your vision.

At a base level you'll need to provide a set of images in PNG format. Each image will represent an individual piece in your UI. For example you might have a generic-button.png and icons to be put on top of that button like add-note.png and hamburger.png. You'll also need to hand over things like fonts, font sizes, dimensions and colours.

Retina Resources (@2x)
For each image resource you export you'll be creating two images. One is the @1x resource and the other is the @2x (retina) resource. The retina resource must be exactly two times as large in each dimension as the normal resource. So a 44 x 88pt button will have a 88 x 176px retina resource. The retina version of your resources have the same name as the original, but you write @2x on the end. So for a button you're exporting you would create button.png and button@2x.png.

Slice Sheet
To prepare your user interface for exporting you should create a seperate canvas which will exclusively be for exporting. Rather than trying to chop up the design in place, pull it apart piece by piece and lay it out on a grid. You should make sure all similar resources have the same dimensions and are padded to the right size where appropriate. For example all your tab button icons should have the dimensions of the tab button (so you get to choose where on the button they appear). Consistency and predictability with resources helps developers avoid adding hacks to push resources around that are misaligned, which makes your design much easier to update.
One of the more important reasons for having a Slice Sheet is that it's very easy to update, tweak or correct resources. By having a single place where all outputs happen, where everything is named correctly and no layers need to be hidden or shown to correctly output the right elements you make your resources very easy to re-export. Re-exporting is likely to happen if certain icons aren't quite working or small parts of the aesthetic change. Keeping a Slice Sheet reduces the effort of exporting and allows you to make changes to your design up to the last moments of testing.

To make sure you haven't forgotten anything, here's a list of things you'll probably want your developer to have.

Fonts - 
Any fonts you used in your design in TTF format

Image Resources -
All the individual UI images @1x and @2x in PNG

Icons - 
All the icons (and retina versions) for your app in PNG

Splash Screens -
Appropriate Splash Screens for the devices you support

Storyboard -
A big diagram of screens showing how to get from place to place

Dimensions and Constraints - 
Diagrams explaining dimensions of UI elements and their layout constraints

Animation Details - 
Timings, videos, frames and diagrams explaining how animations and segues should work

Colours -
An exhaustive list of the colours used in the app as RGB or HSB, it'll help to name them

Resource Diagrams -
Diagrams explaining which bits of the UI are made up of which resources and what those resources are called

Font Labelling - 
Label all UI elements with the Typeface, Weight, Styling and Size

Further Reading

Monday, October 13, 2014

Moving down arrow using CSS3 animation

Step 1. Add below div in HTML body section 

 <div class="arrow animated moving">   </div>

Step 2. Add below CSS in css file 

@keyframes moving {
  from {
    transform: translateY(-20px);

  to {
    transform: translateY(0);

@-webkit-keyframes moving {
  from {
    -webkit-transform: translateY(-20px);

  to {
    -webkit-transform: translateY(0);

body {
  background: black;

.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;

.moving {
  @include animation(moving 2s infinite);

Smooth scrolling when clicking an anchor link

1. Add below coder in script

<script src="js/jquery.min.js"></script>

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
          scrollTop: target.offset().top
        }, 1000);
        return false;

2. Add below coder in HTML

<a class="" href="#1">See ore</a>

<div name="1"  class="onerow"> </div

Thursday, October 9, 2014

Bootstrap Advantages

Bootstrap has a lot of advantages over starting from scratch on your web dev projects. One of the biggest reasons is the vast number of resources available for Bootstrap, especially when compared to a lot of other frameworks and boilerplates

But beyond the resources available, there are a lot of other reasons to use Bootstrap:

It’s easy to use: 
getting started with Bootstrap is a pretty quick and easy process. And it’s flexible: you can use it with Less or CSS, and even Sass (if you download the Sass version).

The grid: 
Bootstrap uses a 12-column responsive grid. It even supports nested and offset elements. The grid can be kept responsive, or you can easily change it to a fixed layout.

Faster development: 
because Bootstrap has so many ready-made components and resources available, it can significantly speed up your development process.

Base styles: 
Bootstrap comes with base styles for a ton of HTML elements you’re going to be using anyway. It includes styles for typography, forms, images, and much more.

Pre-styled components: 
Bootstrap also comes with pre-styled components for dropdowns, nav bars, alerts, and many others.

Bundled JavaScript components: 
Bootstrap comes with a bunch of JavaScript components to add functionality. It makes it easy to manipulate things like modal windows, tooltips, alerts, and more. You can skip writing scripts all together.

Excellent documentation: 
Bootstrap has exceptional documentation available, which is useful for both beginners and more advanced users.

Easy integration: 
Bootstrap can be integrated with a variety of other frameworks and platforms, on both new sites and existing ones. You can even use just specific elements of Bootstrap alongside your existing CSS.

Wednesday, June 11, 2014

Stick Menu top when scrolled content...

<div class="scroller_anchor"></div>
<!-- This div will be displayed as fixed bar at the top of the page, when user scrolls -->

<div class="scroller">This is the scrollable bar</div>


// This function will be executed when the user scrolls the page.
$(window).scroll(function(e) {
    // Get the position of the location where the scroller starts.
    var scroller_anchor = $(".scroller_anchor").offset().top;
    // Check if the user has scrolled and the current position is after the scroller's start location and if its not already fixed at the top 
    if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed') 
    {    // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
            'background': '#CCC',
            'border': '1px solid #000',
            'position': 'fixed',
            'top': '0px'
        // Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
        $('.scroller_anchor').css('height', '50px');
    else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative') 
    {    // If the user has scrolled back to the location above the scroller anchor place it back into the content.
        // Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
        $('.scroller_anchor').css('height', '0px');
        // Change the CSS and put it back to its original position.
            'background': '#FFF',
            'border': '1px solid #CCC',
            'position': 'relative'


Big Checkbox with HTML CSS

label {
display: inline;
.regular-checkbox {
display: none;
.regular-checkbox + label {
border: 3px solid red;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
display: inline-block;
position: relative;
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
.regular-checkbox:checked + label {
background-color: transparent;
border: 3px solid red;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #FFFFFF;
.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: red;
.big-checkbox + label {
padding: 18px;
.big-checkbox:checked + label:after {
font-size: 28px;
left: 6px;
top: 0px;

.radio-inline, .checkbox-inline { display:inline-block;  margin-bottom:0; vertical-align:middle;   cursor:pointer;}



<div class="margin20Bottom"> 
<p class="checkbox-inline font14 colorWhite "> <input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label> 08:00h - 12:00h</p>

<p class="checkbox-inline font14 colorWhite"> <input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label> 08:00h - 12:00h</p>