Reading about the various sofas reviews here and choosing amongst them to match your patio is not that difficult when compared to doing the entire electrical work of the patio. When you are lighting your patio the exact opposite thing you need to do is to be stumbling over electrical lines and attempting to put …

The post Solar Powered Lights For The Yard appeared first on LatestSolarNews.

The future is solar LED lights. You will see them in the parking lots and other large areas around a city. They are cheap and save a good deal of money on electricity bills. Nowadays, the majority of parking lots feature the conventional lights that get their power from the grid. These products are not …

The post 4 Benefits Of Solar LED Lights For Parking Lots appeared first on LatestSolarNews.

At this year’s CSSConf in Melbourne (AU) I gave a talk called “Styling with STRINGS”. The talk is about how we can use Flexbox, currentColor and __EM__s inside components to quickly style entire Web Apps straight in the browser.

In case of tl:dw here some of the main points:

Layout

When creating mobile “App” layouts, where not the whole page is scrollable, but instead only certain parts. And you have anchored areas like header/footer and a main area that should fill out the available space, then the easiest way is to use Flexbox.

This lets you easily drag around components that are set as flex items and they always position nicely. Using flex: 1; on components makes them stretch out and fill the available space. A good use case is a search input or a title.

Color

If you don’t specify the border-color (initial value) it will be the same value as color.

Furthermore there is a color value called currentColor. As the name indicates, it’s also mapped to the current color value. We can use it as background-color for example. Not that useful when the text should be readable, since now text and background are the same color, but for some components without text it can be quite useful. Like in the example below with the slider thumb.

If a component set should look similar to the “iOS 7” style then currentColor works great. Below all components have no color values at all and only use currentColor. This let’s us change everything by only changing the color value in the root html element.

Size

In a similar way, EMs are mapped to font-size. So if we use EMs to define only the proportions of a component, we can use font-size to scale it up/down. And if we inherit the font-size we could also control everything at once with just a single property in the root or in groups if we go deeper down the DOM tree.

REMs work the same except that they are tied to the root html element only. We could use it to control the spacing of the components by using REMs for margin/padding.

I wrote about this in more detail in the Sizing (Web) Components post.

All together

Now if we combine this all and test it in an example application, we can easily design many variations right from the DevTools/inspector in a quick and easy way.

Feel free to play around with the CSSConf App yourself or check out the source on GitHub.

How to save?

You might wonder how you can save the changes made in the DevTools/inspector without having to manually copy them over into your CSS file. In Chrome there is a feature called Workspaces. It let’s you map a URL to a local folder. Once that is setup, all CSS changes will automatically be saved to your local disc. Here a post that explains how to setup Workspaces. It’s advised to use version control like Git, so that you can always discard all changes if you went too far and wanna start over.

Conclusion

Admittedly it is somewhat in between of being useful for production and just a “hack”. Especially the currentColor. But the main point of the talk is best told by this quote:

“Creators need an immediate connection” — Bret Victor

The examples I used are just the closest I could get using CSS alone and still keep code clean. I hope we keep that principle alive and improve on it.

ps. Artist of the puppet master illustration: Unknown.

pss. Here all the other videos from CSSConf.

This is my (living) collection of front-end links. It’s not complete by all means, in fact, there isn’t any of the obvious ones, like Can I use or so. Just some links that I need occasionally but can’t remember their names, so I saved them here for quick access. Also, they’re somewhat randomly ordered.

Note to self: Edit source

Docs

• HTML reference
• DevDocs
• Native HTML Elements
• jQuery -> JS
• Default Font Family
• Shadow DOM
  • The list
  • Form Pseudo Elements
• Device sizes
• SVG PocketGuide

CSS

• CSS reference
• All CSS properties
• All CSS values

• CSS Triggers (perf)

• Stats
  • StyleStats
  • CSS Stats
• CSS Preprocessors
  • Roole
  • CSS to SCSS
• FlexBox
  • cheatsheet
  • Flexbox Playground
  • Patterns
  • Flexbox in 5min
  • Flexplorer
  • FlexyBoxes
• Animation
  • Bounce.js
  • Stylie
• Easing:
  • Bezier Builder
  • Ceaser
  • cubic-bezier
  • Easings
• nth-child
  • nth-test
  • :kids
• Color
  • Color converter
  • Contrast tester
• Clip Path
• px to em
• Cursors
• Live Edit
  • Takana
  • Emmet

Libs + Frameworks

• Web Starter Kit
• vue.js
• Physics Animation
• AniJS
• Popmotion

Utils + Tools

• Wireframes
  • Whimsical
  • wireframe.cc
  • Moqups
• HTML symbols
  • ☺ Characters
  • Draw Chars
• Placeholder Image
• FavIcon Editor
• SVG
  • SVG Optimizer
  • Paths (editor)
• GitHub Editor

Resources

• Color schemes
• Fonts
  • Font Guide
  • Tagged Google Fonts
  • Blokk Font
• Icons
  • Feather
  • Icomoon
  • Material
  • Entypo
• Photos
  • SplashBase
  • Stock Up
  • Unsucky Stock Photos
• Subtle Patterns
• UI Sounds

Something I’ve been wanting for a long time, define different regions like a footer section, or side bar and not have to deal with all the contextual styling hassle. A.k.a. “Now that this button is used on a dark background, the button needs to change its colors too. Where should the styles live?”. Here an old post about struggling with contextual styling.

So then the other day I was doing some experiments with using custom properties for Atom’s UI. Turns out, using custom properties might make contextual styling a bit easier. For the rest of the post, let’s switch to a more simple example. A page where the main area is light, but then has a dark hero and footer section. Like this:

In the past, I probably would’ve created variations like Button--dark or overwrote it with header .Button {…}. Depends a bit on the project. Here another approach: Create themes with a set of variables, then apply the theme to the different areas.

1. Default theme

First let’s define our default theme with a bunch of variables.

[data-theme="default"] {
  --fg:         hsl(0,0%,25%);
  --border:     hsl(0,0%,75%);
  
  --bg:         hsl(0,0%,95%);
  --button-bg:  hsl(0,0%,99%);
  --input-bg:   hsl(0,0%,90%);
}

Then we create some components where we use the variables defined above.

[data-theme] {
  color: var(--fg);
  background-color: var(--bg);
}

.Button {
  color: var(--fg);
  border: 1px solid var(--border);
  background-color: var(--button-bg);
}

.Input {
  color: var(--fg);
  border: 1px solid var(--border);
  background-color: var(--input-bg);
}

And lastly we add the [data-theme="default"] attribute on the body so that our components will pick up the variables.

<body data-theme="default">

If you wonder why use data-theme attributes over classes? Well, no specific reason. Maybe with attributes, it’s a hint that only one theme should be used per element and is more separated from your other classes.

At this point we get this:

See the Pen Contextual styling with custom properties (1/3) by simurai (@simurai) on CodePen.

2. Dark theme

But our designer wants the hero and footer to be dark. Alright, let’s define another theme region.

[data-theme="dark"] {
  --fg:         hsl(0,10%,70%);
  --border:     hsl(0,10%,10%);
  
  --bg:         hsl(0,0%,20%);
  --button-bg:  hsl(0,0%,25%);
  --input-bg:   hsl(0,0%,15%);
}

And add the theme attribute to the header and footer.

<header data-theme="dark">
<footer data-theme="dark">

Which gives us this:

See the Pen Contextual styling with custom properties (2/3) by simurai (@simurai) on CodePen.

The reason why this works is that custom properties cascade and can be overridden on nested elements, just like normal properties.

3. Hero theme

A few months pass and our designer comes back with a redesigned hero section. “To make it look fresh” with a splash of color.

No problem! Just like with the dark theme, we define a new “hero” theme.

[data-theme="hero"] {
  --fg:         hsl(240,50%,90%);
  --border:     hsl(240,50%,10%);
  
  --bg:         hsl(240,33%,30%);
  --button-bg:  hsl(240,33%,40%);
  --input-bg:   hsl(240,33%,20%);
}

<header data-theme="hero">

And here is that fresh hero:

See the Pen Contextual styling with custom properties (3/3) by simurai (@simurai) on CodePen.

It’s also not limited to colors only, could be used for sizes, fonts or anything that makes sense to define as variables.

Benefits

Using these theme “regions” lets your components stay context un-aware and you can use them in multiple themes. Even on the same page.

• Developers can add components, move components around, without having to know about in what context (theme) they live. The markup for the components stays the same.
• Design systems authors can create new components without worrying about where they get used, the variables used in components stay the same.
• Designers can define new theme regions, or change existing ones, without having to make changes to a component’s HTML or CSS, it stays the same.

Less time to talk about who, how and where, more time to talk about the weather. ☔️????

Concerns

Yeah, right. The big question: But does it scale? Can this be used for all use cases.

Ok, I’m pretty sure it doesn’t fit all situations. There are just too many to find a single solution for them all. And I’m actually not sure how well it scales. I guess it works great in these simple demos, but I have yet to find a larger project to test it on. So if you have used (or plan to use) this approach, I’m curious to know how it went.

A concern I can imagine is that the list of variables might grow quickly if themes have totally different characteristics. Like not just a bit darker or lighter backgrounds. Then you might need to have foreground and border colors for each component (or group of components) and can’t just use the general --fg and --border variables. Naming these variables is probably the hardest part.

Update I

@giuseppegurgone made an interesting comment:

in suitcss projects I used to define component level custom props, theme variables and then create themes by mapping the former to the latter suitcss-toolkit

So if I understood it correctly, by mapping theme variables to component variables, you could avoid your theme variables from growing too much and you can decide for each component how to use these theme variables.

Update II

If it’s too early to use custom properties in your project, @szalonna posted an example how to do something similar in SCSS.