27Nov 2019 by Ruben Canton No Comments

How to theme styles with Angular and SASS

Web design, Web programming
With so many components and pieces of code in an angular application, CSS, cascade styling, may not be so straightforward as styles may be loaded in different orders or affect other components when you less expect it. Though after 15+ years styling websites, I was more than used to organise my styles in a proper way to have everything working nicely. Or maybe I never had such a big website on my hands for this to be an issue. But now that styles are encapsulated in the component when you give it some, while very useful to specify local styling (which still inherits the global) it can become painful to then maintain some sense of cascading, like how to reference a style in the parent to determine your child's one.…
Read More
06Aug 2019 by Ruben Canton No Comments

Web Development resources

Other, Web design
A few links to resources to build your own website FreeFrontEnd.com Website with free stuff to add to your website, like this list of CSS loaders. Unsplash A database with thousands of great Creative Commons photos free to use on your website. CodePen and jsFiddle Both are quite good online editors to test some stuff in a clean environment and even share such example with other devs. Json Formatter When you need to check a JSON object with tabbing, collapsing and colors, this quick online tool really helps.
Read More
05Apr 2019 by Ruben Canton No Comments

Email templates

Software Development, Web design, Web standards
Creating email templates can be a tedious task, with so many rules between different email readers, most of CSS not really working and us devs now so used to SASS and LESS, just the idea that they still use tables terrifies me a bit. There's the possibility of buying a template, but in my experience that may not be the best approach; companies that sell templates as a business model tend to obfuscate as much as possible of their product, and being HTML+CSS this means they will run some algorithm on it creating weird stylesheet keys and stuff just to make your editing life a painful hell. So the alternative, apart from creating a very simple and plain email, is to go opensource. Yes. There are some opensource email templates…
Read More
06Feb 2015 by Ruben Canton No Comments

Post template

Web design
This is a post to test how do styles look in my blog in case I were to change the theme, so I'm going to add some Lorem ipsum paragraphs with some stuff I usually have when I write a post: Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri…
Read More
10Oct 2014 by Ruben Canton No Comments

Style your map with Snazzymaps!

Web design
I just found this page by accident and looks so awesome: Snazzymaps. It has several templates to style your Google Maps on your page so that it looks more elaborated. You can adapt the map to concrete articles like the Midnight Commander style or use a Greyscale to give the map some "vintage" style, or even make it have tones related to your brand colors!! Just have a look. Ah, and in case you want to make your own template you can use this tool :) Some cool ones: Bobbys world Flat map with labels Too awesome to describe Mr Blue
Read More
20Feb 2014 by Ruben Canton No Comments

Styling a checkbox using CSS3

Web design, Web programming
Got this idea from tutsplus but found a problem with iPad so just wanted to save it on my blog: Taking advantage of the ":checked" selector at CSS3 we can now style a checkbox using this: [sourcecode language="css" wraplines="false"] input[type="checkbox"] {display:none;} input[type="checkbox"] + label .fakeCheckbox { display:inline-block; cursor:pointer; vertical-align:middle; width:19px; height:19px; margin:-1px 4px 0 0; background:url(check_radio_sheet.png) left top no-repeat; } input[type="checkbox"]:checked + label .fakeCheckbox { background:url(check_radio_sheet.png) -19px top no-repeat; } [/sourcecode] The idea is quite similar to what we would do using javascript but instead of using a script to set the "on/off" we just use the CSS3 :checked selector to know if the radio is on/off and determine the background position of the span (fake checkbox). A nice improvement on previous method. That said, there is a bug on…
Read More
19Feb 2014 by Ruben Canton No Comments

Help your designers to be more creative!

Web design
There's many times when your designers come to you with some crazy ideas that aren't good at all for websites as it would crash the layout too much or stop working on some browser/device due to compatibility, but many times what happens is just the opposite, they just don't dare to ask for too much just in case, making too simple designs, or even worst, as technologies improve things that were not possible in the past now become possible, but as they are focused in designing they aren't aware of the new CSS3 possibilities or any other coming, it is then for you to tell them what could they do to make sure your website design will be as cool as possible. Style Properties Let them know about some CSS…
Read More
04Feb 2014 by Ruben Canton No Comments

CSS Tips

Web design
Some guidelines I find useful when writing CSS styles: Use an identifier, not the tag name Except for setting those general styles at the body, headers, anchors etc. you should never go for this: [sourcecode language="css" wraplines="false"] .someRegion div { ... } .someRegion div a { ... } [/sourcecode] Just because you may decide to make that "div" a "p", or an anchor, which would force you to change the style selector to maintain the style. But also, because forcing a combination of HTML tags could make you lose styles or scripts assigned this way in case the DOM chain changes (moving an element outside of its "div" or "p"). A better approach would be: [sourcecode language="css" wraplines="false"] .someRegion .myElement { ... } .someRegion .linkType { ... } [/sourcecode] Don't…
Read More
14Jun 2013 by Ruben Canton No Comments

Reviewing Impress.js book

Web design
I was given the opportunity a few days ago of reviewing an impress.js's book wrote by Rakhitha Nimesh. As I said a year ago, impress.js is a javascript library that allows you to create impressive presentations like this one. The original idea seems to come from Prezi, but for all of us who like programming, making our own tools and storing our presentations in our own server, impress.js becomes our ally. This book covers an introduction to impress.js, teaches the basics of how to install it, create elements, position them, interact with them and make transitions etc. But goes beyond that explaining you how to create websites using impress.js to totally crash the limits and make the perfect portafolio (something I'm looking forward to try myself!). Also, the book includes…
Read More
16Aug 2012 by Ruben Canton No Comments

CSS not being loaded in Internet Explorer

Web design
Today I had a weird problem, as Internet Explorer (who else could it be) was not loading my CSS file and the website was not displaying any style at all in that browser. After checking here and there, it seems IE only loads the first 31 CSS files you have and not the rest. Luckyly I was not really trying to load that many style sheets, as by accident a folder with jQuery demos was included in the project App_Themes folder and that loaded many sheets for the different demos. Once the jQuery demos folder was removed the page worked nice. Warning: If you were releasing in a development server you may need to remove all the files manually before releasing again.
Read More
25May 2012 by Ruben Canton No Comments

Adding helping boxes using jQuery ui plugin

Web design, Web programming
Once you have installed jQuery and Jquery UI, we can add some helpBox divs to our html like this: [sourcecode language="html" wraplines="false"] <asp:TextBox ID="txtInformation" runat="server" TextMode="MultiLine" Rows="5" CssClass="desc required" ></asp:TextBox> <div class="helpBox">This is a helping box.</div> [/sourcecode] Then set a javascript to position the boxes and show them only on focusing the previous item: [sourcecode language="js" wraplines="false"] function setHelpingBoxes() { $('.helpBox').each(function () { $(this).position({ of: $(this).prev(), my: "left center", at: "right center", offset: "10 0" }); $(this).hide(0); $(this).prev().focus(function () { $(this).next().show(300); }); $(this).prev().focusout(function () { $(this).next().hide(200); }); }); } [/sourcecode] And finally, don't forget to add the styles! [sourcecode language="css" wraplines="false"] .helpBox{width: 150px;padding:5px;position: absolute;display: block;right: 0;background-color: #bcd5e6;text-align: center;} [/sourcecode]
Read More
13Mar 2012 by Ruben Canton No Comments

CSS: Using a different image in list bullets

Web design
We can use a different image as a bullet for our lists, just using something like this: [sourcecode language="css" wraplines="false"] .myCustomList li { list-style-image:url('imgs/Bullet.jpg');} [/sourcecode] So nice, unfortunately that css property has its limitations and may not fit our purposes if the image is too big or we want to show it in a special way, in that case, its better to go for the background property and make a fake bullet: [sourcecode language="css" wraplines="false"] ul.myCustomList {margin:0;padding:0;} .myCustomList li {list-style:none;background:url('imgs/Bullet.jpg') left 5px no-repeat;padding-left:20px;} [/sourcecode]
Read More
06Feb 2012 by Ruben Canton No Comments

The impressive impress.js

Web design, Web programming
I've just dicovered the library impress.js which is an amazing tool for presentations beating those you get with PowerPoint just using CSS3. It only works in the most up to date browsers but, aren't desktop presentation tools also requiring an specialized software? You need to use Chrome, Safari or Firefox 10 to visualize it but that's far more easy to get and install than other products. You can see a demo here. As soon as you have one of the newest browsers, if not, you can at least read it. Superb :) So sad you cannot use it to impress ALL your visitors yet, but you can at least impress in a conference.
Read More
12Jun 2011 by Ruben Canton No Comments

Web color schemes

Web design
When designing a website profesionally colors cannot be left to an approximate decision. As said in my post about design consistency, colors have to remain the same through all the page to give the user some info. So, if you choose red as the brand color it will not be a great idea to have 7 different reds around the page giving confusion to the user and showing the non good idea that your company departments do not coordinate properly or maybe your designer doesn't take his/her job seriously. Schemes are designed just for that purpose, there should be only a few colors and you should be able to play with them so that the website looks good and the usability is improved using them. As I read once, a…
Read More
04Apr 2011 by Ruben Canton No Comments

CSS tricks

Web design
Here are a few CSS tricks very useful for Front End programmers: Convert an element from inline to block and viceversa Some tags are thought to be inline and some others to act as a block. That is why some tags have some default style like margins or paddings and also, some of them will not act as others when you apply some style. For example, an anchor (inline tag) with a with=200px; will not use that space because its an inline element, but you can change its behavior with the property display:block, display:inline, display:inline-block, display:table, etc. With display:inline-block; it will maintain most of its inline behaviour but use the width or height you place, unfortunately this value has some problems in IE, so I recommend you to focus on…
Read More