Posts

Showing posts with the label CSS

Material Angular Time Picker

Image
Continuing off my article on android's material timepickers I wanted to include this feature in the web based version of mypatco. I don't think it will be officially included in the material angular project but just something I could have as my own and if anyone comes across it to use it just as any other component. The key difference with timepickers vs. datepicker just picking time, since time is a more necessary feature for cases like notifications or alerts/alarms.



First and foremost I recommend checking out the project which I forked to personalize and strip out any code related to datepicker. Since the datepicker is already implemented in material angular, instead I'm just going to focus on time pickers.  The rest of my notes are in the repo's issue tracking. You may see the results on mypatco.org for an example.

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

AngularJS: Single Page App Notes

This is article long overdue and I just wanted to talk about a few things I think others should know before starting. My first piece of advise is use use ui-route rather than ng-router. Really get to know ui-router because of its awesomeness.

Using Parameters
    I've come to really enjoy using parameters in all my apps and if you work with them well enough you can find some really cool ways to simplify your code. Example using the value of a parameter to set up detailed information in a child view saves time building out the whole app because with the url you can save the state. Just a small way to change your app rather than always looking up a global list. So that in mind for tracking information. Also when possible make "beautiful routes" or readable routes it helps other people following the structure.

Backward Compatible
    I have been able to get ui-router to work with ie8 using es5-shim, if you don't need to control the browser history you pretty much saf…

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

Company Logo's by CSS and maybe with Seo support?

Overview What I want to do is take a company logo and instead of an image to display is by css instead. Then using the favicon of the as the seo image and for backward support on older browser. With css3 animations this would allow me to add more flare to the logo as well as the company name that usually appears inside the logo image. This Separation would give much a lot flexibility as well as quality over an image.
Example Below is an example of a logo (similar but exact to company logo), and as stated usually a company name is either beside the logo or the company itself is apart of the logo. With internal apps I would reuse this logo but not the company name.
Code: https://github.com/fassetar/blog-examples/tree/gh-pages/logo-svg

Notes     I haven’t fully tested this on a website buts it’s still just an idea and if it works it could save time retrieving the logo in a single favicon which can still be a png. There is were a fallen can take place, in my example I didn’’t show this but ju…

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…

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…

The Three Types of Material Design Libraries Available

Image
There are a tons Material Design projects out there but I choose these three because of their popularity and for the fact I just found these projects interesting for a few of own projects. I work in a variety of environments so each gave me certain advantages over the other. This article is just how I broke them down and what projects I plan use them for.

https://material.angularjs.org/Useful for when you are using angularjs.missing some stuff or just not shown in the documents.Great for my single page example.http://fezvrasta.github.io/bootstrap-material-design/Useful for bootstrap project and updating them to material design themes.Wish they used Sauce labs Tests like bootstrap.Great for updating my bootstrap sites and my blog.https://github.com/Dogfalo/materializeUses Jquery, and simple to get up and run just like bootstrap.Very close to other css libraries but still different; only a question of how much support.Great use for my emberjs project.

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…

How Does Font-Awesome Work?

Image
So I asked myself one day how does this cool library work and how can I start making my own vector scaled icons? They are many reasons why I might want to create my style of font-awesome and understanding what going on behind the scenes. Rather than just use some png files into a sprite they can be embed icons in the style sheet. Font-awesome kind of hides the icons in the stylesheet with before and after content.
      Without going too deep into the rabbit hole, and to somewhat answer this question in my own words. I would say that font-awesome which is being built with Adobe using vector scaled icons that have transparent grey scale in order for customizable color schemes and references them in the css with the "content" style. Not familiar with the syntax being used but the css uses some kind of path points to the icon's location. Example of that is "\f132"which output a shield icon. The file path.less probably explains much of the syntax behind this. 

The Four Components of a Web Application

Image
If I had to go back in time and explain to myself web development (primary what most call front-end) in a nutshell this is how I would organize it. I would purposely leave out explaining to myself any middle tier or backend frameworks as I would place those types of technologies in another category. Which may or may not be how others organize it but I'm open to suggestion.
Structures ( HTML)Not to be confused with styles, controls the structure/flow and order of things.Ignore tags like bold or italic because they kinda break this idea. The same could  kinda be said about a break tag.Styles (CSS) - looks, not functionality but the two do work together a lot!Mobile first baby!Content (Other) - separate from all the rest but drives the app is in Forget for a moment everything you know about databases, middle-tier, back-end or whatever there is that draws your users to a website. Focus on just the meaning around the fact that all information is content and can be located elsewhere.…

CSS3 Transition Rotating Does Not Fit

Awhile back I created an application to display some data inside of a table but after it was all said and done I was then asked if I could make it so the information could be rotated. With that I thought I could easily implement this using CSS3 transition and rotate on the x-axis but I would much prefer doing this in a canvas.Which make this a great solution but current my content is displayed in a table and isn't scalable this way, so it doesn't help for me. I could also use d3js, from what I've seen in the examples it could be easier to implement.
I did find that some created a solution to handle the issue with Css3 transition, where as you rotate the element the content around it does not adjust appropriately. There is reasons behind why this happens, but no proper way to handle it with just css. As you rotate a given element it does not remove or change any of the styles attached to it. So margin, padding and whatever else will still be applied but also as you rotat…

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…

CSS: 0px or 0?

I've used zero's in my styles before but I think it has been an habit of mine to "px". In the end, and it was when I use checking out the features on Web Essentials that I noticed this helpful hint. I think the benefits of choosing one over the over are very small. Something similar to choosing a comma or a double comma in javascript but I find myself in a grey area when it's one habit vs another. So what I've started to do is just use zero's instead. Not a very difficult habit to change but I need to be consistent so it has been more of a pain to go through all my projects and edit all the styles.

Reasons Behind my Choice Saves space using single character.The definition is universal in all browser (zero is zero).There are a lot more reasons in the links below but these are the two the easiest to remember. Also just because I like to use bootstrap with a lot of my projects, I noticed that bootstrap already does this so that is another reason for me to…

My IE Mistake While Styling the Input Placeholder

This was a simple mistake so the article is really short but what I need to do style placeholder color in a dark colored input box. I made the simple mistake of adding an extra colon, but take this as a learning point. Or just as a reminder (mostly to myself) that not all browser specifics follow the same rule. Whether it's single or double I need to be careful which one is appropriate. From what I know the placeholder in Chrome is double colon, IE is single and firefox is both. I don't need to write an article about every minor bug or problem I face but this was just one that I found interesting because I found myself asking why the subtle difference.Also are the difference consistent? Meaning that if I used browser specific stuff on another element is it always double colons for chrome and it's counterparts? I won't lie, I don't have time to explore this anymore than I need to.

Quick Note
   Not every style is a colon  or a double colon and there is a differen…