diff --git a/Gemfile b/Gemfile index b37d6d641..e4104f6a2 100644 --- a/Gemfile +++ b/Gemfile @@ -3,7 +3,6 @@ source "https://rubygems.org" gem "jekyll", "4.1.1" group :jekyll_plugins do - gem 'jekyll-toc' gem "jekyll-random" gem "jekyll-tidy" gem "jekyll-timeago" diff --git a/_config.yml b/_config.yml index 36a693d0e..a1de8210c 100644 --- a/_config.yml +++ b/_config.yml @@ -23,7 +23,6 @@ layout-dark: false plugins: - jekyll-random - - jekyll-toc - jekyll-tidy - jekyll-timeago - jekyll-redirect-from @@ -45,11 +44,6 @@ jekyll_tidy: compress_html: false ignore_env: development -toc: - min_level: 2 - max_level: 3 - list_class: list-unstyled - collections: docs: output: true @@ -69,7 +63,6 @@ defaults: type: "docs" values: layout: docs - toc: true colors: blue: diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index e69de29bb..b4dfc1d50 100644 --- a/src/pages/_data/docs.yml +++ b/src/pages/_data/docs.yml @@ -0,0 +1,125 @@ +index: + title: Getting started + icon: brand-tabler + children: + index: + title: Introduction + icon: file + url: docs/index.html + + +components: + title: Components + icon: puzzle + children: + alerts: + title: Alerts + url: docs/alerts.html + avatars: + title: Avatars + url: docs/avatars.html + badges: + title: Badges + url: docs/badges.html + breadcrumb: + title: Breadcrumb + url: docs/breadcrumb.html + buttons: + title: Buttons + url: docs/buttons.html + cards: + title: Cards + url: docs/cards.html + carousel: + title: Carousel + url: docs/carousel.html + colors: + title: Colors + url: docs/colors.html + cursors: + title: Cursors + url: docs/cursors.html + dropdowns: + title: Dropdowns + url: docs/dropdowns.html + divider: + title: Divider + url: docs/divider.html + empty: + title: Empty states + url: docs/empty.html + form-elements: + title: Form elements + url: docs/form-elements.html + form-helpers: + title: Form helpers + url: docs/form-helpers.html + modals: + title: Modals + url: docs/modals.html + progress: + title: Progress + url: docs/progress.html + payments: + title: Payments + url: docs/payments.html + range-slider: + title: Range slider + url: docs/range-slider.html + ribbons: + title: Ribbons + url: docs/ribbons.html + skeleton: + title: Skeleton + url: docs/skeleton.html + spinners: + title: Spinners + url: docs/spinners.html + steps: + title: Steps + url: docs/steps.html + tables: + title: Tables + url: docs/tables.html + tabs: + title: Tabs + url: docs/tabs.html + timelines: + title: Timelines + url: docs/timelines.html + toasts: + title: Toasts + url: docs/toasts.html + tooltips: + title: Tooltips + url: docs/tooltips.html + typography: + title: Typography + url: docs/typography.html +utilities: + title: Utilities + icon: flame + children: + +plugins: + title: Plugins + icon: apps + children: + autosize: + title: Autosize + url: docs/autosize.html + input-mask: + title: Form input mask + url: docs/input-mask.html + flags: + title: Flags + url: docs/flags.html + charts: + title: Charts + url: docs/charts.html + +changelog: + title: Changelog + show-version: true + icon: git-branch + url: changelog.html \ No newline at end of file diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index e907c94b2..f86ee053e 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -183,113 +183,10 @@ layout: title: Fluid vertical docs: - title: Docs + title: Documentation icon: file-text url: docs/index.html - columns: 3 - children: - index: - title: Introduction - url: docs/index.html - alerts: - title: Alerts - url: docs/alerts.html - autosize: - title: Autosize - url: docs/autosize.html - avatars: - title: Avatars - url: docs/avatars.html - badges: - title: Badges - url: docs/badges.html - breadcrumb: - title: Breadcrumb - url: docs/breadcrumb.html - buttons: - title: Buttons - url: docs/buttons.html - cards: - title: Cards - url: docs/cards.html - carousel: - title: Carousel - url: docs/carousel.html - colors: - title: Colors - url: docs/colors.html -# countup: -# title: Countup -# url: docs/countup.html - cursors: - title: Cursors - url: docs/cursors.html - charts: - title: Charts - url: docs/charts.html - dropdowns: - title: Dropdowns - url: docs/dropdowns.html - divider: - title: Divider - url: docs/divider.html - empty: - title: Empty states - url: docs/empty.html - flags: - title: Flags - url: docs/flags.html - form-elements: - title: Form elements - url: docs/form-elements.html - form-helpers: - title: Form helpers - url: docs/form-helpers.html - input-mask: - title: Form input mask - url: docs/input-mask.html - modals: - title: Modals - url: docs/modals.html - progress: - title: Progress - url: docs/progress.html - payments: - title: Payments - url: docs/payments.html - range-slider: - title: Range slider - url: docs/range-slider.html - ribbons: - title: Ribbons - url: docs/ribbons.html - skeleton: - title: Skeleton - url: docs/skeleton.html - spinners: - title: Spinners - url: docs/spinners.html - steps: - title: Steps - url: docs/steps.html - tables: - title: Tables - url: docs/tables.html - tabs: - title: Tabs - url: docs/tabs.html - timelines: - title: Timelines - url: docs/timelines.html - toasts: - title: Toasts - url: docs/toasts.html - tooltips: - title: Tooltips - url: docs/tooltips.html - typography: - title: Typography - url: docs/typography.html + #changelog: diff --git a/src/pages/_docs/alerts.md b/src/pages/_docs/alerts.md index d5d59b598..fac16f938 100644 --- a/src/pages/_docs/alerts.md +++ b/src/pages/_docs/alerts.md @@ -1,6 +1,6 @@ --- title: Alerts -menu: docs.alerts +menu: docs.components.alerts description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app. bootstrap-link: components/alerts/ --- diff --git a/src/pages/_docs/autosize.md b/src/pages/_docs/autosize.md index bca00fb21..5ffd12253 100644 --- a/src/pages/_docs/autosize.md +++ b/src/pages/_docs/autosize.md @@ -1,6 +1,6 @@ --- title: Autosize -menu: docs.autosize +menu: docs.plugins.autosize description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type. libs: autosize --- diff --git a/src/pages/_docs/avatars.md b/src/pages/_docs/avatars.md index 56f6e1900..d76c8aab1 100644 --- a/src/pages/_docs/avatars.md +++ b/src/pages/_docs/avatars.md @@ -1,6 +1,6 @@ --- title: Avatars -menu: docs.avatars +menu: docs.components.avatars description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media. --- diff --git a/src/pages/_docs/badges.md b/src/pages/_docs/badges.md index 6fd879a9d..ac180c29a 100644 --- a/src/pages/_docs/badges.md +++ b/src/pages/_docs/badges.md @@ -1,6 +1,6 @@ --- title: Badges -menu: docs.badges +menu: docs.components.badges description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info. bootstrap-link: components/badge/ --- diff --git a/src/pages/_docs/breadcrumb.md b/src/pages/_docs/breadcrumb.md index d39332e18..91ee94586 100644 --- a/src/pages/_docs/breadcrumb.md +++ b/src/pages/_docs/breadcrumb.md @@ -1,6 +1,6 @@ --- title: Breadcrumb -menu: docs.breadcrumb +menu: docs.components.breadcrumb description: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure. bootstrap-link: components/breadcrumb/ --- diff --git a/src/pages/_docs/buttons.md b/src/pages/_docs/buttons.md index 9a2595dd0..51a59c6e3 100644 --- a/src/pages/_docs/buttons.md +++ b/src/pages/_docs/buttons.md @@ -2,7 +2,7 @@ title: Buttons description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more. bootstrap-link: components/buttons/ -menu: docs.buttons +menu: docs.components.buttons --- @@ -86,6 +86,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded. {% capture code %} +{% include ui/button.html text="White" square=true %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} @@ -100,6 +101,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look. {% capture code %} +{% include ui/button.html text="White" pill=true %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} diff --git a/src/pages/_docs/cards.md b/src/pages/_docs/cards.md index 38ae1c331..28bc3aa99 100644 --- a/src/pages/_docs/cards.md +++ b/src/pages/_docs/cards.md @@ -1,6 +1,6 @@ --- title: Cards -menu: docs.cards +menu: docs.components.cards description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content. bootstrap-link: components/card/ --- @@ -28,7 +28,7 @@ Cards with the `.card-sm` class are well suited for small items such as snippets {% include cards/card.html class="card-md" body="This is some text within a card body." %} {% include cards/card.html class="card-lg" body="This is some text within a card body." %} {% endcapture %} -{% include example.html code=code columns=2 %} +{% include example.html code=code columns=2 wrapper="space-y" %} ## Card with title @@ -39,7 +39,7 @@ Add a title to your card by including the `.card-title` class within `.card-body {% include cards/card.html title="Card title" body="This is some text within a card body." %} {% include cards/card.html header-title="Card title" body="This is some text within a card body." %} {% endcapture %} -{% include example.html code=code columns=1 %} +{% include example.html code=code columns=1 wrapper="space-y" %} ## Card with title and image diff --git a/src/pages/_docs/carousel.md b/src/pages/_docs/carousel.md index fc7a9c72b..1acb8cbb0 100644 --- a/src/pages/_docs/carousel.md +++ b/src/pages/_docs/carousel.md @@ -1,6 +1,6 @@ --- title: Carousel -menu: docs.carousel +menu: docs.components.carousel description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information. bootstrap-link: components/carousel/ --- diff --git a/src/pages/_docs/charts.md b/src/pages/_docs/charts.md index a604136b0..deeb0af2f 100644 --- a/src/pages/_docs/charts.md +++ b/src/pages/_docs/charts.md @@ -1,6 +1,6 @@ --- title: Charts -menu: docs.charts +menu: docs.components.charts --- diff --git a/src/pages/_docs/colors.md b/src/pages/_docs/colors.md index 51fdfc8c6..0b4058b91 100644 --- a/src/pages/_docs/colors.md +++ b/src/pages/_docs/colors.md @@ -1,6 +1,6 @@ --- title: Colors -menu: docs.colors +menu: docs.components.colors description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out. bootstrap-link: utilities/colors/ --- diff --git a/src/pages/_docs/countup.md b/src/pages/_docs/countup.md index d13a3b426..984b49ec0 100644 --- a/src/pages/_docs/countup.md +++ b/src/pages/_docs/countup.md @@ -1,7 +1,7 @@ --- title: Countup description: A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/) -menu: docs.countup +menu: docs.components.countup libs: countup --- diff --git a/src/pages/_docs/cursors.md b/src/pages/_docs/cursors.md index 886bcf8a2..e2615af2c 100644 --- a/src/pages/_docs/cursors.md +++ b/src/pages/_docs/cursors.md @@ -1,7 +1,7 @@ --- title: Cursors description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed. -menu: docs.cursors +menu: docs.components.cursors --- diff --git a/src/pages/_docs/divider.md b/src/pages/_docs/divider.md index 84044337a..dc443e9a0 100644 --- a/src/pages/_docs/divider.md +++ b/src/pages/_docs/divider.md @@ -2,6 +2,7 @@ title: Divider description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app. bootstrap-link: components/dropdowns/#dividers +menu: docs.components.divider --- diff --git a/src/pages/_docs/dropdowns.md b/src/pages/_docs/dropdowns.md index e57698d1d..8f7424c37 100644 --- a/src/pages/_docs/dropdowns.md +++ b/src/pages/_docs/dropdowns.md @@ -2,6 +2,7 @@ title: Dropdowns description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear. bootstrap-link: components/dropdowns +menu: docs.components.dropdowns --- diff --git a/src/pages/_docs/empty.md b/src/pages/_docs/empty.md index 8d7b5db7b..accba6558 100644 --- a/src/pages/_docs/empty.md +++ b/src/pages/_docs/empty.md @@ -1,6 +1,7 @@ --- title: Empty states description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app. +menu: docs.components.empty --- diff --git a/src/pages/_docs/flags.md b/src/pages/_docs/flags.md index 0cb2dcfc4..414348c6a 100644 --- a/src/pages/_docs/flags.md +++ b/src/pages/_docs/flags.md @@ -1,6 +1,6 @@ --- title: Flags -menu: docs.flags +menu: docs.components.flags description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. plugin: flags libs: tabler-flags diff --git a/src/pages/_docs/form-elements.md b/src/pages/_docs/form-elements.md index 98d445174..f7267fd5e 100644 --- a/src/pages/_docs/form-elements.md +++ b/src/pages/_docs/form-elements.md @@ -3,6 +3,7 @@ title: Form elements description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly. bootstrap-link: components/forms/ libs: nouislider +menu: docs.components.form-elements --- diff --git a/src/pages/_docs/form-helpers.md b/src/pages/_docs/form-helpers.md index 2ab38a048..0d68882a1 100644 --- a/src/pages/_docs/form-helpers.md +++ b/src/pages/_docs/form-helpers.md @@ -1,6 +1,7 @@ --- title: Form helpers description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. +menu: docs.components.form-helpers --- diff --git a/src/pages/_docs/index.md b/src/pages/_docs/index.md index 88a2d6dab..f6ec6c9fe 100644 --- a/src/pages/_docs/index.md +++ b/src/pages/_docs/index.md @@ -1,11 +1,10 @@ --- title: Introduction -menu: docs.index +menu: docs.index.index icon: flag -order: -1 +redirect_from: docs.html --- - ## What is Tabler? Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed! @@ -27,24 +26,19 @@ To use our build system and run our documentation locally, you'll need a copy of 3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz). 4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com). -**Windows users**: +### Windows users 1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell. 2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe). 3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems. Once you've completed the setup, you'll be able to run the various commands provided from the command line. - ## Build Tabler locally 1. From the root `/tabler` directory, run `npm run start` in the command line. 2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà. 3. Any change in `/pages` directory will build the application and refresh the page. -**Note**: -Run `npm run build` for rerforms a one off build application without refresh. -Open [http://localhost:3001](http://localhost:3001) to configure the Web server. - ## Bugs and feature requests diff --git a/src/pages/_docs/input-mask.md b/src/pages/_docs/input-mask.md index 511107c86..f78c3f453 100644 --- a/src/pages/_docs/input-mask.md +++ b/src/pages/_docs/input-mask.md @@ -1,6 +1,7 @@ --- title: Input mask description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors. +menu: docs.plugins.input-mask --- diff --git a/src/pages/_docs/modals.md b/src/pages/_docs/modals.md index 203866d24..240792b67 100644 --- a/src/pages/_docs/modals.md +++ b/src/pages/_docs/modals.md @@ -1,7 +1,7 @@ --- title: Modals description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. -menu: docs.modals +menu: docs.components.modals --- ## Default markup diff --git a/src/pages/_docs/payments.md b/src/pages/_docs/payments.md index f8497ec12..95136a8f6 100644 --- a/src/pages/_docs/payments.md +++ b/src/pages/_docs/payments.md @@ -1,6 +1,6 @@ --- title: Payments -menu: docs.payments +menu: docs.components.payments description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly. plugin: payments --- diff --git a/src/pages/_docs/progress.md b/src/pages/_docs/progress.md index eaac59dc5..858a2b580 100644 --- a/src/pages/_docs/progress.md +++ b/src/pages/_docs/progress.md @@ -2,6 +2,7 @@ title: Progress bars description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated. bootstrap-link: components/progress +menu: docs.components.progress --- diff --git a/src/pages/_docs/range-slider.md b/src/pages/_docs/range-slider.md index 59c5ab531..cb5cf5309 100644 --- a/src/pages/_docs/range-slider.md +++ b/src/pages/_docs/range-slider.md @@ -1,6 +1,6 @@ --- title: Range slider -menu: docs.range-slider +menu: docs.components.range-slider libs: nouislider --- diff --git a/src/pages/_docs/ribbons.md b/src/pages/_docs/ribbons.md index ee34f3ae0..f0cb497a5 100644 --- a/src/pages/_docs/ribbons.md +++ b/src/pages/_docs/ribbons.md @@ -1,6 +1,6 @@ --- title: Ribbons -menu: docs.ribbons +menu: docs.components.ribbons description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out. --- diff --git a/src/pages/_docs/skeleton.md b/src/pages/_docs/skeleton.md index bd163952a..7fdb53701 100644 --- a/src/pages/_docs/skeleton.md +++ b/src/pages/_docs/skeleton.md @@ -1,6 +1,6 @@ --- title: Skeleton -menu: docs.skeleton +menu: docs.components.skeleton description: Skeleton is used to reserve space for content that soon will appear in a layout. --- diff --git a/src/pages/_docs/spinners.md b/src/pages/_docs/spinners.md index ba61d63e7..0ae0647c1 100644 --- a/src/pages/_docs/spinners.md +++ b/src/pages/_docs/spinners.md @@ -1,6 +1,6 @@ --- title: Spinners -menu: docs.spinners +menu: docs.components.spinners description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete. bootstrap-link: components/spinners/ --- diff --git a/src/pages/_docs/steps.md b/src/pages/_docs/steps.md index db487be3f..929dfce3c 100644 --- a/src/pages/_docs/steps.md +++ b/src/pages/_docs/steps.md @@ -1,6 +1,6 @@ --- title: Steps -menu: docs.steps +menu: docs.components.steps description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully. new: true --- diff --git a/src/pages/_docs/tables.md b/src/pages/_docs/tables.md index 14a2d7c02..0b3a8ca01 100644 --- a/src/pages/_docs/tables.md +++ b/src/pages/_docs/tables.md @@ -1,6 +1,6 @@ --- title: Tables -menu: docs.tables +menu: docs.components.tables description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity. bootstrap-link: content/tables/ --- diff --git a/src/pages/_docs/tabs.md b/src/pages/_docs/tabs.md index 96a40efd2..ea443363a 100644 --- a/src/pages/_docs/tabs.md +++ b/src/pages/_docs/tabs.md @@ -1,6 +1,6 @@ --- title: Tabs -menu: docs.tabs +menu: docs.components.tabs description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate. bootstrap-link: components/navs/ --- diff --git a/src/pages/_docs/timelines.md b/src/pages/_docs/timelines.md index 4f94df93b..a2cdf29ec 100644 --- a/src/pages/_docs/timelines.md +++ b/src/pages/_docs/timelines.md @@ -1,7 +1,7 @@ --- title: Timelines description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time. -menu: docs.timelines +menu: docs.components.timelines --- diff --git a/src/pages/_docs/toasts.md b/src/pages/_docs/toasts.md index fb81f5461..c0a4de70d 100644 --- a/src/pages/_docs/toasts.md +++ b/src/pages/_docs/toasts.md @@ -1,6 +1,6 @@ --- title: Toasts -menu: docs.toasts +menu: docs.components.toasts description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action. bootstrap-link: components/toasts/ --- diff --git a/src/pages/_docs/tooltips.md b/src/pages/_docs/tooltips.md index c581391cc..f9efd8b0a 100644 --- a/src/pages/_docs/tooltips.md +++ b/src/pages/_docs/tooltips.md @@ -1,6 +1,6 @@ --- title: Tooltips -menu: docs.tooltips +menu: docs.components.tooltips description: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software. bootstrap-link: components/tooltips/ --- diff --git a/src/pages/_docs/typography.md b/src/pages/_docs/typography.md index c2f258ab5..b563dea87 100644 --- a/src/pages/_docs/typography.md +++ b/src/pages/_docs/typography.md @@ -1,6 +1,6 @@ --- title: Typography -menu: docs.typography +menu: docs.components.typography description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website. bootstrap-link: content/typography/ --- diff --git a/src/pages/_includes/cards/blog-single.html b/src/pages/_includes/cards/blog-single.html index 0e9931719..2f99556eb 100644 --- a/src/pages/_includes/cards/blog-single.html +++ b/src/pages/_includes/cards/blog-single.html @@ -11,11 +11,11 @@
{{ article.description | truncate: truncate }}
-
- {% include ui/avatar.html person-id=avatar size="md" %} +
+ {% include ui/avatar.html person-id=avatar %}
{{ author.first_name }} {{ author.last_name }} - 3 days ago +
3 days ago
diff --git a/src/pages/_includes/docs/menu.html b/src/pages/_includes/docs/menu.html new file mode 100644 index 000000000..6d78c7bd2 --- /dev/null +++ b/src/pages/_includes/docs/menu.html @@ -0,0 +1,51 @@ +{% assign current-menu = page.menu | split: '.' %} + + \ No newline at end of file diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html index 7df9f2268..f949acaaa 100644 --- a/src/pages/_includes/example.html +++ b/src/pages/_includes/example.html @@ -2,6 +2,7 @@ {% assign demo-code = code %} {% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %} +{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void()"' %}
diff --git a/src/pages/_includes/forms/form-elements-5.html b/src/pages/_includes/forms/form-elements-5.html index 711dd0e77..64ef3af9c 100644 --- a/src/pages/_includes/forms/form-elements-5.html +++ b/src/pages/_includes/forms/form-elements-5.html @@ -7,7 +7,7 @@
-
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html index d125f68e6..2b388b6b6 100644 --- a/src/pages/_layouts/docs.html +++ b/src/pages/_layouts/docs.html @@ -7,69 +7,40 @@ page-header: Documentation {% assign current-url = page.url | replace_regex: "^/", "" %} -
-
- - {% assign toc = content | toc_only %} - - -
- {% include ui/button.html href=site.github-url text="Browse source code" icon="brand/github" color="white" external=true block=true class="mb-6" %} - - {% if toc != '' %} -
On this page
- {{ toc }} - {% endif %} -
- - - - {% comment %} -
- {% for doc in site.data.menu.docs.children %} - {% assign key = doc[0] %} - - - {% if jekyll.environment == 'development' %} - {% assign doc-page = site.docs | where: "slug", key | first %} - {% if doc-page.done %}{% include ui/icon.html icon="check" color="green" class="mr-2" %}{% endif %} - {% endif %} - - {{ doc[1].title }} - - {% endfor %} -
- {% endcomment %} +
+
+ {% include docs/menu.html %}
-
-
-

{{ page.title }}

+
+
+

{{ page.title }}

- {% if page.bootstrap-link %} -

- - {% include ui/icon.html icon="external-link" color="blue" class="pr-1" %} - Bootstrap documentation - -

+ {% if page.bootstrap-link %} +

+ + {% include ui/icon.html icon="external-link" color="blue" class="pr-1" %} + Bootstrap documentation + +

+ {% endif %} +
+ + {% if page.plugin %} +
This module is available in tabler-{{ page.plugin }} + plugin. +
+ {% endif %} + + {% if page.description %} +

{{ page.description }}

{% endif %}
- {% if page.plugin %} -
This module is available in tabler-{{ page.plugin }} - plugin. -
- {% endif %} - - {% if page.description %} -

{{ page.description }}

- {% endif %} - - {{ content | toc_generate }} + {{ content }}
diff --git a/src/pages/_layouts/markdown.html b/src/pages/_layouts/markdown.html index cc395d608..7b1c47d2e 100644 --- a/src/pages/_layouts/markdown.html +++ b/src/pages/_layouts/markdown.html @@ -10,12 +10,4 @@ layout: default
- {% if page.toc %} -
-
-
On this page
- {{ content | toc_only }} -
-
- {% endif %}
\ No newline at end of file diff --git a/src/pages/changelog.html b/src/pages/changelog.html index 1ad518c23..e33fb8e51 100644 --- a/src/pages/changelog.html +++ b/src/pages/changelog.html @@ -1,18 +1,15 @@ --- title: Changelog -page-header: Changelog -menu: changelog +menu: docs.changelog +layout: docs --- -
-
- {% for page in site.changelog reversed %} -
-
- {{ page.title }} — - {{ page.date | date: '%B %d, %Y' }} -
-
{{ page.content }}
-
- {% endfor %} + +{% for page in site.changelog reversed %} +
+
+ {{ page.title }} — + {{ page.date | date: '%B %d, %Y' }}
+
{{ page.content }}
+{% endfor %} diff --git a/src/pages/docs.html b/src/pages/docs.html deleted file mode 100644 index 705587b12..000000000 --- a/src/pages/docs.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -redirect_to: ./docs/index.html -layout: redirect -title: Documentation ---- diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 71b1c04de..5579070ae 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -38,10 +38,10 @@ $line-height-base: (1.25rem/$font-size-base) !default; $line-height-sm: (1rem/$font-size-base) !default; $line-height-lg: (1.5rem/$font-size-base) !default; -$h1-font-size: (28rem / 16) !default; +$h1-font-size: (24rem / 16) !default; $h1-line-height: (2rem/$h1-font-size) !default; -$h2-font-size: (20rem / 16) !default; +$h2-font-size: (18rem / 16) !default; $h2-line-height: (1.75rem/$h2-font-size) !default; $h3-font-size: (16rem / 16) !default; @@ -69,6 +69,7 @@ $blockquote-font-size: $font-size-base !default; $min-contrast-ratio: 1.5 !default; $text-muted-opacity: .66 !default; $text-muted-light-opacity: .4 !default; +$text-muted-dark-opacity: .8 !default; $border-opacity: .16 !default; $border-dark-opacity: .24 !default; @@ -117,6 +118,7 @@ $white: #ffffff !default; $text-muted: mix($body-color, #fff, percentage($text-muted-opacity)) !default; $text-muted-light: mix($body-color, #fff, percentage($text-muted-light-opacity)) !default; +$text-muted-dark: mix($body-color, #fff, percentage($text-muted-dark-opacity)) !default; $border-color: mix($text-muted, #fff, percentage($border-opacity)) !default; $border-color-transparent: rgba($text-muted, $border-opacity) !default; @@ -368,9 +370,14 @@ $modal-md: 540px !default; $modal-sm: 380px !default; //nav -$nav-link-padding-y: .25rem !default; +$nav-link-color: inherit !default; +$nav-link-padding-y: .5rem !default; $nav-link-padding-x: .75rem !default; +$nav-pills-link-active-color: $primary !default; +$nav-pills-link-active-bg: $active-bg !default; + + //navbar $navbar-height: 3.5rem !default; $navbar-padding-y: .25rem !default; @@ -481,7 +488,7 @@ $form-check-margin-bottom: .5rem !default; $form-check-input-width: 1rem !default; $form-check-padding-left: $form-check-input-width + .5rem !default; $form-check-input-bg: $white !default; -$form-check-input-border: 1px solid $border-color-transparent !default; +$form-check-input-border: 1px solid $border-color-dark-transparent !default; $form-check-input-border-radius: $border-radius !default; $form-check-input-checked-bg-size: 1rem !default; @@ -491,7 +498,7 @@ $form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; $form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; -$form-check-input-checked-border-color: $border-color-transparent !default; +$form-check-input-checked-border-color: $border-color-dark-transparent !default; $form-check-label-disabled-opacity: $text-muted-opacity; diff --git a/src/scss/demo.scss b/src/scss/demo.scss index fe7723961..57bb4193e 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -15,16 +15,6 @@ body.no-transitions * { transition: none !important; } -.toc-entry { - &:before { - content: '- ' - } - - ul { - list-style: none; - padding-left: 1rem; - } -} .dropdown-menu-demo { display: inline-block; diff --git a/src/scss/demo/_examples.scss b/src/scss/demo/_examples.scss index 4e181b744..3a3263c40 100644 --- a/src/scss/demo/_examples.scss +++ b/src/scss/demo/_examples.scss @@ -21,6 +21,7 @@ .example-content { font-size: $font-size-base; + line-height: $line-height-base; flex: 1; max-width: 100%; } @@ -31,6 +32,7 @@ .example-code { margin: 2rem 0; + border: 1px solid $border-color; border-top: none; pre { diff --git a/src/scss/demo/_highlight.scss b/src/scss/demo/_highlight.scss index dfb35d7d1..9394367cd 100644 --- a/src/scss/demo/_highlight.scss +++ b/src/scss/demo/_highlight.scss @@ -12,17 +12,280 @@ pre.highlight, margin: 1.5rem 0; overflow: auto; font-size: $code-font-size; - background: $dark; border-radius: $border-radius; - color: #ffffff; - @include scrollbar(true); + @include scrollbar; } .highlight { - .c, .c1 { color: $code-gray; } - .na, .nx, .nl, .language-css & .na, .language-scss & .na { color: $code-yellow; } - .s, .dl, .s1, .s2, .mh { color: $code-green; } - .mi, .language-js .nb, .nc, .nd, .nt { color: $code-blue; } - .language-html .nt, .nb { color: $code-red; } - .k, .kd, .nv, .n { color: $code-purple; } + margin: 0; + + .dl { + color: #4070a0 + } + + .c { + color: #727272 + } + + .c1 { + color: #727272 + } + + .ch { + font-style: italic; + color: #60a0b0 + } + + .cm { + color: #727272 + } + + .cp { + color: #008085 + } + + .cpf { + color: #007020 + } + + .cs { + color: #727272 + } + + .gd { + background-color: #fcc; + border: 1px solid #c00 + } + + .ge { + font-style: italic + } + + .gh { + color: #030 + } + + .gi { + background-color: #cfc; + border: 1px solid #0c0 + } + + .gl { + text-decoration: underline + } + + .go { + color: #aaa + } + + .gp { + color: #009 + } + + .gr { + color: #f00 + } + + .gs { + font-weight: 700 + } + + .gt { + color: #9c6 + } + + .gu { + color: #030 + } + + .il { + color: #c24f19 + } + + .k { + color: #069 + } + + .kc { + color: #069 + } + + .kd { + color: #069 + } + + .kn { + color: #069 + } + + .kp { + color: #069 + } + + .kr { + color: #069 + } + + .kt { + color: #078 + } + + .m { + color: #c24f19 + } + + .mf { + color: #c24f19 + } + + .mb { + color: #40a070 + } + + .mh { + color: #c24f19 + } + + .mi { + color: #c24f19 + } + + .mo { + color: #c24f19 + } + + .na { + color: #006ee0 + } + + .nb { + color: #366 + } + + .nc { + color: #168174 + } + + .nd { + color: #6b62de + } + + .ne { + color: #c00 + } + + .nf { + color: #b715f4 + } + + .ni { + color: #727272 + } + + .nl { + color: #6b62de + } + + .nn { + color: #007ca5 + } + + .no { + color: #360 + } + + .nt { + color: #2f6f9f + } + + .nv { + color: #033 + } + + .o { + color: #555 + } + + .ow { + color: #000 + } + + .s { + color: #d73038 + } + + .s1 { + color: #c30 + } + + .s2 { + color: #c30 + } + + .sa { + color: #4070a0 + } + + .sb { + color: #c30 + } + + .sc { + color: #c30 + } + + .sd { + font-style: italic; + color: #c30 + } + + .se { + color: #c30 + } + + .sh { + color: #c30 + } + + .si { + color: #a00 + } + + .sr { + color: #337e7e + } + + .ss { + color: #fc3 + } + + .sx { + color: #c30 + } + + .w { + color: #bbb + } + + .language-bash::before,.language-sh::before { + color: #009; + content: "$ "; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none + } + + .language-bash .m,.language-sh .m { + color: inherit + } + + .language-powershell::before { + color: #009; + content: "PM> "; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none + } } diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss index f237652ed..12f758ea8 100644 --- a/src/scss/ui/_badges.scss +++ b/src/scss/ui/_badges.scss @@ -4,7 +4,6 @@ align-items: center; background: $gray-500; overflow: hidden; - vertical-align: text-bottom; user-select: none; padding: calc(.25rem - 1px) .25rem; height: 1.25rem; diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index 4f28b0bfb..1a667ce71 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -9,6 +9,7 @@ &:hover { color: $body-color; border-color: $text-muted-light; + background-color: $light; } &:focus { @@ -130,7 +131,6 @@ flex-wrap: wrap; margin-bottom: -.5rem !important; margin-right: -.5rem; - line-height: 1; > * { margin: 0 .5rem .5rem 0; diff --git a/src/scss/ui/_markdown.scss b/src/scss/ui/_markdown.scss index 9894c0317..210c30890 100644 --- a/src/scss/ui/_markdown.scss +++ b/src/scss/ui/_markdown.scss @@ -15,8 +15,9 @@ Markdown > { h1, h2, h3, h4, h5, h6 { - margin-top: 2rem; - margin-bottom: .25rem; + margin-top: 3rem; + margin-bottom: .5rem; + font-weight: $font-weight-bold; } h1 { diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss index 9a6355f49..cc35ffb48 100644 --- a/src/scss/ui/_nav.scss +++ b/src/scss/ui/_nav.scss @@ -1,4 +1,28 @@ +.nav { + margin: 0; +} + +.nav-vertical { + &, + .nav { + flex-direction: column; + flex-wrap: nowrap; + } + + .nav { + margin-inline-start: 1.25rem; + border-left: 1px solid $border-color; + padding-inline-start: .5rem; + } + + &.nav-pills { + margin: 0 (-$nav-link-padding-x); + } +} + .nav-tabs { + margin: 0; + .icon { color: $text-muted; } @@ -39,28 +63,34 @@ } } -.nav-icon { - line-height: 1; - margin-right: .25rem; - - .icon { - display: block; - stroke-width: 1.5; - } -} - .nav-link { display: flex; transition: .3s color; align-items: center; } +.nav-link-toggle { + margin-left: auto; + padding: 0 .25rem; + transition: .3s transform; + @include caret(); + + &:after { + margin: 0; + } + + @at-root .nav-link[aria-expanded="true"] & { + transform: rotate(180deg); + } +} + .nav-link-icon { width: 1.25rem; height: 1.25rem; margin-inline-end: .5rem; + opacity: $text-muted-opacity; - .icon { + svg { display: block; width: 100%; height: 100%; diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss index 7f50e50c5..3ff513af1 100644 --- a/src/scss/ui/_type.scss +++ b/src/scss/ui/_type.scss @@ -111,6 +111,7 @@ pre { tab-size: 3; border-radius: $border-radius; white-space: pre-wrap; + background: mix($light, #fff, 50%); code { padding: 0;