1. Start with the basics: Before you dive into more complex styling techniques, it’s important to get a good understanding of the fundamentals such as selectors, properties, and values. Once you have these down, you can start to experiment with more advanced techniques like animations, media queries, and responsive design.

2. Create a style guide: A style guide is an easy way to keep your code organized and consistent. It should include all the rules you use when styling a website, such as fonts, colors, and spacing. This will make it easier to maintain your code in the long run and ensure that everything looks consistent across all devices.

3. Use helpful resources: There are plenty of online resources available to help you learn more about CSS . Sites like CodePen, CSS Tricks, and W3Schools all offer great tutorials and code snippets to help you get the most out of your styling.

4. Use web inspector tools: Web inspector tools are incredibly useful for debugging your code and figuring out how certain elements are being styled. Most browsers have their own web inspector, so take some time to familiarize yourself with it and the information it provides.

5. Utilize pre-processors: Pre-processors are great for simplifying and streamlining your workflow. They allow you to write cleaner, more modular code that is also easier to maintain in the long run. If you’re looking to speed up your development process, then a pre-processor is definitely worth considering.

6. Take advantage of frameworks: Frameworks like Bootstrap and Foundation make it easier to create responsive, mobile-friendly websites. They come with pre-built components that can be quickly customized to fit your needs, without having to start from scratch.

7. Test for browser compatibility: Different browsers may render your code differently, so it’s important to test how your website looks on all major browsers. Tools like BrowserStack and SauceLabs can help you quickly test your website across multiple browsers.

8. Practise, practise, practise: As with any endeavour, the more you practice CSS the better you’ll become at it. Try out new techniques, experiment with different elements, and don’t be afraid to make mistakes – they’re all part of the learning process!

Frequent problems when applying CSS

One of the most common problems encountered when using CSS is incorrect syntax. This can be difficult to pinpoint since there are so many ways to write code, making it easy to miss a missed bracket or quotation mark. When writing code, it’s important to double-check your work and make sure that all syntax is correct.

Another frequent problem with CSS is conflicting rules and declarations.

It can be tempting to ignore the instructions given when styling a website, but this can lead to unexpected results. Make sure you fully understand what the instructions are asking for and follow them as closely as possible. This will help ensure that your code works correctly and looks consistent across all browsers and devices.

Consider browser support. Different browsers have varying levels of support for certain CSS features, so it’s important to test your code on all major browsers to make sure everything looks as it should. You can use tools like BrowserStack and SauceLabs to quickly test your website across multiple browsers.

Another common issue is browser caching. If you’ve made changes to your CSS but they aren’t appearing on the page, this could be due to browser caching. Clearing the cache or using a tool like Hard Refresh will help to ensure that your changes are visible.

What else can CSS do?

CSS is a powerful language for styling web content, but its capabilities extend far beyond just formatting text and images. CSS can be used to create animations, design layouts, adjust the font size and line height of text, add effects to objects like shadows and outlines, and even control the display of elements on different screen sizes.

In addition to the visual aspect of web pages, CSS can also be used to control how content is displayed and interacted with. For instance, you can use CSS to hide or show different elements based on user interactions or choices, create drop-down menus, and even create interactive forms.

When styling a website, it’s essential to follow the instructions given in order to ensure that your code works correctly. Pay close attention to the details and be careful not to miss any steps or information.

Consider accessibility needs. When creating webpages with CSS, you should also take into account any accessibility needs the user may have. For example, if you’re creating a page with large amounts of text, you should consider using a larger font size or different line height settings so that the content is more readable. Additionally, using a contrasting colour palette to ensure that text and images are easily distinguishable will help make your page easier to use for those with visual impairments.

It’s easy to get carried away when styling a website, but it’s important to follow the instructions given in order to ensure that everything works as expected. When working with CSS, it’s also important to consider any accessibility needs the user may have. This can involve adjusting font size or line height settings for better readability and using a contrasting colour palette so that text and images are easily distinguishable. By following these tips, you can ensure that your website looks and works as intended.

The post A collection of practical tips for everyday CSS users. appeared first on PlType-Te.

SASS/SCSS
Yes, it’s not a library, it’s a preprocessor. But it’s so cool, in my opinion, that if you have CSS in your article, you can’t do it without SASS. What makes it cool? Well, here’s why.

It extends the functionality of conventional CSS: it allows you to split styles into separate files and then “marry” them into one. You can use variables, nesting, mixins, etc. All the things a developer starts dreaming about at the beginning of his second year have been implemented in SASS.

Why a preprocessor and what does it mean?
You write in a special CSS syntax, and in the background, the SASS builder turns your sass files into css. It sounds complicated at first glance. But if your computer knowledge was enough to open this article, I’m sure you can handle SASS too!

Bootstrap
Some people don’t like it (me for example) and some people like it. However, it’s worth admitting that everyone uses it. Bootstrap – a set of ready-made UI elements, grids, forms, galleries, etc. Find everything you need by scrolling the official site Bootstrap and copying the code needed element, and then add it to your page.

Bootstrap turns the development process into a regular game of jigsaw puzzle, as any element you can tweak and bring to the desired look. This greatly simplifies the routines of the layout and avoids mistakes that can be made.

It has its disadvantages. If you want to make a design that is very different from Bootstrap (this is rare), then you will have to greatly remake the styles. In that case, it’s easier to re-do the elements.

Another disadvantage that clearly catches your eye is the love of Bootstrap on the part of novice developers. Bootstrap is contraindicated in the beginning because “it will eat you up”. If you know what I mean. It should be a tool purely to save time. You can start using it only when you clearly understand that you’re able to design a layout without it. In the initial stages of using it is not worth it.

Animate.css
Nowadays, already difficult to surprise something. Shiny and shimmering backgrounds from the last decade, leading to epileptic seizures, can not leave the client on the site. Now an important role is played by animation. Pleasant transitions and switching elements of the form, buttons and any part of the page, with which the user interacts, make the process of working on the site is much more pleasant. This library allows you to use ready-made cross-browser solutions instead of drowning in the wilds of css-animation.

Foundation
I was hesitant about whether to include this library in the selection or not. The fact that you’re likely to encounter it in your work and learning process made Foundation a fourth item. In many ways, Foundation can be replaced by Bootstrap, as the two libraries are extremely similar and differ only in minor syntactic differences.

Historically, Bootstrap, for a number of reasons that can only be guessed at, has become more popular and more actively used. But focusing on functionality and quality, it’s hard to say which library is better. They are too similar.

Fontawesome
This is the last in the list, but by no means in importance. Extremely useful tool that allows you to save a lot of development and reduces the amount of memory occupied by the project. By connecting this tool, you will be able to use a huge number of icons, without loading them as images. Icons are connected by adding a class, thereby greatly simplifying development.

Can it be called a CSS library? Rather arbitrarily, but it is a very useful thing. If you are interested in different libraries, you should not ignore Fontawesome.

Libraries are a wonderful thing that reduces development time and gives a stable quality of code. But it’s a very bad idea to use them when you’re learning how to do layout (you can use SASS and Fontawesome).

You should use CSS, as well as any other libraries, only if you are sure you can do without them. This is the only way you’ll gain a solid knowledge. And if one day you’re asked to fix something in the written code, you will not faint, and easily solve this problem.

The post Top 5 CSS Libraries appeared first on PlType-Te.

GRIDLEX
Gridlex – a grid for developing templates and modules

Gridlex is a simple css grid for designing templates and modules. It’s easy to use. It’s enough to wrap your column (.col) with a grid container (.grid). The library allows you to create adaptive design based on media queries and supports grid branching directly in the column.

BUTTONS
Buttons – creating stylish buttons

Free open source SASS library for creating customizable buttons. Allows you to quickly and easily make great buttons in rich colors for your site. The library includes a large number of button styles, including flat design options, rounded corners, 3D and more.

BOURBON
Bourbon – cross-browser layout

Bourbon is a simple, lightweight SASS library for creating cross-browser style sheets. It includes almost everything you need to design great websites – mixins, functions, add-ons. The library is completely independent and doesn’t require any configuration.

SASSY INPUTS
Build forms with SASS

A library of Sass mixins for building CSS3 styles for input forms with minimal size and cross-browser compatibility. Includes mixins for creating text input fields, search, buttons, checkboxes, select items, and radio buttons. Sassy Inputs is customizable. Shortcuts are designed to work.

SAFFRON
Saffron – animations and transitions on your site

Saffron is a simple Sass muxin library for quickly incorporating animations and transitions for your site into your code. The library is easy to use. You just need to add a myxin to the declaration and use a variable to include the desired effect. The library includes a large number of animation effects and state transitions – dimming, sliding, twitching and others.

MINI.CSS
Minimal code – maximum functionality

Lightweight framework for responsive websites. In compact form it occupies only 10 Kb. Adaptive grid and component set allows quick and easy implementation of any design for all screen sizes.

ANGLED EDGES.
Special block design

Sass mixin to create beveled edges on a section using dynamic SVG. A vector triangle is created as the background image. You can set its background color, position, fill, height, width and hypotenuse. Supported by all modern browsers – Chrome, Firefox, Safari, Edge and including IE 9+.

TYPESETTINGS
How easy it is to work with fonts

With Typesettings, you can set the font size for modular scale in ems, vertical rhythm, and baseline-based adaptivity factor. By default. Baseline size is set to 6 px and supports vertical rhythm with borders expressed in pixels. Typesettings contains all the math for working with ems and uses modular scale values to set the font size.

MATERIALIZECSS
Material design implementations by code

A framework for material style design implementation. It is easy to customize and adapts to different screen sizes. The framework includes a large set of components – buttons, cards, forms, navigation bars, page switches, and more. Compatible with Chrome, Firefox, Safari, Edge and IE 11+ browsers.

INCLUDE MEDIA.
Media queries with SASS make it fast

Sass library for quickly creating media queries. Contains a list of tipping points for smrtphones, tablets and desktops. They are easy to customize, You can write media queries using em and rem units, create aliases for frequently used expressions.

The post 10 Sass libraries to help speed up website development appeared first on PlType-Te.

All in all I have tried about thirty libraries. Some were quite small, some were quite large, but in the end I selected the ten best in my opinion. Note that none of these libraries do not require JavaScript.

1. Animista.
   In fact, this site I found not so long ago. but immediately fell in love with him. Frankly, I think he alone deserves a separate post.

Choice of animation
You can choose what type of animation you want (for example animation of appearance or disappearance of an element), besides the fact that you can choose a specific type of animation (for example scale-in), you can also choose different options for this animation (for example scale-in-right).

Once you’ve chosen your animation, configured it the way you want, you can get the finished code right from the site. There is also an opportunity to minify your code right away.

2. Animate CSS
   Of course I can not ignore the attention of Animate CSS, probably one of the most famous animation libraries. Consider briefly its use.

Using
To run, you need to add an animated class to the element you want to animate and then add an animation class name.

If you want to loop the animation, you can add an infinite class to make the animation repeat without stopping.

More features
Animate CSS has some basic classes to control the delay and speed of the animation.

3. Vivify
   Vivify is an animation library that I’ve always thought of as an improved version of Animate CSS. It works exactly the same, contains the same classes, but is expanded with a few more. Instead of adding an animated class, you have to add vivify.
4. Magic Animations CSS3.
   This library has very nice and smooth animations, I especially like the 3D animations.
   But not enough to tell you, try to play with them yourself.
   In this library you have to add magictime class and animation name class.
5. Cssanimation.io
   Cssanimation.io is a collection of a huge amount of different animations, probably about 200 pieces and it’s just breathtaking.

The working principle is similar to Animista. For example, you can select an animation and get the code right on the site, and you can also download the entire library.

6. Angrytools .
   Angrytools is actually a collection of different generators, including a CSS generator. It may not be as diverse as Animista, but there are some things I really liked about it.

This site, as well as many of the previous ones, gives us the ability to customize the duration or delay of the animation. But it allows you to add your own keyframes to the so called timeline and then write the code right there. You can also edit existing keyframes.

7. Hover.css.
   Hover.css includes a lot of CSS animations that, unlike the ones above, are triggered every time you hover over an element.

It’s a collection of CSS3 effects that are activated when you hover, and can be applied to links, buttons, logos, SVGs, selected images, etc.

They have really amazing animations. What’s more, hover.css also has classes for animating icons, like font awesome.

9. Three Dots.
   Three Dots is a set of CSS animations for the preloader created from three dots that are actually one element.
10. CSShake .
    And at the end we have the “shaker shake.”
    As the name suggests, CSShake is a CSS animation library that contains different types of shake animations.
    To run, we add a shake class and an animation name class to our element.

The post 10 best libraries for CSS animation appeared first on PlType-Te.