Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation on template elements #27

Open
thijse opened this issue Feb 14, 2023 · 5 comments
Open

Documentation on template elements #27

thijse opened this issue Feb 14, 2023 · 5 comments

Comments

@thijse
Copy link

thijse commented Feb 14, 2023

I really like your Jekyll templates and the fact that you provide them for free. Thanks a lot! I also like all the examples you show for the different skin styles, such as at Lymcha skin

However, I would really like to use some of the elements that you show there, such as
Buttons, Indicators, Buttons, Tables, etc

But I cannot find an example page showing these. Can you please share the markdown pages behind all these elements?

Thanks a lot!

@dieghernan
Copy link
Owner

HI @thijse :

Thanks for your interest on this template.

On the skin demos, the elements are html code formatted using Bootstrap 4, so for example if you want to render a button you can do:

This is markdown, now we render a button, using html (we can mix those two languages and Jekyll would recognize it)

<button type="button" class="btn btn-primary">Primary</button>

That would we rendered by Jekyll as:

image

Note that class="btn btn-primary is a specific css class of Bootstrap.

Have a look to this FAQ where it is explained https://dieghernan.github.io/chulapa/docs/05-faq#add-a-alert-box

For a live application, see this page where I render a button https://dieghernan.github.io/chulapa/docs/03-theming#tool .
The source file of that page is an md file (see https://github.com/dieghernan/chulapa/blob/master/docs/collections/_docs/03_theming.md?plain=1) and the button is produced by these lines:

<div class="text-center my-4">
  <a class="btn btn-lg btn-primary mx-1" href="https://www.codeply.com/p/qhEml875ge" role="button">Go to the Codeply sandbox</a>
</div>

If you want to have a look to the source of the Lymcha demo, all the components are produced in html by this template:

https://github.com/dieghernan/chulapa/blob/master/_includes/snippets/bootstrapdemo.html

@dieghernan
Copy link
Owner

Basically, you can use any fragment of html code on the Bootstrap documentation https://getbootstrap.com/docs/4.4/getting-started/introduction/ and it would be rendered by Chulapa with the skin you choose

@thijse
Copy link
Author

thijse commented Mar 9, 2023

Awesome, thanks for your help! This is certainly enough to get me started, but I can't help feeling that it would be nicer if all editing could be done in markdown, without knowledge of css & bootstrap.

But I think that is more of a gripe with Jekyll than it is with your awesome template. Thanks again!

@leabs
Copy link

leabs commented Mar 17, 2023

Awesome, thanks for your help! This is certainly enough to get me started, but I can't help feeling that it would be nicer if all editing could be done in markdown, without knowledge of css & bootstrap.

But I think that is more of a gripe with Jekyll than it is with your awesome template. Thanks again!

You can add css classes to markdown elements like links and many others in native markdown! Like this:

[Click me](http://www.google.com){: .btn .btn-warning}

That is on a blog post page, and renders like this:
capture 2023-03-17 at 2 53 33 PM

@dieghernan
Copy link
Owner

Yeah, that is explained also in the docs:

Have a look to this FAQ where it is explained https://dieghernan.github.io/chulapa/docs/05-faq#add-a-alert-box

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants