TA-Foodtrucks - Predefined CSS

Starting with TA-Foodtrucks is very easy because you can use the predefined classes. Learn more about how to use these classes.

Having a closer look at the basic example you might recognize the usage of some non Tailwind CSS class names. These classes are used to define some basics to get TA-Foodtrucks running. If you use the Tailwind CSS Plugin everything is done for you. Here is a list of all defined classes and what they are for.

check
Only functional definitions are defined in these classes. You can style your food truck dates as you wish.

Classes

ta-foodtrucks

ta-foodtrucks is used to define some basic stuff and default CSS properties. Use this class on the base level of your component - the same level as your directives.

Example

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
> 
    <!-- CONTENT -->
</div>

ta-foodtrucks-loading

ta-foodtrucks-loading and ta-foodtrucks-loading-out are used to define the nice loading animation before the Craftplaces API delivers some data.

Example

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
> 
    <!-- CONTENT -->
    <div
        class="ta-foodtrucks-loading bg-white text-gray-400"
        :class="{'ta-foodtrucks-loading-out': initialized}"
        x-show="loading"
    >
        <!-- LOADING ANIMATION -->
    </div>
    <!-- CONTENT -->
</div>

ta-foodtrucks-error

ta-foodtrucks-error is used to style the error message if there is no data from the Craftplaces API.

Example

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
> 
    <!-- CONTENT -->
    <div class="ta-foodtrucks-error" x-show="!has_dates || error">
        Sorry, no dates available at the moment...
    </div>
    <!-- CONTENT -->
</div>

ta-foodtrucks-logo

ta-foodtrucks-logoand ta-foodtrucks-logo-image are used to style the nice vendor logo in the list of food truck dates.

Example

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
> 
    <!-- CONTENT -->
    <template x-for="(item, index) in dates" :key="item.id" x-if="has_dates">
        <div class="flex flex-col sm:flex-row items-center justify-between border-b-2 border-dashed border-gray-100 last:border-b-0 py-8 px-4">
            <div class="ta-foodtrucks-logo rounded-full w-24 h-24 border border-gray-200 shadow-md sm:mr-8">
                <img :src="item.logo.url.local" alt="Logo Foodtruck John Doe" class="ta-foodtrucks-logo-image" />
            </div>
            <!-- CONTENT -->            
        </div>
    </template>
    <!-- CONTENT -->
</div>

ta-foodtrucks-details

ta-foodtrucks-details is used as a wrapper for the details of every food truck date.

Example

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
> 
    <!-- CONTENT -->
    <template x-for="(item, index) in dates" :key="item.id" x-if="has_dates">
        <div class="flex flex-col sm:flex-row items-center justify-between border-b-2 border-dashed border-gray-100 last:border-b-0 py-8 px-4">
            <!-- CONTENT -->
            <div class="ta-foodtrucks-details leading-tight">
                <div class="text-base text-secondary-600 font-bold">
                    <span x-text="getWeekday(index, true)"></span>,
                    <span x-text="getDay(index)"></span>
                </div>
                <!-- CONTENT -->
            </div>
        </div>
    </template>
    <!-- CONTENT -->
</div>

Hide with x-cloak

In some HTML tags in the basic structure you might have seen an attribute called x-cloak. This attribute will be removed after Alpine JS has done it’s magic. So with this information you could implement a very easy “hide-before-init” functionality without any issue. Here is a very common way to get this benefit.

/* your css styles */
[x-cloak] {
    display: none;
}
<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
>   
    <!-- CONTENT -->
</div>
arrow-leftPrevious Configuration Next Functions arrow-right
TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

Plugins & News

Release Notes TA-Analytics TA-Foodtrucks TA-Pagination TA-YouTube TA-Gallery

Getting started

Behind the curtain Browser Support Error TA Helper Plugins The Basic Concept

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy