Ampersand Tutorials

Tag: CSS

  • Navbar in Materialize CSS

    —

    by

    Dinesh Kumar R
    in

    Learn about Navbar in Materialize CSS Creating Navigation Bar A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some websites. Web Applications also require Navigation Bar in order to ease the…

  • First step in building Materialize CSS Websites and webpages

    —

    by

    Dinesh Kumar R
    in

    Learn the First step in building Materialize CSS Websites and webpages. Download the Framework files from the Materialize CSS Framework Website, i.e., http://materializecss.com/getting-started.html. Extract the files and add the extracted files in the Project Directory. For this, you can create a new folder in Desktop. On the contrary, without downloading the Framework files, we can…

  • Quick Read on Materialize CSS Features in 2021

    —

    by

    Dinesh Kumar R
    in

    Materialize CSS Features Introduction to Materialize CSS •    Materialize CSS is one of the most trending and easy to use Web UI Framework•    It is open source and can be used by all•    Materialize is a UI component library created with CSS, JavaScript, and HTML•    It can be easily understood and implemented after the training•  …

  • Materialize CSS Simple Raised Button Customization

    —

    by

    Dinesh Kumar R
    in

    Learn about Materialize CSS Simple Raised Button Customization. Introduction: Buttons are one of the most widely used elements in any of the HTML Frameworks. No wonder it is going to be different in Materialize CSS Framework. There are several types of buttons that are present in Materialize CSS Framework which includes Simple Button, Simply Raised…

  • Extension and Operators in SASS

    —

    by

    Dinesh Kumar R
    in

    Extension and Operators in SASS. Learn and implement Extension and operators in SASS. The extension is a feature in SASS / SCSS through which we can apply styles of one class to another just by calling the @extend in the subsequent class. Here’s the following example in which we have explained the classic use case…

  • Light and Dark Theme using Mixin

    —

    by

    Dinesh Kumar R
    in

    Light and Dark Theme using Mixin and implement in your web projects. It is possible to switch between a dark and light theme using simple SCSS  / SASS without many code lines. We can leverage Mixin to achieve the change in light and dark themes. Following is the code for creating Mixin which can easily…

  • Mixins in SASS

    —

    by

    Dinesh Kumar R
    in

    Learn Mixins in SASS and reutilize style Mixins permit you to characterize styles that can be re-utilized all through your stylesheet. They make it simple to try not to utilize non-semantic classes like .float-left and to disperse assortments of libraries’ styles.  Mixins are characterized utilizing the @mixin at-rule, which is composed @mixin <name> { ……

  • Functions in SASS

    —

    by

    Dinesh Kumar R
    in

    Learn functions in sass. Create functions, call them and level up your SASS Skills. Functions permit you to characterize complex operations on SassScript values that you can reuse all through your stylesheet. They make it simple to extract out standard formulae and practices in a decipherable manner. The function helps in computing calculations and return…

  • Easily implement Partials in SASS in 2021

    —

    by

    Dinesh Kumar R
    in

    Learn Partials in SASS quickly in 5 mins and start implementing in your projects Partial in SASS / SCSS is useful when the project files are enormous. Reusing or maintaining such huge SCSS files is cumbersome. Partial SCSS allows developers to split the variable, resets or page-wise SCSS separately and quickly embed them in the…

  • Nesting in SASS

    —

    by

    Dinesh Kumar R
    in

    Learn Nesting in SASS with easy guide and working examples Nesting in SASS / SCSS is easy with the help of “&” to achieve the nesting. In SASS “&” behaves uniquely and it denotes the current selector.  The selector changes as we nest down.  If we want to define a division with a width of…