I want to make a demo of some sort online study book. I am trying to use bootstrap as a core for my styles but it feels like it's not enough.
What I really like is a bootstrap site itself: getbootstrap.com.
Both of these sidebars with navigation and this fancy header. Plus they have nicer styles for typography:
So I have two question:
1) Am I allowed to use their styles?
2) If so what will be the right way to get those styles? I can see two extra files in the head of the site but I hope that maybe there is a repository or something.
P.S. any other advises are welcome too. Maybe you can recommend framework for online books/documentation or something?
Thanks.
UPD: For those who vote negatively on this question could you please explain why?
I'm not sure if you're directly allowed to use their styles. However, you could always legally obtain a similar template such as
https://guidebook.webuildthemes.com/html/docs/layout-2.html
Alternatively, there are plenty of other free options designed to build documentations and have them customized to suit your design needs. A few of them are listed below:
https://docusaurus.io/docs/en/installation
https://docsify.js.org/#/
https://daux.io/
https://www.mkdocs.org/
Related
I have just begun my Typo3 journey. There is not much typo3 content available over the internet. I have gone through its documentation. As far as I have understood it, the ideal way of creating a website (frontend) is using content elements from backend and customising it according to our need in code (using CSS).
My Question is how can I do so? How can I find the code of all my used content elements so that I can use my own CSS to style it according to my need?
Or is there any other ideal or professional way of creating a webpage that mostly developers use?
Please please help me with my questions.
THANK YOU IN ADVANCE :)
I suggest to look into one of the following 2 extensions which allow to create content element types within a nice backend module:
https://extensions.typo3.org/extension/mask
https://extensions.typo3.org/extension/dce
Both come with a manual and it is afterwards easy to adopt the based default templates and apply the HTML you need
for the page structure I suggest to use something like https://jweiland.net/typo3/typo3-template-version-11.html or the bootstrap package https://www.bootstrap-package.com/ which also come with various custom content elements already
if you are german speaking you can also take a look at the video tutorials of wolfgang wagner which can be found at https://wwagner.net/
The base frontend structure of a TYPO3 websites is:
page templates (usually contain generic elements such as header,
footer, navigation.
page templates can be devided into serveral sections if needed
content elements which are than displayed in this sections / in
templates
The core already ships a set of common content elements and supplies basic CSS styling which you can override and adjust.
I prefer to check what kind of content elements I might need in order to get the website layout done and then build those custom elements. This gives full control over the HTML markup output and I can write my custom CSS specifically for my markup. This approach might need more initial work and requires a deeper understanding of the system, but often pays off in the end.
But if you want to see quick results as a beginner the approaches Georg mentioned with Mask or the bootstrap package are perfectly fine.
I am trying to decide on a CSS framework for a basic portfolio website. I want to have some JS components that I can add with a separate library. It seems that people love Bulma but I am wondering what are the limitations give it is a "JS free" framework.
So far I have only used Bootstrap and I would like to try something new and preferably cleaner and easier to use.
Any insights and suggestions are welcomed.
Thank you!
Bulma has most of the important things that you will need. It does lack some things, however. For example, Bulma doesn't have alerts, carousel, list group, etc. Bulma addresses this on their website (https://bulma.io/alternative-to-bootstrap/). Personally, I would say stick to bootstrap. It has a larger community (which means more stack overflow questions, documentation, etc.), and its color scheme is more professional.
What kind attempts there exist to make Plone 4 themes based on Twitter Bootstrap, preferably 2.0?
I have seen some discussion on mailing list and I'd hope to know what add-ons there already exists before inventing a new one.
http://pypi.python.org/pypi/plonetheme.bootstrap/1.0a1
and
https://github.com/kagesenshi/diazotheme.bootstrap
You don't need to use an add-on per se (though you can). Instead, consider downloading an example template from:
http://twitter.github.com/bootstrap/getting-started.html#examples
Then apply rules to it, as explained here:
http://docs.pythonpackages.com/en/latest/hosted-configs/plone-diazo.html
This approach places a heavier emphasis on HTML/CSS/JavaScript knowledge in general, and less on Plone-specific techniques.
Note that the new (4.3-hopefully) plone.app.theming will contain an example/template theme based on Bootstrap.
It's not intended to be perfect (it also needs to be easy to understand and chop up and reuse), but it shows the basics. See https://github.com/plone/plone.app.theming/tree/optilude-ace/src/plone/app/theming/template for the work in process.
Bootstrap is a starting point to create a webapp. It provides a lot of CSS with associated widget. Mix with Plone will add conflict (forms.css, ...) and not optimised results (weight of page).
Once Plone will have splited CMS UI in overlays it will be easier to build the CMS UI itself on bootstrap or use bootstrap to create a theme (I like their responsive solution).
At the moment you will have many bugs by using existing addons. I have already tried plonetheme.bootstrap and diazotheme.bootstrap.
So if you really want it, get all Plone's CSS in a trash, get bootstrap and start to see what happens ;)
Usually when you design a website you don't want to take apart a complete css or fiddle around with the basic css buldingblogs.
Is there a good resource of basic building blocks for css. Something like different Menus, Page effects, and basic layouts that is written in clean code and can be easily combined together?
http://snipplr.com/popular/language/css
http://www.1stwebdesigner.com/development/useful-css-snippets/
http://css-tricks.com/snippets/
These sites I find helpful when I am trying to find css snippets. Should be well over 500 snippets there.
http://www.smashingmagazine.com/tag/css/
http://www.alistapart.com/
... and many more.
I'm terribly new to web development. I'm trying to make a pretty simple site with a friend. My friend has taken the time to design the layout for our site, and we have things looking how we want in a static HTML page.
What I'd like to do now is move over to a Content Management System like Drupal but keep the same design that we have all ready laid out.
Since I'm completely new to this field, I'm looking for some best-practices advice as to how to make this leap.
It's apparent to me that I could probably edit some existing Drupal Theme to make it give me the layout that I want, but is that the path I should go down?
Thanks!
Update: Also, is it more than just replacing my style.css with their style.css?
Update 2: The end goal is for people to be able to log in and create news entries, very similar to a blog that will then appear on the front page. There will be other items on the left- and right- but they don't need to be directly accessed by anyone, really. They'll stay pretty static.
The Zen theme is sort of a meta-theme that's designed to be fully standards compliant and make pretty much every aspect of theming readily customizable, with lots of informative commenting. It's the best place to start if you want to develop your own theme. Even if you find a theme that looks a lot like the one you want to create, it's probably still better to start with zen because it's extremely well laid out and instructive. That being said, I've never built a theme from scratch, but it sure looks like a lot of work.
Update
In general the best approach will likely end up being to use your designer's HTML and CSS as a reference, and to edit the Zen-based templates and CSS files to recreate that appearance. It's a bit magical.
You will end up breaking the styles used in your designer's layout into chunks that are part of various template files. The mostly-static stuff on the side columns will become what Drupal calls "blocks"; you'll likely use the top part of the page to refine the HTML for the header section of the main page template; and you'll use the central part to add any necessary tags to the content section of the main page template.
I tend to make liberal use of the Firebug extension for Firefox, or the developer tools built into Chrome. These tools let you quickly locate a given CSS element that you want to change, and edit it to see how the change will look. At first though it's probably better to just read through the whole CSS file to get a feel for how it works. Again, Zen's CSS is very easy to digest.
Pour your heart and soul into the Drupal Theming Guide for the next few days. Theming, like most things, is best done if followed by a gratuitous amount of time in the documentation.
Start with either Zen or Framework themes. They provide good starting points for working with the CSS to adapt to your design.
This helps too:
http://drupal.org/theme-guide
Whatever you do, don't take Garland theme as how a good drupal theme is done. I went down that path when I first started Drupal...