-
Notifications
You must be signed in to change notification settings - Fork 0
Getting Started
Adam Blankenship edited this page Aug 14, 2016
·
8 revisions
Cellular is a front-end ecosystem built for providing simple implementation of complex designs through the use of contextual references.
As a user interacts with a page, javascript is used to manage state and update DOM classes accordingly (only adding style attributes when necessary), while sass/css is used as the primary means of controlling the visual display and updating of elements through the use of transitions and transforms.
As a user navigates through a page, DOM classes are updated on the page <body> to reflect the current state (i.e. the page-top/page-middle/page-bottom class will update as the user scrolls through the page). Using this approach, developers may easily add conditional interactions and styles, i.e.
// Show a "back to top" button when user reaches bottom of page:
$(window).on('scroll', function(){
var thebtn = '.backtotop';
// Add 'active' to button when user reaches bottom of page.
$('.page-bottom').find(thebtn).activate();
// Remove 'active' class from button when user reaches middle of page.
$('.page-middle').find(thebtn).deactivate();
});