QUICK TIPS The Flexbox Reading List: Techniques and Tools

Flexbox gives us a new kind of control over our layouts, making coding challenges that were hard or impossible to solve with CSS alone straightforward and intuitive. It provides us with the means to build grids that are flexible and aware of dynamic content, and thus, give us the freedom to focus on the creation process instead of hacking our way towards a layout

To give you a head start into Flexbox and provide you with ideas on how to use it to master common coding challenges, we have collected tips, tricks, and tools that help you get the most out of its power already today. The list is by no means complete but includes the resources which we found helpful and useful.

More

Responsive Image Breakpoints

In our responsive layouts, breakpoints refer to the viewport sizes at which we make changes to the layout or functionality of a page. These typically map to media queries.

Responsive image breakpoints are similar, but slightly different. When I think about image breakpoints, I’m trying to answer two questions:

• How many image sources do I need to provide to cover the continuum of sizes that this image will be used for?
• Where and when should the various image sources be used?

The answers to these questions lead to different breakpoints than the criteria we use to select breakpoints for our responsive layouts. For our layouts, We resize the browser until the page looks bad and then BOOOOM, we need a breakpoint

The main reason why we need multiple image sources has nothing to do with where the images look bad. We want to provide multiple image sources because of performance concerns, different screen densities, etc.

So we can’t simply reuse our responsive layout breakpoints for our images.

Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.

When you first begin to work with Responsive Design you will define your breakpoints at the exact device widths that you are looking to target. Most often these are the smart phone (usually the iPhone at 320px and 480px), the tablet (usually the iPad at 768px and 1024px) and finally anything above 1024px.

Wrong!

You're approaching this in the wrong way.

Instead of being concerned with device breakpoints the best practice is to design for your smallest viewport first. As you expand that view there will come a point at which the design looks shit terrible. This is where you add a break point.

Sass_Ampersand

The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you're struggling and could have written the same code in regular CSS.

Let's see if we can really understand it.

Basic Nesting

SCSS
.parent{
  .child{}
}

CSS
.parent .child{}

You can nest as deep as you'd like, but it's a good practice to keep it only a level or two to prevent overly specific selectors (which are less useful and harder to override).

Add another class

The & comes in handy when you're nesting and you want to create a more specific selector, like an element that has *both* of two classes, like this:

SCSS
.some-class{
  &.another-class{}
}

CSS
.some-class.another-class{}

The & always refers to the parent selector when nesting. Think of the & as being removed and replaced with the parent selector.

"Ahh" moment

SCSS
.parent{
  & .child{}
}

.parent{
  .child{}
}

CSS
.parent .child{}

The example with the & isn't anything different than the example without the&. Nesting without the & is shorthand for nesting with it. We can think of the &as a mechanism that allows us to place the parent selector wherever we need it in our child selector. It allows us to nest with alterations. Let's look at some more examples.

Using the & with pseudo classes

You can write pseudo classes on a class in a much less repetitive way with the &:

SCSS
.button{
  &:visited{}
  &:hover{}
  &:active{}
}

CSS
.button:visited{}
.button:hover{}
.button:active{}

Using the & with >, + and ~

SCSS
.button{
  & > span{}
  & + span{}
  & ~ span{}
}

CSS
.button > span{}
.button + span{}
.button ~ span{}

Read More

5 step to achieve your own personal transformation

1. Complete the past to embrace the future

One of the biggest reasons why we find it difficult to move forward in life is because we haven’t properly dealt with the things that are holding us back. Are you holding onto past hurts, past anger or fear, or past incompletes? Releasing these anchors could be the final step you need to complete your past and embrace your future. I’ve known people who have forgiven their parents and doubled their productivity and ability to achieve their goals, almost overnight. I’ve known others who have finally sat down with an accountant and got their financial numbers in order – and doubled their income in a matter of months as a result. I even know someone who spent the weekend cleaning out his garage once – and scored a new dream client the following Monday!

2. Embrace change

When you resist that change, you risk being swept away by it. But when you choose to embrace change wholeheartedly as an inevitable part of life, looking for ways to use new changes to make your life richer, easier, and more fulfilling, your life will work much better. You will experience change as an opportunity for growth and new experiences, rather than a potential source of discomfort or fear.

Take some time this holiday seasons to consider your life and decide where you neet to grow.

• What’s changing in my life that I’m currently resisting?
• Why am I resisting that change?
• What am I afraid of with respect to this change?
• What am I afraid might happen to me?
• What’s the payoff for my keeping things the way they are?
• What’s the cost I’m paying for keeping things the way they are?
• What benefits might there be in this change?
• What’s the next step I could take to cooperate with this change?
• When will I take this step?

3. Transform your inner critic into an inner coach.

Research indicates that people talk to themselves about 50,000 times a day - and that 80% of that self talk is negative.

So if you have a voice inside you that says things like, “I shouldn’t have said that… they don’t like me… I’m never going to be able to pull this off… I’m a fraud… I’m so disorganized… I’ll never be good enough…” you are certainly not alone.

The problem with all this negative self-talk is that we actually BELIEVE it. Such thoughts affect our attitude, our motivation to act, our physiology, even our biochemistry.

4. Commit to developing four new success habits a year.

Your habits determine your outcomes. Successful people don’t just drift to the top. Getting there requires focused action, personal discipline, and lots of energy every day to make things happen.

So if you want to create higher levels of success, chances are you are going to need to drop some of your current habits – such as not following through on your commitments, staying up too late, watching too much television, making sarcastic comments, eating fast food too often, smoking, spending more than you earn – and replace them with more productive ones.

For example, if your goal is to get to the gym every morning, you might develop the habit of going to bed one hour earlier every night. If you want to be more productive at work, maybe you’ll get into the habit of identifying five main tasks you want to accomplish each day – then not leave the office until they’re complete. Or if you want to improve your relationship with your parents, maybe you’ll get into the habit of calling them at the same time every week just to chat.

5. Stay motivated with the masters.

Achieving personal transformation can be challenging work – and without daily motivation, it’s all too easy to backslide.

One great way to stay on track is to seek out external motivation to keep your thoughts and attitude oriented on success. In my experience, truly successful people commit to lifelong learning and are always reading, watching, or listening to books, videos, or audiotapes that inspire them to keep moving forward.

If you spend even fifteen minutes a day listening to motivational talks, learning a valuable new skill, or discovering the success secrets of the world’s most powerful entrepreneurs, artists, athletes, or other professional titans, it will inspire you to pursue your own incredible success.

Cursor

The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX - as they convey the idea of certain functionality. So try not to break that affordance =).

Codepen live

Shapes of css

Square using css

#square { width: 100px; height: 100px; background: red; }

Rectengle

#rectengle { background: red; height: 100px; width: 200px; }

Circle

#circle { background: red; border-radius: 50%; height: 100px; width: 100px; }

Triangle up

#triangle_up { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red; }


More....

::after / ::before

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after { content: "hi"; }

<!-- Rest of stuff inside the div -->
<div> hi </div>

Give your multiple background canvases

Transparent circle using css.

jsfiddle