Posts

Showing posts with the label Bootstrap

User-Agent Styled Web Applications

This idea came from awhile back when I was working on my project rustkickers. The purpose of the site is to provide documentation on all things motor related. While working on a demo for the site used a old car manual to create some of the designs. That goes me thinking why not make multiple site designs around different car manufactures. Then even further down the rabbit I landed here, which is what this article. Another thought but a cool one I think and yes I know you can't trust the user-agent but it doesn't matter its just the style not the content. 

Intial Solution
Optimizing content for different browsersFilter based on webkitChrome conditional commentsIs there any equivalent to IE conditional comment for chrome and safari?IE10 CSS Hacksload webfonts through the offline storage cache manifestAfter playing around with this idea for awhile I figured handling this is the frontend at all was not worth it because of performance. Unless your looking at it with a single css a…

Using Html Entities rather than Icons

This article is my opinion on the subject of html entities vs. png or icon files in a web application. If you have been watching bootstrap and seen the beta version of bootstrap 4 you might have seen some of the examples using entities. Initial I thought this was an improvement and in a lot of ways still do. But now I have given it some thought about the longer term of solution. I still think font-awesome is a much better choice to go because of the ability to modify the styles or simply create custom ones in a svg.  I know entities are nothing new but just wanted to write out why I would use them in some cases and not others.
Use case for Entities For one of my sites I actually used the up and down triangle entity. I think it’s a good fit for one the ui-grid and other javascript libraries that require some kind of indicator of sorting. In this situation it’s really a grey area of whether the icon should be an icon or entity because in this use I'm not going to style it all that…

A Very Un-Bootstrapy Navigation

Sometimes you have to create something against your own principles but this isn't too much of a bad design its just that doesn't have a place in the modern web. I took this code from the https://getmdl.io/ website and removed all the code not related to this feature. Also just to be clear I didn't use bootstrap to style this, the point is that this design goes against bootstrap's guidelines. However it does solve a problem for me when project managers won't listen to my suggestions. Later I will come back with angular directive on this.


Solution: https://github.com/fassetar/blog-examples/tree/gh-pages/horizontal-collapse-nav



Resources
https://docs.angularjs.org/api/ng/function/angular.elementhttp://stackoverflow.com/questions/27576643/finished-loading-of-ng-include-in-angular-jshttps://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

CSS3 Vertical Scrolling Text

Initially I created two separate ways of implementing, both used css3. The solutions I landed on was the one that allowed me to reposition the starting point for the scrolling text. I couldn't remember the more popular name for this type of feature but it doesn't matter the title kinda explains it better. It's sorta like when I'm looking for an autocomplete feature in bootstrap and keep forgetting that its called typeahead, since my first introduction was with jquery-ui. On a final note I did create a directive in angular to handle creating the content but its not necessary for the solution.

Modified someone's  code to work the way I wanted, but later I will be using this for one of my projects.
Solution:https://codepen.io/anon/pen/yJqbjV

Resources
http://www.html.am/html-codes/marquees/css-slide-in-text.cfm

Infinite loop
http://stackoverflow.com/a/13309775/1265036

UI-Bootstrap Collapsible Sticky Footer

I could have done this a lot of ways and ultimately I made it work with javascript modifying the class names. I also had to create multiple class names which I didn't like to much, I might come back and improve this but for now this is was I got. Also I call bootstrap+angularjs = ui-bootstrap, not sure if that's common sense but thought I should include it somewhere in my notes.


Working Example:
http://plnkr.co/edit/2N9ENlbw3bSvg1W9n0ch?p=preview

This little css was key to prevent any kind of animation on the collapse, which would result in a scrollbar appearing on the body. A scrollbar can appear when the content's too long but not on the sticky foot duh!

.no-animate { transition-duration: 0.0125s; }

Research
Angular-UI Bootstrap Collapse without animation - Stack Overflow
http://jsfiddle.net/paulalexandru/Z2Lu5/ - Was looking at this to see if I could reuse it but I ended but just doing my own thing.


Another way which I've seen

Using a sticky nav and position to the…

Bootstrap integrated UI Block with Zero Flicker

The jquery plugin “UI-Block” is an oldie but goodie, which has helped me in some hairy situations from previous developers' work. A lot of code I come across isn’t prepared for delays but this library is the easiest way for handling delays and preventing user click events after ajax calls have happened. A while back I created a graph to help create consist flow for all the possibilities but I may have over just over complicated. With this new approach I have a straight forward solution that doesn’t require much js code. Rather that using JavaScript it uses. css for performance reasons. There is a angular UI-Block and even a update version of UI-block for bootstrap, but I didn’t see the performance of either that I was looking for.
Inside a div element! The final piece is important. found an example - http://jsfiddle.net/wilsotobianco/b5LkaLan/2/ which I need to recreate, but for now I just used the modal for global use and inside the div display a process bar or gif spinner. The …

Bootstrap: File Input Style + Angular

Usually with file inputs for bootstrap I use simple  the "form control" class however it comes up too often for a little more. With my recent article on using font-awesome for checkboxes, I've been working to create the same approach. I even have an example I can show later on, right I'm using it to demo a service I have for parsing pdfs. Before I found the font-awesome idea here are some libraries or resources I found to add top of that. I'm using both of the angular links in one or more projects!

Libraries
jasny bootstrap
dropzonejs

With Angular Support
http://nervgh.github.io/pages/angular-file-upload/examples/simple/
https://github.com/danialfarid/angular-file-upload

Notes
http://bootsnipp.com/snippets/featured/bootstrap-drag-and-drop-upload

Bootstrap Styled Checkbox with FontAwesome

I was inspired recently when I cam across some quick css that leverage font-awesome for browser specific inputs, which I liked so much I wanted to further but as luck would have it I already found a project that did this. Which added support for the different types of components in bootstrap. I'm still looking for a project does this with the file input style. Regardless if I don't I'm going to make one and adapt it in a project that uses my npm package.

References
http://codepen.io/jamesbarnett/pen/yILjk/
https://github.com/flatlogic/awesome-bootstrap-checkbox

Side note
https://github.com/HourlyNerd/angular-bootstrap-checkbox

Combining Bootstrap and Font-Awesome without Overlap

For sometime I've wanted to merge these two libraries together without creating too much work for myself and reduce as much overlap as possible. I have completely moved toward the sass side for my development. I've come up with three approaches but I think the best one is the third one and it little more work than I would like.

First Approaches
Using an regular expression in node to remove whatever classes and component. This would be great for multiple projects and helpful reducing css on features not in my bootstrap projects. I'll keep this short because I plan to go more in depth for another project.

Second Approaches
Before I had my npm project I was trying to use grunt-uncss in by looking at the document pages from the source and simply removing the components and icons I didn't want! This would only work with the finally solution of the css and I found a few bugs with media queries.

Third Approaches
Using an approach like the one in my npm package flavorstrap a…

UI Design for Processing Modals

Image
Dialogs, Light boxes, and Modals whatever you call them are a common interface used in websites. When I started out I constantly had to write code to handle multiple situations. After writing a few I started to list a few behaviors I think should happen in/after a modal close. Without going to deep in an explanation I really just wanted to come up with a good way to include offline mode in my applications.
Rules Not all of them but just some examples, the image is a better example. Every action must give imitate feedback to the user (results can be async). I.E. "Buy" will convert to "Processing" Information should be logged and stored for users to retrieve it. Applications Types of applications these I thought of. Ecommerce quick way to buy Settings in a Dashboard Post back or User session stored variables. Social Media Log ins When attaching or connecting to main site account. Pretty much any modal that modifies back-end data.

Flavors vs.Themes for CSS Libraries

Colors aside there's a lot more happening in css themes that one needs to develop or maintain. So I've asked myself countless times if I should just create my own Css library but time was always against me. I think having bootstrap as a base line is a good starting point. Not only for my sake but non front-end developers. As a front-end developer organization with my teams is critical. Every application sooner or later ends up with too many developers doing their “own thing” especially with the styles if there is not standard or company brand. Don't get me wrong the freedom can sometimes be great for a creative projects. However when looking to creating a brand, my applications need to force some rules. I'm not looking to challenge other developers on their approach to new things or change the way they develop. If I can include them in my work flow and at the same time organize them then I will.     So what I'm leading up to is this idea flavors instead of theme…

My Career at Coriell Institute and Personal Achievements

Image
The time has come where I need a change in my career and sadly that requires me to leave my current position at Coriell Institute. So just like what I did way back in 2013 with Northern Safety, I thought I would wrap things up in an article and look back on my achievements. 
Achievements (Order of Completion)
The ones with asterisks are ones I built in groups. 
Atlas Project - Storage Module -Provided an interface to store unique data sets in multi-forms.Coriell Bio-Repository Catalog* Atlas Project - Manager Module - Provided managers to control other user to access data.Blits Project - Modules  Issues & Repairs* - Reported equipment  that were broken or had problems.Inspections* - Collected equipment w/ schedules for inspections. Maintenance - Collected equipment  for regular maintenance and setup schedules. Dashboard* - Graphical dashboard on data provided from other modules.My Goals and Plans While attending Coriell, I had a lot of plans to bring the Front-end at Coriell on t…

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
If you've looked at my catalog-demo, you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids.




Code:
$scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); };
Solution: https://fassetar.github.io/blog-examples/uigrid-responsiveheight/

Notes
To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap table is very basic and proba…

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
If you've looked at my catalog-demo, you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids.




Code:
$scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); };
Solution:

Notes
To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap table is very basic and probably could use a lot more styling. Like the column controls could l…

Bower: Installing Bootstrap without jquery

For one of my projects I was using AngularJs and UI Bootstrap. Which converts all the jquery code to angular code and adds some helpful directives. From what I notice with bower was that I couldn't install bootstrap without jquery. Since it was a dependency of bootstrap.
   Note, I'm still working on this! It's important for me publish this since I've gotten so far with it. As started out I thought what I could do was to install the bower components and then try to exclude jquery in a separate folder. However in another article I will look at a better solution. Which will be where just ignore the jquery and combine the files I want. However I can see reasons for both approaches. Like in my case I wanted to remove some nuget packages and then pass off that task to bower, which I think is now how Asp.net vnext is doing it. In my case though there was too many views names js/css files and just too many js and css files.
    So this first part isn't much but I thin…

Bootstrap: btn-lg is smaller than input-lg

Link: btn-lg is smaller than input-lg
Example: input-size-bootstrap

Issue
    In all modern browsers except in IE10+, it seems that the large buttons with large inputs for input groups are smaller. The difference is only a pixel but is noticeable on some screens. To be clear this issue can be avoided if you use the input-group-lg however my test prove that the heights stay consistent regardless which style classes you use. I didn't find this out until I started looking into the issue and I think this is kinda nit picking but something that should be corrected to prevent future mistakes.

Changes
    For my first attempt I tried changing the @line-height-large but if I changed the @line-height-large this affects the input-group-lg, and select input-group-lg as well as the large buttons. So instead to just change the large buttons I set the large button line-height by adding a 0.01 value. This still had problems in firefox, which lead me to the final solution below. File(s) - just thebu…

Server-side Browser Detection with Bootstrap

One thing I love about bootstrap is that it eliminates the need to create separate views or pages to handle both types of clients (mobile/desktop) . A few years back when Asp.net MVC 4.0 first came out and before the big boom of "mobile first" styled css libraries there was a huge additional feature for server side detection. Now this was back in the early parts of my career so I was not sure where this feature would fit in or if it would ever. Since then I have been looking at all types of frameworks and server side detection systems but ultimately have been moving toward the bootstrap style mentality until I looked at my blog. Blogger actually does all the work for me so I didn't have do anything to create this.
    The thought behind this is to minimize the amount of information you sent to the user. Its great that you hidden it to the user on mobile devices and even design it with them in mind. However they are still getting all that information, which seems lik…

Bootstrap: Navbar Header

I don't see too many examples in bootstrap with something like this but what it is incase you don't know is a banner of some kind above the navbar. In fact I don't see too many sites with this kind of structure lately and from my experience I can understand why not. If you're going for responsiveness it's difficult to create since you are always checking to see if you have enough space on both sides for whatever it is your trying to display in between. From the sites that I have seen that do have this can really pull it off and use something similar to bootstrap's affix feature.
    When I first started using bootstrap which was sometime around 3.0, I was using the navbar-brand to hook into the styles already written for me. However since bootstrap 3.1navbar-brandhas now been given a height where before I was using the image's auto or attributes to adjust the height. I was able to give my header an even amount of padding around my header which might not …

Compiling Bootstrap LESS using Asp.net MVC and Web Essentials

Image
My goal is to work with others in whatever framework they choose but I'm constantly update css styles with a pre-processor so that I do not have to work with the css libraries directly. Download the  Web Essentials and the Bootstrap less nuget package.


I see it all the time where developers install the wrong packages, sometimes theres ones with similar names and you just not sure what the differences are. So just so we're clear its the first package with the bootstrap .less in the name. Just search for bootstrap less as two seperate keywords, should be no problem.

Solution
For this solution did not have to change thing with my setup or move around files on the directory once I got things up and running. I even made it easier for colleagues to come into web applications without any problems so in case they are new to bootstrap they can simple ignore the less files. Now what I did was create separate bootstrap.less file and did some regular expression @import " replaced wi…

Ng-grid: Sorting Ascending and Descending with Font-Awesome

I wrote this little snippet for some requirements a while back but since it's so general and if it helps the project to have a quick template to grab it I think it would be much greater to share. Also I was just wanted to write out the documentation as I was learning Angularjs along with ng-grid for the first time during the time I wrote it. So it should be clear that the dependencies are Font-awesomeNg-grid and Angularjs for this snippet.

When I wrote this when I was using Angularjs v1.2.16 stable, font-awesome v4.1.0 both it should not be a problem moving forward but with Ng-grid I used v2.7. It may break with later version as I know a lot has or will change in the template. This snippet should work in all browser but I only tested for Chrome, FireFox, IE8 and greater.

My Code
$templateCache.put("headerCellTemplate.html", "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\&q…