Cascading Style Sheets bring order and beauty to our applications.
In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS3. Summary: 1. Use keyframes to animate. 2. Add animation property to the required division. 3. ...
We will create an interesting animated hamburger that can be used in websites. In this process, we will look at transitions and transformations in CSS3. Further Links: https://codepen.io/tag/ham...
We will understand the Bootstrap grid system by creating a sample HTML page which is responsive to width changes. We will use Bootstrap 3 for this lesson. Link for Bootstrap setup
We will look at what CSS selectors to use to change an HTML5 inputs placeholder color. This can differ from browser to browser, so, we will make sure to cover all of the cases.
Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for de...
Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the s...
While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature ...
Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of ti...
This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the...
When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.
showing All 96 lessons...
file through PostCSS via gulp.
When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In this lesson, we see how this concern can be addressed by extracting a group of tailwind utility classes into a component classname. We create a Blocks Elements and Modifier (BEM) button component with a few style modifiers, that can be used everywhere in our project.
In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS3.
1. Use keyframes to animate.
2. Add animation property to the required division.
3. Add in an appropriate Transition time.
4. Play with the easing function to get a smooth animation.
We will create an interesting animated hamburger that can be used in websites.
In this process, we will look at transitions and transformations in CSS3.
Carousel has 3 parts:
2. Slider Controls
To setup Bootstrap:
We will understand the Bootstrap grid system by creating a sample HTML page which is responsive to width changes.
We will use Bootstrap 3 for this lesson.
You can easily use TypeStyle to build static html files with encapsulated CSS. You can use this pattern to generate email and pdf template files. Since TypeStyle supports cssRaw all your css can be easily inlined into a single file making it easy to work with template rendering engines.
You can increase the browser support of your CSS using fallback values and vendor prefixes. This lesson covers using vendor prefixes and fallback values (single prop multiple values) with TypeStyle. It also shows best practices for maintaining variables in the presence of vendor prefixing.
TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw CSS if you ever need to migrate old code quickly. This lesson will demonstrate how to use the
cssRaw function along with the real world use case of CSS resets e.g.
We will demonstrate composing classes using the utility classes function.
classes is also what we recommend for theming. Using pure CSS classes means that the component consumers are free to customize the component using any technology (not just TypeStyle).
classes is also what is recommended for conditionally applied TypeStyle CSS class names.
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of an element.
In this lesson we show how you can insert new content into the DOM using CSS pseudo elements. We also cover using other pseudo element selectors to change default browser behaviors.
Media queries are very important for designs that you want to work on both mobile and desktop browsers. TypeStyle gives media queries special attention, making it easy to write them using CSS in JS.
In this lesson we show TypeStyle's
media function. We also demonstrate how you can add non standard media queries if you want. Finally we show how organizing media queries this way is encapsulated under CSS class names.
TypeStyle is the only current CSS in JS solution that is designed with TypeSafety and TypeScript developer ergonomics in mind.
In this lesson we will show how easy it is to setup with zero configuration and also demonstrate its UI framework agnostic nature. We will also show how to integrate it with your application framework of choice using ReactJS as an example
Animations and transitions, when used appropriately, can help inform users how they are interacting with an application and how the user interface is responding. This video takes a simple example of adding a transition to this React/Redux application using React's CSSTransitionGroup.
A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a variation of the BEM (Block Element Model) naming convention. OOCSS and SMACSS offer similar methodologies. I also use the class attribute selector to target multiple modifier classes.
Forms and interactive DOM elements are the fundamental building blocks of an application, but that doesn't mean they need to look like every other form on the web. In this lesson, I'm styling a simple input form to drastically change the way it appears without making any unnecessary changes to the DOM itself.
There are certain cues that users are looking for to be informed that elements are interactive, like hover states and cursor changes. In this video, I make a list of radio button labels easier to identify as interactive and style them to react to user behavior.
Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.
In this course, I'm showing the process of styling an app from start to finish. In this video, I'm changing the basic HTML to make it easier to style by using flat class names. I'm also starting the basic styling of the
body elements that sets the foundation for the rest of the application styles.
Writing SCSS @functions is similar to writing functions in other programming languages; they can accept arguments and have return statements. SCSS provides a ton of great features, but sometimes we need to roll our own function. We can do that too! They’re useful when the desired functionality isn’t available from the built in SCSS functions and a mixin just won’t do. In this lesson, we learn how and when to use SCSS function directives.
Writing similar classes with minor variations, like utility classes, can be a pain to write and update. Sometimes just a single character is the only difference between classes and updating the defining parameter means we need to change it for every class name and value. We can write a class one time and the @for directive can write all the minor variations for us. If the similar classes need to be updated, with the help of the @for directive, they only need to be updated once. In this lesson we learn how to leverage the power of the SCSS @for control directive to relieve the pain.
Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your performance? In this lesson we learn how to separate our styles with SCSS partials, and how SCSS imports compile to one file so there's only one request.
We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?
change the source order, mixins don’t.
maintain relationships, mixins don’t.
share inherited traits, mixins don’t.
can extend multiple classes, mixins don’t.
can create multiple class declarations in the compiled CSS, mixins don’t.
can use the placeholder selector, mixins don’t.
can accept arguments, extends don’t.
can pass additional content, extends don’t.
repeat code when compiled, extends group class names together.
work well wIth media queries, extends have a limited interaction wIth media queries.
In this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.
Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.
Mixins have some nice features:
- Arguments just like functions.
- Arguments can have default values and optional values.
- Named arguments allow us to use optional and default arguments when the mixin is included.
- Variable arguments allow us to have a dynamic number of arguments when the mixin is included.
- The @content directive allow us to add additional styles when the mixin is included.
In this lesson we learn how to DRY up the code with the SCSS @mixin directive and make copy/paste a thing of the past.
SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us understand relationships between styles. The SCSS parent selector represents the parent class, so it can DRY up targeting pseudo-elements/classes and be an asset for naming conventions. In this lesson we learn how to remove the redundancy of targeting pseudo-elements/classes, and child elements by taking advantage of SCSS’s nesting and parent selectors.
Updating the same color or metric multiple times is no fun. SCSS variables improve maintainability by allowing one name to represent a value that can be used anywhere. SCSS variables also give us the power of creating our own naming conventions to express the intent of specific values. In this lesson we learn how to use SCSS variables to assign user friendly names to colors/metrics so one value change will update that value in all the right places.
Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the site scales up to desktop sizes. This lesson walks you through using Tachyons with flexbox and leveraging the
flex-row classes to respond to mobile and desktop sizes.
grid shorthand property, we can set all of the explicit grid properties (
grid-template-areas), all the implicit grid properties (
grid-auto-flow), and the gutter properties (
grid-row-gap) in a single declaration.
What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation;
auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.
We can use the
repeat() function if we have repeating specifications for columns and rows. With the
minmax() function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.