I am tying to create a UI in photoshop that will be used to render a full-width site. I have never used flexbox before and I've never created a full-width site before using it.
I'm wondering if I simply stick to the default bootstrap breakpoints or if I need to be doing something entirely different.
An example of the type of full-width layout:
Thou this is a very general question, I'd have following advice for you:
I would use both, grid & flexbox, since, grids are great for building the bigger picture and make it really easy to manage the overall layout of the page. They are also able to handle more unorthodox and asymmetrical designs.
Flexbox is great at aligning the content inside elements so you can use flexboxes to position the smaller details of a design.
You could use CSS grids for 2D layouts (rows AND columns) and Flexbox for one dimension only (rows OR columns).
There is no reason to use only CSS grids or only flexbox - they work well together in their respective field of usage.
For layouting and screencasts I can definitly recommend Adobe XD - quite fresh in the Adobe-family and free for now.
I hope that gave you some idea how to approach your project andf plan the layout according to your needs.
EDIT:
Have a look at this article - it should give you a fair understanding on how to set breakpoints according to your layout and the media/device.
Related
I am programming a SAPUI5 application and I would like achieve a vertical menu seemed IconTabBar. IconTabBar only allows me horizontal configuration.
Can I simulate that behavior with another components?
I was trying to create a "different" IconTabBar that only has one IconTabFilter as an aggregation and add it in a Vertical layout but it isn't work.
Short answer, No.
There is no out-of-box solution for your requirement. The IconTabBar is only available in the horizontal orientation and there isn't a provision (atleast not yet) to change it to vertical.
PS: If there is something that you have tried in particular, post code snippets to help others analyze better.
I am trying to find the best method in order to create a horizontal website, full screen and if possible responsive, minimum width to be for tablets. The thing is that I need also the horizontal scrolling with the mousewheel, and I saw that fullPage.js doesn't support that or at least i couldn't manage to make it work on this plugin.
Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.
Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..
However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..
This is must guide / tutorial for people who want to get started with Horizontal Responsive approach
http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/
you could use one of the tools listed in the following links
http://www.cssdesignawards.com/articles/15-excellent-jquery-plugins-to-spice-up-your-sites/44/
http://jquery-plugins.net/scrollit-js-jquery-plugin-for-scrolling-pages
or you could also mix raw js/jquery with anchor links and add animations when clicked. in taht case you can scroll down using mouse wheel and also have fancy animations when a link is clicked
regarding responsiveness use css media queries
I'm not by any stretch of the imagination a Drupal expert, but I would like to create a views slideshow in Drupal 6, that has the pagers listed vertically on the left of the slideshow (like one of those tabbed content sliders) and uses the stories' titles as pagers instead of the default numerical pagers. Actually, a similar effect can apparently be achieved using the dynamic display block module, but I find it a little iffy and a little buggy so I'm reluctant to use it.
Is it possible to customize views slideshow to that extent?
Any insight into achieving this would be greatly appreciated!
Many thanks - Jane
You can use the same approach that Miche describes in her very good video here:
She uses it to display the first letter, but you can adapt it to display titles instead:
http://developedbymiche.com/blog/2010/04/18/drupalcon-sf-2010-views-examples-arguments-relationships
(PS: Its also a GREAT video about Views)
For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!
I've had some experience in Swing and now I'm trying my hand at writing an ajax app in dojo. I'm particularly having a problem with layout. In Swing I'm used to putting widgets in containers with layout managers for simple things like left-to-right layout to more complicated things like 4 border regions and a center region.
After using Dojo for a bit I see there is a border type layout, but I don't see layouts for simpler things like left-to-right and top-to-bottom. There's a scrolling pane, but I don't want/need a scrollbar.
In my old-school web days, I used tables for layout, but after reading many posts about the "incorrectness" of such an approach I'm expecting the universe to explode if I employ this technique now =).
I've got to be missing something in Dojo... or maybe there's a general "web-way" of doing such things that is not specific to Dojo.
Dijit only provides a handful of layout widgets, and most of them are 'stack' based: StackContainer, AccordionContainer, and TabContainer are all about putting widgets on top of each other and switching between them. BorderContainer does what you describe and is generally the most useful layout widget in Dojo. dojox.layout has a few more.
The general philosophy of Dijit is to use HTML and the browser's native layout engine for anything HTML can do. Left to right is probably just putting widgets inline in HTML flow, top bottom would be separating them by block elements. Basic CSS can be applied for padding, etc. Absolute CSS positioning should be avoided. TABLEs are still your best bet for matrix layout to run well on all browsers -- nothing will blow up, just try not do nest them too much. There are fancier CSS layout techniques coming, but I don't think they're well supported yet.