css3 – Sass Variable in CSS calc() function – Stack Overflow
Use Interpolate: body height: calc(100% – #{$body_padding})
Source: css3 – Sass Variable in CSS calc() function – Stack Overflow
Flexbox guide
Snippet for positioning items centered horizontally and vertically:
|
1 2 3 4 5 |
display: flex; /* turn flexbox on */ justify-content: center; /* center horizontally */ align-items: center; /* center vertically */ |
Snippets for container positioning items and IE10 rules:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* IE 10 flexbox cheatsheet */ /* enable flexbox */ display: flex; display: -ms-flexbox; /* container - horizontal align items */ justify-content: flex-start | flex-end | center | space-around | space-between; -ms-flex-pack: start | end | center | distribute | justify; /* container - vertical align items */ align-items: flex-start | flex-end | center | stretch | baseline; -ms-flex-align: start | end | center | stretch | baseline; /* container - vertical height for items when extra space is available (multi line) */ align-content: flex-start | flex-end | center | space-around | space-between | stretch; -ms-flex-line-pack: start | end | center | distribute | justify | stretch; |
Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/
Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/
Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4
CSS to highlight layout – great CSS hack
Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies when working with the overall layout of elements…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
* { background-color: rgba(255,0,0,.2); outline: 1px solid rgba(255, 0, 0, 0.5); } * * { background-color: rgba(0,255,0,.2); } * * * { background-color: rgba(0,0,255,.2); } * * * * { background-color: rgba(255,0,255,.2); } * * * * * { background-color: rgba(0,255,255,.2); } * * * * * * { background-color: rgba(255,255,0,.2); } * * * * * * * { background-color: rgba(255,0,0,.2); } * * * * * * * * { background-color: rgba(0,255,0,.2); } * * * * * * * * * { background-color: rgba(0,0,255,.2); } |
10 Best CSS Frameworks for Front-End Developers
Firefox Developer Tools – filtering in the network tab request list
The current filter will only show the request matching a GET and contains url user:
method:GET user
(used under F12, tab network, filter text input)
Source: Network request list – Firefox Developer Tools | MDN
Official Microsoft Edge Preview builds available (based on Chromium)
Microsoft has just unveiled official preview builds of the upcoming Microsoft Edge web browser that is based on Chromium. Interested users can head over to the Microsoft Edge Insider website to download Beta, Dev, and Canary builds of the upcoming version of Microsoft Edge for Windows 10.
Source: Official Microsoft Edge Preview builds available – gHacks Tech News
Bulma: Free, open source, & modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and used by more than 150,000 developers.
- responsive mobile first
- css only framework
- sass
- supports modern browsers
- partially supports ie10+
- easy to understand and readable css classes
Site: bulma.io
Getting started with bulma video: https://www.youtube.com/watch?v=MchBPICewgs
Internet Explorer 11 and Angular 2+ – Agilix – Medium
IE 11 and Angular don’t always mix. I must say that there’s quite the support provided by the Angular dev team and community. But, there are things that really aren’t up for the Angular devs to fix.
I’ve created a small list of issues I’ve encountered when developing and Angular 5 application for an IE 11 client.
Source: Internet Explorer 11 and Angular 2+ – Agilix – Medium
Real world example code for popular front-end and back-end frameworks
This is taken from Jon Hilton, Quick Tip Friday newsletter.
You can subscribe to the newsletter here: https://jonhilton.net/
Its a great tip regarding example code for popular web frameworks (also mobile in the works), for example ASP.NET Core on the backend side and Angular or Vuejs on the frontend side etc. See list of backends and frontends here: (scroll down there are many options…)
https://github.com/gothinkster/realworld
Building software applications is hard, but doing it in isolation is even harder.
And, unless you’re one of the fortunate few who work in a perfectly balanced team with just the right amount of experienced developers to lean on, you’re often left figuring all this stuff out for yourself.
· Architectural best practices
· How to organise your code
· How to separate your concerns
· Which ORM to use
· How to KISS (keep it simple stupid) and avoid incurring loads of technical debt
But, just because you haven’t got a supportive, experienced and wise team physically on your doorstep doesn’t mean you have to re-invent all the wheels yourself!
Specifically I really want to recommend you check out the “real world” examples over at https://github.com/gothinkster/realworld.
There, they take the exact same application (a Medium clone) and show examples built in all manner of front-end and back-end frameworks.
So if you’re looking to see what a good ASP.NET Core API application looks like (or React, Angular, Vue.js or anything else you can think of)